/* ============ WEBS: la demo «Mírala montarse» (arriba) y «La obra»: las demás secciones, en idioma de navegador (abajo) ============ */
/* la ventana mide lo que deja su hueco (ancha hasta 2:1, alta hasta 1,45:1) y lo de dentro sale de esa medida: --d en el
   ordenador y --p en el móvil. No dependen del ancho que se anima, así que nada crece ni encoge mientras se vuelve teléfono */
@property --vw{syntax:'<length>';inherits:true;initial-value:900px}
@property --vh{syntax:'<length>';inherits:true;initial-value:500px}
@property --marca{syntax:'<color>';inherits:true;initial-value:#4b23b8}
/* la columna de los pasos, a la medida de su título: la ventana se queda con el resto */
@media (min-width:981px){.sv-demo .sv-pin{grid-template-columns:calc(min(calc(var(--u)*5.4),3.5vw)*8) minmax(0,1fr)}}
.dm-esc{container-type:size;transition:--marca .6s}
.dm-marco{--vw:min(100cqw,calc(100cqh*2));--vh:min(100cqh,calc(100cqw/1.45));--d:calc(var(--vw)/88);--p:calc(var(--vh)/46);--px:calc(var(--d)*2.4);width:var(--vw);height:var(--vh)}
.dm-ven{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;border-radius:calc(var(--d)*1.25);background:#fff;color:var(--ink);font-family:'Archivo',sans-serif;box-shadow:0 0 0 1.5px var(--ink),0 calc(var(--d)*2.6) calc(var(--d)*5) calc(var(--d)*-1.2) rgba(17,17,17,.3);overflow:hidden;transition:border-radius .9s cubic-bezier(.7,0,.2,1),box-shadow .9s cubic-bezier(.7,0,.2,1)}
.dm-ic{display:block;flex:none;width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* la barra del navegador (en el móvil, la de estado con la isla y la dirección debajo) */
.dm-barra{display:flex;align-items:center;gap:calc(var(--d)*1.1);height:calc(var(--d)*3.3);padding:0 calc(var(--d)*1.3);background:#efeae0;border-bottom:1px solid rgba(17,17,17,.1);font-size:max(9px,calc(var(--d)*1.1))}
.dm-luces{display:flex;flex:none;gap:calc(var(--d)*.5)}
.dm-luz{display:block;width:calc(var(--d)*.78);height:calc(var(--d)*.78);border-radius:50%;background:var(--k)}
.dm-luz:nth-child(2){background:var(--sun)}
.dm-luz:nth-child(3){background:#0b6b4c}
.dm-nav{display:flex;flex:none;gap:calc(var(--d)*.55);margin-left:calc(var(--d)*.5);opacity:.6}
.dm-ic-off{opacity:.4}
.dm-url{flex:1;display:flex;align-items:center;gap:.6em;min-width:0;height:calc(var(--d)*2.15);padding:0 1em;border-radius:99px;background:#fff;font:500 max(9px,calc(var(--d)*.98)) 'DM Mono',monospace;letter-spacing:.01em;color:rgba(17,17,17,.75);white-space:nowrap}
.dm-candado{width:1.15em;height:1.15em;opacity:.6}
.dm-mas{opacity:.5}
.dm-hora,.dm-isla,.dm-ics{display:none}
.dm-st{display:block;flex:none;width:auto;height:.8em;fill:currentColor}
.dm-st-b{height:.92em}
.dm-st-l{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.dm-st-b .dm-st-l{opacity:.45}
/* la página: cabecera, portada con su foto, la franja de reseñas, los tres recuadros y el pie con el horario */
.dm-pag{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:calc(var(--d)*1.2);padding:calc(var(--d)*1.6) var(--px) 0;min-height:0;background-color:#fff;transition:background-color .6s}
.dm-pl{position:relative;outline:1.3px dashed transparent;outline-offset:2px;transition:color .45s,background-color .45s,box-shadow .45s,outline-color .45s}
.dm-cab{display:flex;align-items:center;gap:calc(var(--d)*2);font-size:max(9px,calc(var(--d)*1))}
.dm-logo{display:flex;align-items:center;gap:.5em;margin-right:auto;font-size:max(10px,calc(var(--d)*1.45));line-height:1}
.dm-marca{display:block;flex:none;width:1.55em;height:1.55em;fill:var(--marca);transition:opacity .4s}
.dm-marca-c{fill:#fff}
.dm-nombre{font-weight:900;font-stretch:115%;letter-spacing:-.012em;white-space:nowrap}
.dm-menu{display:flex;gap:calc(var(--d)*1.9);padding:.35em .2em;font-weight:600;white-space:nowrap}
.dm-mi{opacity:.75}
.dm-btn-s{padding:.62em 1.3em;border-radius:99px;background-color:var(--marca);color:#fff;font-style:normal;font-weight:700;white-space:nowrap}
.dm-ham{display:none}
.dm-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:calc(var(--d)*2.6);min-height:0}
.dm-h-txt{display:grid;align-content:center;justify-items:start;gap:calc(var(--d)*.95);min-width:0}
.dm-abierto{display:inline-flex;align-items:center;gap:.6em;padding:.42em .9em;border-radius:99px;background-color:#f3f0ea;font:500 max(8px,calc(var(--d)*.8)) 'DM Mono',monospace;letter-spacing:.02em;white-space:nowrap}
.dm-punto{display:block;width:.62em;height:.62em;border-radius:50%;background:#1aa36f;box-shadow:0 0 0 .28em rgba(26,163,111,.2);transition:opacity .4s}
.dm-h1{font-weight:900;font-stretch:118%;font-size:max(16px,calc(var(--d)*3.15));line-height:.95;letter-spacing:-.028em;text-wrap:balance}
.dm-h2{font-weight:500;font-size:max(10px,calc(var(--d)*1.22));line-height:1.3;color:rgba(17,17,17,.68)}
.dm-bts{display:flex;flex-wrap:wrap;gap:calc(var(--d)*.7);margin-top:calc(var(--d)*.45);font-size:max(10px,calc(var(--d)*1.08))}
.dm-cta{padding:.82em 1.5em;border-radius:99px;background-color:var(--marca);color:#fff;font-style:normal;font-weight:700;white-space:nowrap;box-shadow:0 .55em 1.3em -.5em color-mix(in srgb,var(--marca) 80%,transparent)}
.dm-cta2{padding:.82em 1.35em;border-radius:99px;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.2);font-style:normal;font-weight:700;white-space:nowrap}
/* la foto: el objeto 3D del negocio sobre el degradado de su color */
.dm-foto{display:grid;place-items:center;min-height:0;border-radius:calc(var(--d)*1.4)}
.dm-foto-f{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 62% 72% at 50% 40%,color-mix(in srgb,var(--marca) 50%,#fff),var(--marca) 80%);overflow:hidden;transition:opacity .5s}
.dm-foto-f::after{content:'';position:absolute;left:12%;right:12%;bottom:-18%;height:40%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent)}
.dm-foto::before,.dm-tf::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top right,transparent calc(50% - .7px),rgba(243,238,228,.42) 50%,transparent calc(50% + .7px)),linear-gradient(to top left,transparent calc(50% - .7px),rgba(243,238,228,.42) 50%,transparent calc(50% + .7px));opacity:0;transition:opacity .4s}
.dm-foto-m{position:absolute;width:30%;max-height:50%;fill:#fff;opacity:0;scale:.7;transition:opacity .4s,scale .6s cubic-bezier(.2,1.4,.4,1)}
.dm-foto-i{position:absolute;inset:2%;display:block;width:96%;height:96%;object-fit:contain;opacity:0;scale:.55;rotate:-8deg;transition:opacity .35s,scale .8s cubic-bezier(.2,1.4,.4,1),rotate .8s cubic-bezier(.2,1.4,.4,1)}
/* la franja de reseñas, de lado a lado */
.dm-res{display:flex;align-items:center;gap:calc(var(--d)*.85);height:calc(var(--d)*3.1);margin:0 calc(var(--px)*-1);padding:0 var(--px);background-color:color-mix(in srgb,var(--marca) 7%,#fff);font-size:max(9px,calc(var(--d)*1));white-space:nowrap}
.dm-avs{display:flex;margin-right:.2em;transition:opacity .4s}
.dm-av{display:grid;place-items:center;width:3.2em;height:3.2em;margin-left:-.8em;border-radius:50%;border:2px solid #fff;background:#e8468f;color:#fff;font-style:normal;font-weight:800;font-size:.74em;letter-spacing:.01em}
.dm-av:first-child{margin-left:0}
.dm-av:nth-child(2){background:#0b6b4c}
.dm-av:nth-child(3){background:var(--sun);color:var(--ink)}
.dm-est{display:flex;gap:.08em;color:#f0a400;transition:opacity .4s}
.dm-estr{display:block;width:1.2em;height:1.2em;fill:currentColor}
.dm-nota{font-weight:900}
.dm-num{margin-left:-.4em;color:rgba(17,17,17,.62)}
.dm-cita{margin-left:auto;font-weight:600;font-style:italic;color:rgba(17,17,17,.7)}
/* los recuadros: el objeto del servicio sale un poco de su cuadrado */
.dm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--d)*1.2)}
.dm-tile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--d)*1.05);height:calc(var(--d)*6.4);padding:0 calc(var(--d)*1.1) 0 calc(var(--d)*.65);border-radius:calc(var(--d)*1.2);background-color:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.1),0 calc(var(--d)*.45) calc(var(--d)*1.1) calc(var(--d)*-.35) rgba(17,17,17,.14)}
.dm-tf{position:relative;display:grid;place-items:center;width:calc(var(--d)*5.1);height:calc(var(--d)*5.1);border-radius:calc(var(--d)*.9)}
.dm-tf::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--marca) 45%,#fff),var(--marca) 95%);transition:opacity .4s}
.dm-tf::after{box-shadow:inset 0 0 0 1px rgba(243,238,228,.45)}
.dm-ti{position:absolute;width:50%;height:50%;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;scale:.7;transition:opacity .4s,scale .5s cubic-bezier(.2,1.4,.4,1)}
.dm-to{position:relative;display:block;width:112%;height:112%;max-width:none;object-fit:contain;opacity:0;scale:.5;rotate:-12deg;transition:opacity .35s,scale .8s cubic-bezier(.2,1.4,.4,1),rotate .8s cubic-bezier(.2,1.4,.4,1)}
.dm-tt{display:grid;gap:.3em;min-width:0}
.dm-tb{font-weight:800;font-size:max(10px,calc(var(--d)*1.2));line-height:1.1;letter-spacing:-.005em;white-space:nowrap}
.dm-ts{font-size:max(8.5px,calc(var(--d)*.9));line-height:1.2;color:rgba(17,17,17,.6);white-space:nowrap}
.dm-tfl{width:calc(var(--d)*1.3);height:calc(var(--d)*1.3);opacity:.4}
/* el pie, oscuro, con el horario */
.dm-pie{display:flex;align-items:center;gap:calc(var(--d)*2.2);height:calc(var(--d)*3.2);margin:0 calc(var(--px)*-1);padding:0 var(--px);background-color:#151311;color:rgba(243,238,228,.75);font-size:max(8.5px,calc(var(--d)*.88));white-space:nowrap}
.dm-pie-l{display:flex;align-items:center;gap:.5em;margin-right:auto;color:#f3eee4;font-size:1.12em}
.dm-pie-l .dm-marca{fill:color-mix(in srgb,var(--marca) 35%,#fff)}
.dm-pie-n{font-weight:900;font-stretch:115%}
.dm-pie-d{display:flex;align-items:center;gap:.5em}
.dm-pie-r{display:flex;gap:1em}
/* la medida del plano */
.dm-cota{position:absolute;left:var(--px);right:var(--px);top:calc(var(--d)*.32);display:flex;align-items:center;justify-content:center;height:calc(var(--d)*1);border-inline:1px solid var(--sun);color:var(--sun);opacity:0;scale:.15 1;transition:opacity .3s,scale .7s cubic-bezier(.7,0,.2,1)}
.dm-cota::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor}
.dm-cota-t{position:relative;padding:0 .8em;background:var(--c);font:500 max(7px,calc(var(--d)*.7)) 'DM Mono',monospace;letter-spacing:.1em;line-height:1}
.dm-pag::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(243,238,228,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(243,238,228,.2) 1px,transparent 1px),linear-gradient(rgba(243,238,228,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(243,238,228,.07) 1px,transparent 1px);background-size:calc(var(--d)*6) calc(var(--d)*6),calc(var(--d)*6) calc(var(--d)*6),calc(var(--d)*1.2) calc(var(--d)*1.2),calc(var(--d)*1.2) calc(var(--d)*1.2);background-position:var(--px) 0;opacity:0;transition:opacity .5s;pointer-events:none}
/* la etiqueta de cada pieza del plano */
.dm-pl[data-l]::after{content:attr(data-l);position:absolute;left:calc(var(--d)*.35);top:calc(var(--d)*.32);z-index:1;padding:.28em .55em .24em;border-radius:.3em;background:var(--sun);color:var(--ink);font:500 max(7px,calc(var(--d)*.66)) 'DM Mono',monospace;letter-spacing:.09em;line-height:1;text-transform:uppercase;white-space:nowrap;opacity:0;scale:.6;transform-origin:0 0;transition:opacity .25s,scale .45s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.dm-btn-s[data-l]::after,.dm-cta[data-l]::after{left:50%;top:50%;translate:-50% -50%;transform-origin:50% 50%}
.dm-res[data-l]::after,.dm-pie[data-l]::after{left:var(--px);top:50%;translate:0 -50%}

/* paso 1 · la estructura: el plano de la web, con su cuadrícula, la medida, los contornos y las etiquetas */
.dm-esc[data-paso="1"] .dm-pag{background-color:var(--c)}
.dm-esc[data-paso="1"] .dm-pag::before{opacity:1}
.dm-esc[data-paso="1"] .dm-cota{opacity:1;scale:1 1;transition:opacity .3s .15s,scale .8s cubic-bezier(.7,0,.2,1) .15s}
.dm-esc[data-paso="1"] :is(.dm-pl,.dm-pl *){color:transparent}
.dm-esc[data-paso="1"] .dm-pl{background-color:transparent;box-shadow:none;outline-color:rgba(243,238,228,.55)}
.dm-esc[data-paso="1"] :is(.dm-res,.dm-pie){outline-offset:-4px}
.dm-esc[data-paso="1"] .dm-pl[data-l]::after{color:var(--ink);opacity:1;scale:1;transition-delay:calc(var(--i)*45ms + .3s)}
.dm-esc[data-paso="1"] :is(.dm-marca,.dm-punto,.dm-avs,.dm-est,.dm-foto-f){opacity:0}
.dm-esc[data-paso="1"] .dm-foto::before,.dm-esc[data-paso="1"] .dm-tf::after{opacity:1}
.dm-esc[data-paso="1"] .dm-tf::before{opacity:0}
/* paso 2 · tu marca: el color, el logo y los textos; en la foto, la marca grande, y en los recuadros, sus iconos */
.dm-esc[data-paso="2"] .dm-foto-m{opacity:.92;scale:1}
.dm-esc[data-paso="2"] .dm-ti{opacity:1;scale:1}
/* paso 3 · fotos y textos: entran los objetos 3D del negocio (y desde aquí se quedan) */
.dm-esc:is([data-paso="3"],[data-paso="4"],[data-paso="5"]) :is(.dm-foto-i,.dm-to){opacity:1;scale:1;rotate:0deg}
.dm-esc[data-paso="3"] .dm-foto-i{transition-delay:.1s;animation:dm-flota 5.5s ease-in-out 1.2s infinite}
.dm-esc[data-paso="3"] .dm-tile:nth-child(1) .dm-to{transition-delay:.3s}
.dm-esc[data-paso="3"] .dm-tile:nth-child(2) .dm-to{transition-delay:.4s}
.dm-esc[data-paso="3"] .dm-tile:nth-child(3) .dm-to{transition-delay:.5s}
@keyframes dm-flota{50%{translate:0 -2.5%}}
.sv-demo:not(.wb-vivo) .dm-foto-i{animation-play-state:paused}
/* de ventana a móvil: lo de dentro se funde mientras cambia la forma */
.dm-morfa :is(.dm-barra,.dm-pag,.dm-fijo){animation:dm-morfa 1.3s cubic-bezier(.4,0,.2,1) both}
@keyframes dm-morfa{0%{opacity:1}15%,70%{opacity:0}100%{opacity:1}}

/* pasos 4 y 5 · en el móvil: un teléfono de verdad (marco, isla, barra de estado, la web en una columna y el botón fijo abajo) */
.dm-esc[data-vista="movil"] .dm-marco{width:calc(var(--vh)*.49)}
.dm-esc[data-vista="movil"] .dm-ven{--px:calc(var(--p)*1.3);border-radius:calc(var(--p)*3.3);box-shadow:0 0 0 calc(var(--p)*.6) var(--ink),0 0 0 calc(var(--p)*.68) #5a554c,0 calc(var(--p)*2.6) calc(var(--p)*4.4) calc(var(--p)*-1) rgba(17,17,17,.42)}
.dm-esc[data-vista="movil"] .dm-barra{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;row-gap:calc(var(--p)*.55);height:auto;padding:calc(var(--p)*.7) calc(var(--p)*1.5) calc(var(--p)*.6);background:#fff;border:0;font-size:max(8px,calc(var(--p)*.95))}
.dm-esc[data-vista="movil"] :is(.dm-luces,.dm-nav,.dm-mas){display:none}
.dm-esc[data-vista="movil"] .dm-hora{display:block;grid-area:1/1;font-weight:800;letter-spacing:-.01em}
.dm-esc[data-vista="movil"] .dm-isla{display:block;grid-area:1/2;width:calc(var(--p)*6);height:calc(var(--p)*1.75);border-radius:99px;background:var(--ink)}
.dm-esc[data-vista="movil"] .dm-ics{display:flex;grid-area:1/3;justify-self:end;align-items:center;gap:.35em}
.dm-esc[data-vista="movil"] .dm-url{grid-area:2/1/3/4;justify-content:center;height:calc(var(--p)*2.3);background:#f2efe8;font-size:max(7.5px,calc(var(--p)*.82))}
.dm-esc[data-vista="movil"] .dm-pag{grid-template-rows:auto auto auto auto;align-content:start;gap:calc(var(--p)*.9);padding:calc(var(--p)*.9) var(--px) 0}
.dm-esc[data-vista="movil"] .dm-cab{font-size:max(8px,calc(var(--p)*1.05))}
.dm-esc[data-vista="movil"] .dm-logo{font-size:max(9px,calc(var(--p)*1.2))}
.dm-esc[data-vista="movil"] :is(.dm-menu,.dm-btn-s,.dm-bts,.dm-cita,.dm-pie,.dm-cota){display:none}
.dm-esc[data-vista="movil"] .dm-ham{display:block;width:1.5em;height:1.5em}
.dm-esc[data-vista="movil"] .dm-hero{grid-template-columns:minmax(0,1fr);gap:calc(var(--p)*.95)}
.dm-esc[data-vista="movil"] .dm-foto{order:-1;height:calc(var(--p)*10.4);border-radius:calc(var(--p)*1.2)}
.dm-esc[data-vista="movil"] .dm-h-txt{gap:calc(var(--p)*.55)}
.dm-esc[data-vista="movil"] .dm-abierto{font-size:max(7px,calc(var(--p)*.72))}
.dm-esc[data-vista="movil"] .dm-h1{font-size:max(14px,calc(var(--p)*2.05))}
.dm-esc[data-vista="movil"] .dm-h2{font-size:max(8px,calc(var(--p)*.92))}
.dm-esc[data-vista="movil"] .dm-res{height:calc(var(--p)*2.7);font-size:max(7.5px,calc(var(--p)*.82))}
.dm-esc[data-vista="movil"] .dm-tiles{grid-template-columns:minmax(0,1fr);gap:calc(var(--p)*.6)}
.dm-esc[data-vista="movil"] .dm-tile{height:calc(var(--p)*4.3);gap:calc(var(--p)*.85);padding:0 calc(var(--p)*.9) 0 calc(var(--p)*.5);border-radius:calc(var(--p)*1)}
.dm-esc[data-vista="movil"] .dm-tf{width:calc(var(--p)*3.3);height:calc(var(--p)*3.3);border-radius:calc(var(--p)*.7)}
.dm-esc[data-vista="movil"] .dm-tb{font-size:max(8.5px,calc(var(--p)*.98))}
.dm-esc[data-vista="movil"] .dm-ts{font-size:max(7px,calc(var(--p)*.76))}
.dm-esc[data-vista="movil"] .dm-tfl{width:calc(var(--p)*1.1);height:calc(var(--p)*1.1)}
.dm-fijo{display:none;position:absolute;left:0;right:0;bottom:0;z-index:2;align-items:center;gap:calc(var(--p)*.55);padding:calc(var(--p)*.75) var(--px) calc(var(--p)*1.85);background:rgba(255,255,255,.95);box-shadow:0 -1px 0 rgba(17,17,17,.08),0 calc(var(--p)*-1) calc(var(--p)*1.8) rgba(17,17,17,.08)}
.dm-esc[data-vista="movil"] .dm-fijo{display:flex}
.dm-fijo-b{flex:1;display:grid;place-items:center;height:calc(var(--p)*3.2);border-radius:99px;background:var(--marca);color:#fff;font-style:normal;font-weight:800;font-size:max(9px,calc(var(--p)*1.02));white-space:nowrap;box-shadow:0 .5em 1.1em -.45em color-mix(in srgb,var(--marca) 80%,transparent)}
.dm-fijo-c{display:grid;place-items:center;flex:none;width:calc(var(--p)*3.2);height:calc(var(--p)*3.2);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.14);font-size:calc(var(--p)*1.15)}
.dm-home{display:none;position:absolute;left:50%;bottom:calc(var(--p)*.55);z-index:4;width:34%;height:calc(var(--p)*.4);translate:-50% 0;border-radius:99px;background:var(--ink)}
.dm-esc[data-vista="movil"] .dm-home{display:block}
/* la hoja de la reserva: el calendario de verdad, las horas y el botón de confirmar */
.dm-velo{display:none;position:absolute;inset:0;z-index:3;background:rgba(17,17,17,.38);opacity:0;transition:opacity .3s}
.dm-hoja{display:none;position:absolute;left:0;right:0;bottom:0;z-index:3;align-content:start;gap:calc(var(--p)*.8);padding:calc(var(--p)*.6) var(--px) calc(var(--p)*2.1);border-radius:calc(var(--p)*1.9) calc(var(--p)*1.9) 0 0;background:#fff;box-shadow:0 calc(var(--p)*-.6) calc(var(--p)*2.4) rgba(17,17,17,.28);font-size:max(8px,calc(var(--p)*.9));translate:0 105%;transition:translate .45s cubic-bezier(.7,0,.2,1)}
.dm-esc[data-vista="movil"] .dm-velo{display:block}
.dm-esc[data-vista="movil"] .dm-hoja{display:grid}
.dm-asa{display:block;justify-self:center;width:calc(var(--p)*3.2);height:calc(var(--p)*.38);border-radius:99px;background:rgba(17,17,17,.18)}
.dm-hoja-c{display:grid;gap:.3em}
.dm-hoja-t{font-weight:900;font-stretch:112%;font-size:1.45em;line-height:1.05;letter-spacing:-.015em}
.dm-hoja-s{color:rgba(17,17,17,.6)}
.dm-cal{display:grid;gap:calc(var(--p)*.3);padding:calc(var(--p)*.65) calc(var(--p)*.5) calc(var(--p)*.55);border-radius:calc(var(--p)*1);background:#f6f3ed}
.dm-mes{display:flex;align-items:center;justify-content:space-between;padding:0 .35em .15em}
.dm-mes-t{font-weight:800}
.dm-mes-f{display:flex;gap:.6em;opacity:.5}
.dm-sem{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));justify-items:center;row-gap:calc(var(--p)*.15)}
.dm-dn{font:normal 500 .78em 'DM Mono',monospace;color:rgba(17,17,17,.45)}
.dm-d{display:grid;place-items:center;width:calc(var(--p)*2);height:calc(var(--p)*2);border-radius:50%;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;transition:background-color .25s,color .25s,box-shadow .25s}
.dm-d-pas,.dm-d-cer{color:rgba(17,17,17,.3)}
.dm-d-cer{text-decoration:line-through}
.dm-d-hoy{box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.35)}
.dm-horas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--p)*.5)}
.dm-hr{display:grid;place-items:center;height:calc(var(--p)*2.4);border-radius:calc(var(--p)*.75);box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.14);font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;transition:background-color .25s,color .25s,box-shadow .25s}
.dm-conf{position:relative;display:grid;height:calc(var(--p)*3.2);border-radius:99px;background:var(--marca);color:#fff;font-style:normal;font-weight:800;font-size:1.08em;overflow:hidden;transition:background-color .3s}
.dm-conf-a,.dm-conf-b{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:.45em;white-space:nowrap;transition:opacity .25s,translate .4s cubic-bezier(.7,0,.2,1)}
.dm-conf-b{opacity:0;translate:0 90%}
.dm-conf-ck{width:1.3em;height:1.3em;stroke-width:2.6}
.dm-conf-p{stroke-dasharray:1;stroke-dashoffset:1}
/* el cursor (con su toque al pulsar) y el sello de velocidad */
.dm-cur{position:absolute;left:0;top:0;z-index:6;width:calc(var(--p)*1.75);opacity:0;pointer-events:none}
.dm-cursor{display:block;width:100%;height:auto;fill:var(--ink);stroke:#fff;stroke-width:1.3;stroke-linejoin:round;transform-origin:10% 8%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.dm-toque{position:absolute;left:calc(var(--p)*-1.05);top:calc(var(--p)*-1.05);width:calc(var(--p)*2.4);height:calc(var(--p)*2.4);border-radius:50%;background:color-mix(in srgb,var(--marca) 30%,transparent);box-shadow:0 0 0 2px var(--marca);opacity:0}
.dm-vel{position:absolute;left:calc(var(--u)*-3.6);bottom:9%;z-index:7;display:flex;align-items:center;gap:.45em;padding:.7em 1.15em .7em .95em;border-radius:99px;background:var(--k);color:var(--kt);font-weight:800;font-size:max(12px,calc(var(--u)*1.3));white-space:nowrap;rotate:-4deg;opacity:0;translate:-25% 0;box-shadow:0 .6em 1.4em -.5em rgba(17,17,17,.4);transition:opacity .4s,translate .6s cubic-bezier(.2,1.3,.35,1)}
.dm-rayo{display:block;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* en el móvil queda, en línea de plano, el sitio de la ventana de antes, con las dos medidas */
.dm-fantasma{position:absolute;left:50%;top:50%;width:min(100cqw,calc(100cqh*2));height:min(100cqh,calc(100cqw/1.45));translate:-50% -50%;border-radius:calc(min(100cqw,calc(100cqh*2))/88*1.25);border:1.5px dashed rgba(17,17,17,.2);opacity:0;scale:1.03;transition:opacity .35s,scale .6s cubic-bezier(.2,1,.3,1);pointer-events:none}
.dm-esc[data-vista="movil"] .dm-fantasma{opacity:1;scale:1;transition-delay:.55s}
.dm-fm-t,.dm-medida{position:absolute;display:flex;align-items:center;gap:.55em;font:500 11px 'DM Mono',monospace;letter-spacing:.06em;color:rgba(17,17,17,.55);white-space:nowrap;pointer-events:none}
.dm-fm-t{left:calc(var(--u)*1.4);top:calc(var(--u)*1.2)}
.dm-medida{left:calc(100% + var(--u)*2.4);top:calc(var(--u)*1.2);opacity:0;transition:opacity .35s}
.dm-esc[data-vista="movil"] .dm-medida{opacity:1;transition-delay:.95s}
.dm-fm-t .dm-ic,.dm-medida .dm-ic{width:1.5em;height:1.5em}

/* paso 5 · lista para vender: el cursor pulsa «Reservar cita», sube la hoja, se elige la hora y se confirma */
.dm-reserva .dm-cur{animation:dm-cur 4.6s cubic-bezier(.45,0,.25,1) .2s both}
.dm-reserva .dm-cursor{animation:dm-pres 4.6s .2s both}
.dm-reserva .dm-toque{animation:dm-onda 4.6s .2s both}
.dm-reserva .dm-fijo-b{animation:dm-boton1 4.6s .2s both}
.dm-reserva .dm-velo{opacity:1;transition:opacity .4s 1.6s}
.dm-reserva .dm-hoja{translate:0 0;transition:translate .7s cubic-bezier(.2,1,.3,1) 1.62s}
.dm-reserva .dm-d-sel{background-color:var(--marca);color:#fff;box-shadow:none;transition-delay:2.15s;animation:dm-pop .5s cubic-bezier(.2,1.6,.4,1) 2.15s both}
.dm-reserva .dm-hr-sel{background-color:var(--marca);color:#fff;box-shadow:none;transition-delay:2.48s;animation:dm-pop2 .45s cubic-bezier(.2,1.6,.4,1) 2.48s both}
.dm-reserva .dm-conf{background-color:#138a5b;transition-delay:3.38s;animation:dm-boton3 4.6s .2s both}
.dm-reserva .dm-conf-a{opacity:0;translate:0 -90%;transition-delay:3.38s}
.dm-reserva .dm-conf-b{opacity:1;translate:0 0;transition:opacity .3s 3.45s,translate .5s cubic-bezier(.2,1,.3,1) 3.45s}
.dm-reserva .dm-conf-p{stroke-dashoffset:0;transition:stroke-dashoffset .45s 3.65s}
.dm-esc[data-vista="movil"] .dm-vel{left:auto;right:calc(100% + var(--u)*2.2);bottom:16%}
.dm-reserva .dm-vel{opacity:1;translate:0 0;transition-delay:4.05s}
@keyframes dm-cur{0%{opacity:0;translate:var(--cx0) var(--cy0)}7%{opacity:1;translate:var(--cx0) var(--cy0)}28%,34%{opacity:1;translate:var(--cx1) var(--cy1)}46%,53%{translate:var(--cx2) var(--cy2)}65%,73%{translate:var(--cx3) var(--cy3)}88%,100%{opacity:1;translate:calc(var(--cx3) + var(--p)*3.2) calc(var(--cy3) + var(--p)*1.3)}}
@keyframes dm-pres{0%,29%,33%,48%,52%,67%,71%,100%{scale:1}30.5%,49.5%,68.5%{scale:.8}}
@keyframes dm-onda{0%,30%,49%,68%{opacity:0;scale:.3}30.8%,49.8%,68.8%{opacity:1;scale:.35}38%,57%,76%,100%{opacity:0;scale:1.5}}
@keyframes dm-boton1{0%,29.5%,34%,100%{scale:1}31%{scale:.93}}
@keyframes dm-boton3{0%,68%,72.5%,100%{scale:1}69.5%{scale:.94}}
@keyframes dm-pop{40%{scale:1.2}}
@keyframes dm-pop2{40%{scale:1.07}}

/* ---------- la demo en el móvil: la ventana en vertical, con la foto arriba ---------- */
@media (max-width:980px){
  .dm-marco{--vw:100cqw;--vh:100cqh;--d:calc(var(--vw)/36);--px:calc(var(--d)*1.5)}
  .dm-esc[data-vista="movil"] .dm-marco{width:min(100cqw,calc(var(--vh)*.49))}
  .dm-nav,.dm-mas,.dm-menu,.dm-cta2,.dm-cita,.dm-pie-c,.dm-pie-r,.dm-tfl,.dm-ts{display:none}
  .dm-barra{gap:calc(var(--d)*.9)}
  .dm-pag{gap:calc(var(--d)*1.1);padding-top:calc(var(--d)*1.5)}
  .dm-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:calc(var(--d)*1.3)}
  .dm-foto{order:-1}
  .dm-h1{font-size:calc(var(--d)*2.5)}
  .dm-tiles{gap:calc(var(--d)*.8)}
  .dm-tile{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;justify-items:start;align-content:center;gap:calc(var(--d)*.6);height:auto;padding:calc(var(--d)*.8)}
  .dm-tf{width:calc(var(--d)*3.8);height:calc(var(--d)*3.8)}
  .dm-esc[data-vista="movil"] .dm-tile{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto;justify-items:stretch;align-items:center;padding:0 calc(var(--p)*.9) 0 calc(var(--p)*.5)}
  .dm-esc[data-vista="movil"] .dm-tf{width:calc(var(--p)*3);height:calc(var(--p)*3)}
  .dm-esc[data-vista="movil"] .dm-vel{left:-6px;right:auto;top:30%;bottom:auto}
  .dm-fantasma,.dm-medida{display:none}
}
/* si el hueco es muy bajo, la franja de reseñas y el «Abierto» dejan sitio a la foto */
@container (max-height:450px){.dm-esc[data-vista="pc"] :is(.dm-res,.dm-abierto){display:none}}
/* ---------- movimiento reducido: el paso final entero, sin cursor ---------- */
@media (prefers-reduced-motion:reduce){
  .dm-esc,.dm-marco,.dm-ven,.dm-ven *,.dm-vel{transition:none!important}
  .dm-reserva :is(.dm-fijo-b,.dm-d-sel,.dm-hr-sel,.dm-conf){animation:none}
  .dm-cur{display:none}
}

/* ================================================================================================
   «LA OBRA»: por qué importa, qué incluye, cómo trabajamos, preguntas y cierre, en idioma de navegador
   ================================================================================================ */
/* el color de marca de la web de ejemplo: registrado para que pueda cambiar de tono con suavidad */
@property --wb-m{syntax:'<color>';inherits:true;initial-value:#4b23b8}
/* ---------- piezas comunes ---------- */
.wb-luces{display:inline-flex;flex:none;gap:calc(var(--u)*.55)}
.wb-luz{display:block;width:max(8px,calc(var(--u)*.85));height:max(8px,calc(var(--u)*.85));border-radius:50%;background:var(--k)}
.wb-luz:nth-child(2){background:var(--sun)}
.wb-luz:nth-child(3){background:#0b6b4c}
.wb-x{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.wb-dir-i{flex:none;width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.wb-h2{font-weight:900;font-stretch:125%;line-height:.86;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
/* los objetos 3D de los negocios; mientras no estén, su dibujo de línea */
.wb-obj{display:grid;place-items:center;width:100%;height:100%;min-height:0}
.wb-obj-i{display:block;width:92%;height:92%;object-fit:contain}
.wb-obj-s{width:44%;height:auto;max-height:72%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
/* la lista que se enciende al bajar: el punto de ahora se abre y enseña su texto */
.wb-lst{list-style:none;padding:0;display:grid;gap:calc(var(--u)*.55)}
.wb-li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:calc(var(--u)*1.2);opacity:.45;transition:opacity .45s}
.wb-li.hecho{opacity:.72}
.wb-li.ahora{opacity:1}
.wb-li-n{display:grid;place-items:center;width:max(25px,calc(var(--u)*2.7));height:max(25px,calc(var(--u)*2.7));border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font:500 max(10px,calc(var(--u)*1)) 'DM Mono',monospace;transition:background .4s,color .4s,box-shadow .4s,scale .5s cubic-bezier(.2,1.4,.4,1)}
.wb-li.ahora .wb-li-n{background:var(--k);color:var(--kt);box-shadow:none;scale:1.08}
.wb-li-c{min-width:0;padding-top:max(3px,calc(var(--u)*.42))}
.wb-li-t{display:block;font-weight:800;font-stretch:108%;font-size:max(15px,calc(var(--u)*1.85));line-height:1.08;letter-spacing:-.012em}
.wb-li-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,1,.3,1)}
.wb-li-p{min-height:0;overflow:hidden;padding-top:0;font-weight:500;font-size:max(13px,calc(var(--u)*1.3));line-height:1.35;max-width:27em;opacity:0;transition:opacity .3s,padding .55s cubic-bezier(.2,1,.3,1)}
.wb-li.ahora .wb-li-r{grid-template-rows:1fr}
.wb-li.ahora .wb-li-p{padding-top:calc(var(--u)*.55);opacity:.82;transition-delay:.12s}

/* ---------- 2 · por qué importa: «La web que tarda» ---------- */
.wb-tarda{height:calc(var(--alto)*3);background:var(--paper);color:var(--ink)}
.wb-tarda .sv-pin{padding:calc(70px + var(--u)*.3) var(--pad) calc(var(--u)*2.2)}
.wb-vt{--r:calc(var(--u)*1.6);position:relative;isolation:isolate;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);height:100%}
.wb-va{transition:opacity .6s cubic-bezier(.7,0,.2,1)}
.wb-vt-f{position:absolute;inset:0;z-index:-1;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 calc(var(--u)*2.6) calc(var(--u)*5) calc(var(--u)*-1.4) rgba(17,17,17,.32);transition:opacity .7s cubic-bezier(.7,0,.2,1),scale .8s cubic-bezier(.7,0,.2,1)}
/* la fila de pestañas: una sola, que no acaba de cargar */
.wb-pest{display:flex;align-items:flex-end;gap:calc(var(--u)*.7);height:max(38px,calc(var(--u)*4));padding:0 calc(var(--u)*1.4);border-radius:var(--r) var(--r) 0 0;background:#e8e2d5}
.wb-pest .wb-luces{align-self:center;margin-right:calc(var(--u)*1.3)}
.wb-tab{--tr:max(8px,calc(var(--u)*.9));position:relative;display:flex;align-items:center;gap:calc(var(--u)*.8);height:calc(100% - max(6px,calc(var(--u)*.65)));padding:0 calc(var(--u)*.5) 0 calc(var(--u)*1.1);border-radius:var(--tr) var(--tr) 0 0;background:#fff;font-weight:600;font-size:max(12px,calc(var(--u)*1.2));white-space:nowrap;transform-origin:85% 60%;transition:opacity .3s,scale .45s cubic-bezier(.7,0,.2,1)}
/* las esquinas curvas de abajo, como una pestaña de verdad */
.wb-tab::before,.wb-tab::after{content:'';position:absolute;bottom:0;width:var(--tr);height:var(--tr);background:radial-gradient(circle at 0 0,transparent 70%,#fff 72%)}
.wb-tab::before{left:calc(var(--tr)*-1)}
.wb-tab::after{right:calc(var(--tr)*-1);background:radial-gradient(circle at 100% 0,transparent 70%,#fff 72%)}
.wb-spin{flex:none;width:max(12px,calc(var(--u)*1.3));height:max(12px,calc(var(--u)*1.3));border-radius:50%;border:2px solid rgba(17,17,17,.12);border-top-color:var(--k);animation:wb-gira .8s linear infinite}
@keyframes wb-gira{to{rotate:1turn}}
.wb-tab-t{padding-right:calc(var(--u)*1.4)}
.wb-crono{margin-left:auto;padding:.22em .65em;border-radius:99px;background:rgba(17,17,17,.06);font:500 max(10px,calc(var(--u)*1)) 'DM Mono',monospace;font-variant-numeric:tabular-nums;transition:background .3s,color .3s}
.wb-lento .wb-crono{background:var(--k);color:var(--kt)}
.wb-tab-x{display:grid;place-items:center;flex:none;width:max(20px,calc(var(--u)*2));height:max(20px,calc(var(--u)*2));border-radius:50%;transition:background .2s,scale .15s}
.wb-tab-x .wb-x{width:58%}
.wb-encima .wb-tab-x{background:rgba(17,17,17,.1)}
.wb-clic .wb-tab-x{background:rgba(17,17,17,.2);scale:.86}
.wb-cierra .wb-tab{opacity:0;scale:.55}
.wb-mas{display:grid;place-items:center;align-self:center;width:max(22px,calc(var(--u)*2.3));height:max(22px,calc(var(--u)*2.3));border-radius:50%;opacity:.5;transition:translate .55s cubic-bezier(.7,0,.2,1) .12s}
.wb-mas .wb-x{width:56%}
.wb-cierra .wb-mas{translate:calc(var(--tw,0px)*-1) 0}
/* la barra de direcciones y la de carga, que avanza lenta */
.wb-herr{display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:calc(var(--u)*.7) calc(var(--u)*1.4);background:#fff;border-bottom:1.5px solid #ece7dd}
.wb-ico{flex:none;width:max(15px,calc(var(--u)*1.7));height:max(15px,calc(var(--u)*1.7));fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.wb-ico-off{opacity:.22}
.wb-dir{flex:1;display:flex;align-items:center;gap:.65em;min-width:0;padding:.55em 1.05em;border-radius:99px;background:#f2efe8;font:500 max(12px,calc(var(--u)*1.2)) 'DM Mono',monospace;letter-spacing:.01em;white-space:nowrap}
.wb-dir-es{margin-left:auto;stroke-width:1.2}
.wb-carga{position:relative;z-index:1;height:3px;margin-top:-2px;overflow:hidden}
.wb-carga-b{position:absolute;inset:0;transform-origin:0 50%;scale:var(--carga,.06) 1;background:linear-gradient(90deg,#ffa8cf,var(--k));box-shadow:0 0 10px var(--k)}
.wb-cierra :is(.wb-carga,.wb-estado){opacity:0}
.wb-cierra .wb-spin{animation-play-state:paused;border-top-color:rgba(17,17,17,.12)}
/* la página: todo son bloques de «cargando» menos la frase, que sale palabra a palabra */
.wb-pag{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);gap:calc(var(--u)*1.2);padding:calc(var(--u)*1.6) calc(var(--u)*3) calc(var(--u)*3.4);min-height:0}
.wb-sitio{display:flex;align-items:center;gap:calc(var(--u)*1.8)}
.wb-esq{display:block;flex:none;height:max(9px,calc(var(--u)*1.1));border-radius:99px;background:#ebe6dc;animation:wb-late 1.5s ease-in-out infinite}
@keyframes wb-late{50%{opacity:.42}}
.wb-e-logo{width:max(22px,calc(var(--u)*2.8));height:max(22px,calc(var(--u)*2.8))}
.wb-e-marca{width:calc(var(--u)*12);margin-right:auto;animation-delay:-.2s}
.wb-e-menu{width:calc(var(--u)*5.5);animation-delay:-.4s}
.wb-e-bt{width:calc(var(--u)*9);height:max(24px,calc(var(--u)*3));background:none;box-shadow:inset 0 0 0 1.5px #e2ddd2;animation-delay:-.6s}
.wb-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);gap:calc(var(--u)*4);align-items:center;min-height:0}
.wb-txt{display:grid;justify-items:start;align-content:center;gap:calc(var(--u)*1.7);min-height:0;transform-origin:0 50%;transition:scale 1s cubic-bezier(.7,0,.2,1),translate 1s cubic-bezier(.7,0,.2,1)}
.wb-txt .ojo{opacity:.6}
.wb-frase{font-weight:800;font-stretch:112%;font-size:min(calc(var(--u)*5.3),3.7vw,8svh);line-height:1.06;letter-spacing:-.022em}
.wb-w{position:relative;display:inline-block;color:transparent;translate:0 .14em;transition:color .3s,translate .55s cubic-bezier(.2,1,.3,1)}
.wb-w::before{content:'';position:absolute;inset:.2em -.03em .13em;border-radius:.12em;background:#ebe6dc;transform-origin:0 50%;animation:wb-late 1.5s ease-in-out infinite;animation-delay:calc(var(--i)*-60ms);transition:opacity .25s,scale .4s cubic-bezier(.7,0,.2,1)}
.wb-w.wb-k::before{background:#f9dbe8}
.wb-w.on{color:var(--ink);translate:0 0}
.wb-w.wb-k.on{color:var(--k)}
.wb-w.on::before{animation:none;opacity:0;scale:.15 1}
.wb-pie{display:grid;justify-items:start;align-items:center}
.wb-bts{grid-area:1/1;display:flex;gap:calc(var(--u)*1.2)}
.wb-e-cta{width:calc(var(--u)*13);height:max(30px,calc(var(--u)*3.8));animation-delay:-.3s}
.wb-e-cta2{width:calc(var(--u)*10);height:max(30px,calc(var(--u)*3.8));background:none;box-shadow:inset 0 0 0 1.5px #e2ddd2;animation-delay:-.5s}
/* al final: la pestaña cerrada, y la cuenta */
.wb-cerrada{grid-area:1/1;display:inline-flex;align-items:center;gap:.7em;padding:.8em 1.25em;border-radius:99px;background:var(--ink);color:var(--paper);font:500 max(12px,calc(var(--u)*1.2)) 'DM Mono',monospace;letter-spacing:.02em;white-space:nowrap;opacity:0;translate:0 50%;transition:opacity .4s,translate .7s cubic-bezier(.2,1,.3,1)}
.wb-cerrada .wb-x{width:1em;height:1em;stroke:var(--k);stroke-width:2.2}
/* la foto, que baja a trozos como con poca cobertura */
.wb-img{position:relative;align-self:stretch;display:grid;place-items:center;min-height:0;border-radius:calc(var(--u)*1.4);background:#efebe3;overflow:hidden}
.wb-img-ico{width:max(34px,calc(var(--u)*4.4));fill:none;stroke:#cdc6b8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:wb-late 1.5s ease-in-out infinite}
.wb-img-f{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 72% 22%,#ffd98a,#ff9ac7 45%,var(--k) 100%);clip-path:inset(0 0 calc(100% - var(--img,0)*100%) 0)}
.wb-img-f::after{content:'';position:absolute;left:0;right:0;top:calc(var(--img,0)*100% - 3px);height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.wb-estado{position:absolute;left:calc(var(--u)*1.2);bottom:calc(var(--u)*.9);padding:.45em .9em;border-radius:7px;background:#f2efe8;box-shadow:0 0 0 1px #e6e1d6;font:500 max(10px,calc(var(--u)*.95)) 'DM Mono',monospace;color:rgba(17,17,17,.62);white-space:nowrap}
/* el cursor del cliente, que se cansa de esperar */
.wb-cur{position:absolute;left:0;top:0;z-index:5;width:max(20px,calc(var(--u)*2.3));fill:var(--ink);stroke:#fff;stroke-width:1.3;stroke-linejoin:round;translate:var(--cx,0px) var(--cy,0px);opacity:var(--co,0);transform-origin:10% 7%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3));pointer-events:none;transition:opacity .3s}
.wb-clic .wb-cur{animation:wb-pulsa .32s cubic-bezier(.3,0,.3,1)}
@keyframes wb-pulsa{45%{scale:.8}}
/* y se va: la ventana desaparece y la frase se queda */
.wb-fuera .wb-va{opacity:0}
.wb-fuera .wb-vt-f{scale:.975}
.wb-fuera .wb-cerrada{opacity:1;translate:0 0;transition-delay:.55s}
.wb-fuera .wb-txt{scale:var(--fs,1);translate:var(--fx,0px) var(--fy,0px);transition-delay:.15s}
.wb-tarda:not(.wb-vivo) :is(.wb-esq,.wb-spin,.wb-img-ico),.wb-tarda:not(.wb-vivo) .wb-w::before{animation-play-state:paused}

/* ---------- 4 · qué incluye: la web de ejemplo, pieza a pieza, sobre el plano ---------- */
.wb-anat{--hv:calc(var(--alto) - 70px - var(--u)*4);--bw:min(calc((100vw - var(--pad)*2)*.56),calc(var(--hv)*1.9));--bh:min(calc(var(--hv)/1.08),calc(var(--bw)/1.4));height:calc(var(--alto)*3.6);background:var(--c);color:var(--on)}
/* el plano: cuadrícula fina, una más marcada y un brillo suave del color de la casa */
.wb-anat .sv-pin{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(var(--u)*4.5);padding:calc(70px + var(--u)*1.4) var(--pad) calc(var(--u)*2.6);
  background:radial-gradient(ellipse 55% 65% at 28% 50%,rgba(255,79,216,.2),transparent 70%),radial-gradient(ellipse 40% 50% at 94% 92%,rgba(53,242,255,.13),transparent 70%),
    linear-gradient(rgba(243,238,228,.12) 1px,transparent 1px) 0 0/calc(var(--u)*12) calc(var(--u)*12),linear-gradient(90deg,rgba(243,238,228,.12) 1px,transparent 1px) 0 0/calc(var(--u)*12) calc(var(--u)*12),
    linear-gradient(rgba(243,238,228,.05) 1px,transparent 1px) 0 0/calc(var(--u)*2.4) calc(var(--u)*2.4),linear-gradient(90deg,rgba(243,238,228,.05) 1px,transparent 1px) 0 0/calc(var(--u)*2.4) calc(var(--u)*2.4)}
.wb-an-izq{position:relative;padding:0 calc(var(--bw)*.085) calc(var(--bh)*.07) 0}
.wb-an-obra{position:relative;width:var(--bw);height:var(--bh)}
.wb-an-ven{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:calc(var(--u)*1.3);background:#fff;color:var(--ink);box-shadow:0 0 0 1.5px var(--ink),0 calc(var(--u)*3) calc(var(--u)*6) calc(var(--u)*-1.5) rgba(20,0,60,.65);overflow:hidden}
.wb-an-barra{display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:calc(var(--u)*.7) calc(var(--u)*1.2);background:#efeae0;border-bottom:1.5px solid rgba(17,17,17,.1)}
.wb-an-dir{position:relative;flex:1;display:flex;align-items:center;gap:.6em;max-width:calc(var(--u)*46);margin-inline:auto;padding:.4em .45em .4em 1em;border-radius:99px;background:#fff;font:500 max(10px,calc(var(--u)*1.05)) 'DM Mono',monospace;color:rgba(17,17,17,.75);white-space:nowrap}
.wb-an-rayo{margin-left:auto;padding:.2em .65em;border-radius:99px;background:var(--k);color:var(--kt);opacity:0;scale:.6;transition:opacity .3s,scale .5s cubic-bezier(.2,1.4,.4,1)}
.wb-an-carga{position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--k);transform-origin:0 50%;scale:0 1;opacity:0}
.wb-an-sitio{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:calc(var(--u)*1.3);padding:calc(var(--u)*1.2) calc(var(--u)*2) calc(var(--u)*1.6);min-height:0}
.wb-an-cab{display:flex;align-items:center;gap:calc(var(--u)*1.2)}
.wb-an-logo{display:inline-flex;align-items:center;gap:.5em;font-size:max(11px,calc(var(--u)*1.35))}
.wb-an-luna{display:block;flex:none;width:1.45em;height:1.45em;border-radius:50%;background:radial-gradient(circle at 70% 34%,#fff 0 37%,transparent 39%),var(--wb-m)}
.wb-an-marca{font-weight:900;font-stretch:115%;letter-spacing:-.01em;white-space:nowrap}
.wb-an-paleta{display:inline-flex;align-items:center;gap:3px;padding:3px 7px 3px 4px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.12),0 4px 10px rgba(17,17,17,.12);opacity:0;scale:.5;transform-origin:0 50%;transition:opacity .3s,scale .5s cubic-bezier(.2,1.4,.4,1)}
.wb-an-sw{display:block;width:max(9px,calc(var(--u)*1.05));height:max(9px,calc(var(--u)*1.05));border-radius:50%;background:#4b23b8}
.wb-an-sw:nth-child(2){background:#0b6b4c}
.wb-an-sw:nth-child(3){background:#c8102e}
.wb-an-aa{font-style:normal;font-weight:800;font-size:max(9px,calc(var(--u)*.95));margin-left:2px}
.wb-an-menu{display:flex;gap:calc(var(--u)*1.5);margin-left:auto;font-weight:600;font-size:max(9px,calc(var(--u)*.95));opacity:.72;white-space:nowrap}
.wb-an-res{padding:.5em 1.1em;border-radius:99px;background:var(--wb-m);color:#fff;font-weight:700;font-size:max(9px,calc(var(--u)*.95));white-space:nowrap}
.wb-an-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--u)*2);min-height:0}
.wb-an-htxt{display:grid;align-content:center;justify-items:start;gap:calc(var(--u)*.85);min-width:0}
.wb-an-abierto{display:inline-flex;align-items:center;gap:.55em;padding:.32em .8em;border-radius:99px;background:#f3f0ea;font:500 max(8px,calc(var(--u)*.85)) 'DM Mono',monospace;white-space:nowrap}
.wb-an-punto{display:block;width:.6em;height:.6em;border-radius:50%;background:#1aa36f;box-shadow:0 0 0 3px rgba(26,163,111,.2)}
.wb-an-h1{font-weight:900;font-stretch:118%;font-size:max(15px,min(calc(var(--u)*3.4),calc(var(--bw)*.05)));line-height:.95;letter-spacing:-.025em;text-wrap:balance}
.wb-an-h2{font-weight:500;font-size:max(9px,calc(var(--u)*1.05));opacity:.65}
.wb-an-bts{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6);margin-top:max(12px,calc(var(--u)*1.3))}
.wb-an-cta{position:relative;padding:.7em 1.3em;border-radius:99px;background:var(--wb-m);color:#fff;font-weight:700;font-size:max(9px,calc(var(--u)*1));white-space:nowrap}
.wb-an-cta::after{content:'';position:absolute;inset:-3px;border-radius:99px;border:2px solid var(--wb-m);opacity:0}
.wb-an-cta2{padding:.7em 1.2em;border-radius:99px;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.25);font-weight:700;font-size:max(9px,calc(var(--u)*1));white-space:nowrap}
.wb-an-op{display:flex;align-items:center;gap:.5em;font-weight:600;font-size:max(8px,calc(var(--u)*.85));white-space:nowrap}
.wb-an-avs{display:flex}
.wb-an-av{display:grid;place-items:center;width:2.2em;height:2.2em;margin-left:-.55em;border-radius:50%;border:2px solid #fff;background:#e8468f;color:#fff;font-style:normal;font-weight:800;font-size:.8em}
.wb-an-av:first-child{margin-left:0}
.wb-an-av:nth-child(2){background:#0b6b4c}
.wb-an-av:nth-child(3){background:var(--sun);color:var(--ink)}
.wb-an-est{color:#f0a400;letter-spacing:.04em}
.wb-an-foto{position:relative;display:grid;place-items:center;min-height:0;border-radius:calc(var(--u)*1.1);background:radial-gradient(circle at 70% 25%,color-mix(in srgb,var(--wb-m) 40%,#fff),var(--wb-m) 72%);overflow:hidden}
.wb-an-foto .wb-obj{transition:scale .6s cubic-bezier(.2,1.4,.4,1)}
.wb-an-chis{position:absolute;width:max(9px,calc(var(--u)*1.2));height:max(9px,calc(var(--u)*1.2));background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;scale:0}
.wb-an-chis:nth-of-type(1){left:16%;top:20%}
.wb-an-chis:nth-of-type(2){right:14%;top:14%;animation-delay:.5s}
.wb-an-chis:nth-of-type(3){right:24%;bottom:16%;animation-delay:1s}
.wb-an-serv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*.9)}
.wb-an-s{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:calc(var(--u)*.8);align-items:center;padding:calc(var(--u)*.75) calc(var(--u)*.9);border-radius:calc(var(--u)*.9);background:color-mix(in srgb,var(--wb-m) 8%,#fff)}
.wb-an-si{grid-row:span 2;display:grid;place-items:center;width:max(22px,calc(var(--u)*2.7));height:max(22px,calc(var(--u)*2.7));border-radius:30%;background:color-mix(in srgb,var(--wb-m) 16%,#fff);color:var(--wb-m)}
.wb-an-sic{width:58%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wb-an-st{font-weight:800;font-size:max(9px,calc(var(--u)*1.05));align-self:end}
.wb-an-ss{font-size:max(8px,calc(var(--u)*.82));opacity:.6;align-self:start;white-space:nowrap}
/* «así te ve el buscador»: sale como una hoja por encima de la web, con la web atenuada detrás */
.wb-an-velo{position:absolute;inset:0;background:rgba(17,17,17,.3);opacity:0;transition:opacity .4s}
.wb-an-gg{position:absolute;left:calc(var(--u)*2);bottom:calc(var(--u)*1.4);width:min(66%,calc(var(--u)*46));display:grid;justify-items:start;gap:calc(var(--u)*.42);padding:calc(var(--u)*1.1) calc(var(--u)*1.4) calc(var(--u)*1.2);border-radius:calc(var(--u)*1.1);background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 calc(var(--u)*1.6) calc(var(--u)*3) rgba(17,17,17,.35);font-size:max(8px,calc(var(--u)*.9));opacity:0;translate:0 40%;transition:opacity .35s,translate .6s cubic-bezier(.2,1,.3,1)}
.wb-an-gq{display:flex;align-items:center;gap:.55em;width:100%;padding:.4em .9em;border-radius:99px;background:#f3f0ea;font-weight:600}
.wb-an-gqi{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.6}
.wb-an-gqe{margin-left:auto;font:normal 500 .9em 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;opacity:.5;white-space:nowrap}
.wb-an-gr{display:flex;align-items:center;gap:.6em;margin-top:.25em}
.wb-an-gf{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:#f3f0ea;font-size:.95em}
.wb-an-gu{display:grid;line-height:1.2}
.wb-an-gn{font-weight:700}
.wb-an-gl{font-family:'DM Mono',monospace;font-size:.92em;opacity:.6}
.wb-an-gt{font-weight:800;font-size:1.5em;line-height:1.1;color:var(--wb-m);letter-spacing:-.01em}
.wb-an-gd{display:flex;gap:.5em;opacity:.8}
.wb-an-gs{display:flex;flex-wrap:wrap;gap:.45em}
.wb-an-gsl{padding:.35em .85em;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(17,17,17,.2);font-weight:700}
/* el móvil, montado en la esquina: a las once de la noche */
.wb-an-tel{position:absolute;right:calc(var(--bw)*-.085);bottom:calc(var(--bh)*-.07);width:calc(var(--bh)*.37);aspect-ratio:9/19}
.wb-an-tp{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;border:max(4px,calc(var(--u)*.55)) solid var(--ink);border-radius:calc(var(--u)*2.3);background:#fff;color:var(--ink);box-shadow:0 calc(var(--u)*2) calc(var(--u)*4) rgba(20,0,60,.55);overflow:hidden;transition:translate .7s cubic-bezier(.2,1,.3,1),rotate .7s cubic-bezier(.2,1,.3,1)}
.wb-an-isla{position:absolute;left:50%;top:max(3px,calc(var(--u)*.4));z-index:2;width:30%;height:max(6px,calc(var(--u)*.75));translate:-50% 0;border-radius:99px;background:var(--ink)}
.wb-an-stb{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*.45) calc(var(--u)*1) calc(var(--u)*.25);font-size:max(7px,calc(var(--u)*.7))}
.wb-an-hora{font-weight:800}
.wb-an-ics{display:flex;align-items:center;gap:3px}
.wb-an-ic{display:block;height:max(5px,calc(var(--u)*.5));border-radius:2px;background:var(--ink)}
.wb-an-ic1{width:max(7px,calc(var(--u)*.8));clip-path:polygon(0 100%,100% 0,100% 100%)}
.wb-an-ic2{width:max(11px,calc(var(--u)*1.2));background:linear-gradient(90deg,var(--ink) 68%,transparent 0);box-shadow:inset 0 0 0 1px var(--ink)}
.wb-an-tv{position:relative;overflow:hidden;min-height:0}
.wb-an-tc{display:grid;gap:calc(var(--u)*.55);padding:calc(var(--u)*.3) calc(var(--u)*.8) calc(var(--u)*5);font-size:max(7px,calc(var(--u)*.72))}
.wb-an-tcab{display:flex;align-items:center;gap:.4em}
.wb-an-tlogo{font-weight:900;font-stretch:115%;margin-right:auto}
.wb-an-ham{display:block;width:1.3em;height:.8em;background:linear-gradient(var(--ink) 0 18%,transparent 0 41%,var(--ink) 0 59%,transparent 0 82%,var(--ink) 0)}
.wb-an-tfoto{display:grid;place-items:center;aspect-ratio:1.25;border-radius:calc(var(--u)*.7);background:radial-gradient(circle at 70% 25%,color-mix(in srgb,var(--wb-m) 40%,#fff),var(--wb-m) 72%);overflow:hidden}
.wb-an-tfoto2{aspect-ratio:1.6;background:radial-gradient(circle at 30% 30%,#ffe9a8,var(--sun) 70%)}
.wb-an-th1{font-weight:900;font-stretch:115%;font-size:1.45em;line-height:1;letter-spacing:-.02em}
.wb-an-th2{opacity:.65}
.wb-an-tsv{display:flex;flex-wrap:wrap;gap:.35em}
.wb-an-tch{padding:.3em .7em;border-radius:99px;background:color-mix(in srgb,var(--wb-m) 10%,#fff);font-style:normal;font-weight:700}
.wb-an-top{display:flex;gap:.4em;font-weight:600}
.wb-an-tbt{position:absolute;left:8%;right:8%;bottom:calc(var(--u)*.8);padding:.7em 0;border-radius:99px;background:var(--wb-m);color:#fff;text-align:center;font-weight:800;font-size:max(7px,calc(var(--u)*.75));box-shadow:0 4px 10px rgba(17,17,17,.25)}
.wb-an-ej{position:absolute;right:calc(var(--u)*-1.3);top:calc(var(--u)*-1.2);z-index:4;rotate:7deg;font-size:11px;background:var(--k);color:var(--kt)}
/* las chinchetas, la selección (cuatro esquinas, como en un programa de diseño) y la línea hasta la lista */
.wb-chin{--t:max(24px,calc(var(--u)*2.6));position:absolute;left:0;top:0;z-index:3;display:grid;place-items:center;width:var(--t);height:var(--t);margin:calc(var(--t)/-2) 0 0 calc(var(--t)/-2);border-radius:50%;background:var(--k);color:var(--kt);box-shadow:0 0 0 2.5px var(--c),0 5px 12px rgba(10,0,40,.45);font:500 max(10px,calc(var(--u)*1.05)) 'DM Mono',monospace;translate:var(--x,0px) var(--y,0px);scale:0;transition:scale .35s cubic-bezier(.7,0,.2,1)}
.wb-chin.on{scale:1;transition:scale .55s cubic-bezier(.2,1.5,.4,1) .3s}
.wb-chin::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--k);opacity:0}
.wb-chin.on::after{animation:wb-onda 1.8s ease-out .8s infinite}
@keyframes wb-onda{from{opacity:.9;scale:.6}to{opacity:0;scale:1.5}}
.wb-an-sel{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.wb-anat[data-on] .wb-an-sel{opacity:1}
.wb-an-esq{position:absolute;left:0;top:0;width:12px;height:12px;border:0 solid var(--k);translate:var(--x,0px) var(--y,0px);transition:translate .6s cubic-bezier(.7,0,.2,1)}
.wb-an-esq:nth-child(1){border-width:2px 0 0 2px}
.wb-an-esq:nth-child(2){margin-left:-12px;border-width:2px 2px 0 0}
.wb-an-esq:nth-child(3){margin-top:-12px;border-width:0 0 2px 2px}
.wb-an-esq:nth-child(4){margin:-12px 0 0 -12px;border-width:0 2px 2px 0}
.wb-hilo{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wb-hilo-f,.wb-hilo-l{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.wb-hilo-f{stroke:var(--c);stroke-width:5}
.wb-hilo-l{stroke:var(--cream);stroke-width:1.6}
.wb-hilo-p{fill:var(--cream);opacity:0;transition:opacity .3s}
.wb-hilo.on :is(.wb-hilo-f,.wb-hilo-l){stroke-dashoffset:0;transition:stroke-dashoffset .75s cubic-bezier(.7,0,.2,1)}
.wb-hilo.on .wb-hilo-p{opacity:1}
/* la lista, a la derecha */
.wb-an-der{display:grid;align-content:center;gap:calc(var(--u)*1.5);min-width:0;max-width:calc(var(--u)*48)}
.wb-an-der .ojo{opacity:.7}
.wb-an-h2t{font-size:min(calc(var(--u)*4.6),2.9vw)}
.wb-anat .wb-li.hecho .wb-li-n{background:var(--cream);color:var(--c);box-shadow:none}
/* lo que hace cada pieza cuando se enciende */
.wb-anat[data-on="1"] .wb-an-paleta{opacity:1;scale:1}
.wb-anat[data-on="1"] .wb-an-obra{animation:wb-an-marca 4.2s ease-in-out .5s infinite}
.wb-anat[data-on="1"] .wb-an-sw{animation:wb-an-sw 4.2s ease-in-out .5s infinite}
.wb-anat[data-on="1"] .wb-an-sw:nth-child(2){animation-delay:1.9s}
.wb-anat[data-on="1"] .wb-an-sw:nth-child(3){animation-delay:3.3s}
@keyframes wb-an-marca{0%,24%,100%{--wb-m:#4b23b8}33%,57%{--wb-m:#0b6b4c}66%,90%{--wb-m:#c8102e}}
@keyframes wb-an-sw{0%,30%,100%{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}34%,96%{box-shadow:none}}
.wb-anat[data-on="2"] .wb-an-tp{translate:0 -5%;rotate:-3deg}
.wb-anat[data-on="2"] .wb-an-tc{animation:wb-an-desliza 5s ease-in-out .6s infinite alternate}
@keyframes wb-an-desliza{0%,12%{translate:0 0}88%,100%{translate:0 -38%}}
.wb-anat[data-on="3"] .wb-an-rayo{opacity:1;scale:1;transition-delay:.95s}
.wb-anat[data-on="3"] .wb-an-carga{animation:wb-an-carga .8s cubic-bezier(.4,0,.2,1) .15s both}
@keyframes wb-an-carga{0%{scale:0 1;opacity:1}88%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}
.wb-anat[data-on="4"] .wb-an-cta{animation:wb-an-boton 1.4s ease-in-out .4s infinite}
.wb-anat[data-on="4"] .wb-an-cta::after{animation:wb-an-aro 1.4s ease-out .4s infinite}
@keyframes wb-an-boton{0%,100%{scale:1}20%{scale:1.07}40%{scale:1}}
@keyframes wb-an-aro{0%{opacity:.85;scale:1}70%,100%{opacity:0;scale:1.25 1.6}}
.wb-anat[data-on="5"] .wb-an-velo{opacity:1}
.wb-anat[data-on="5"] .wb-an-gg{opacity:1;translate:0 0;transition-delay:.1s}
.wb-anat[data-on="6"] .wb-an-foto .wb-obj{animation:wb-an-flota 2.6s ease-in-out infinite}
.wb-anat[data-on="6"] .wb-an-chis{animation:wb-an-chis 1.8s ease-in-out infinite}
.wb-anat[data-on="6"] .wb-an-s{animation:wb-an-ola 2.6s cubic-bezier(.2,1,.3,1) infinite;animation-delay:calc(var(--i)*.14s)}
.wb-anat[data-on="6"] .wb-an-h1{animation:wb-an-ola 2.6s cubic-bezier(.2,1,.3,1) .5s infinite}
@keyframes wb-an-flota{0%,100%{translate:0 3%;rotate:-3deg}50%{translate:0 -5%;rotate:3deg}}
@keyframes wb-an-chis{0%,100%{opacity:0;scale:0;rotate:0deg}45%{opacity:1;scale:1;rotate:45deg}}
@keyframes wb-an-ola{0%,55%,100%{translate:0 0}18%{translate:0 -12%}}
.wb-anat:not(.wb-vivo) :is(.wb-an-obra,.wb-an-sw,.wb-an-tc,.wb-an-cta,.wb-an-foto .wb-obj,.wb-an-chis,.wb-an-s,.wb-an-h1),.wb-anat:not(.wb-vivo) :is(.wb-chin,.wb-an-cta)::after{animation-play-state:paused}

/* ---------- 5 · cómo trabajamos: «De boceto a estreno», una sola ventana que cambia ---------- */
.wb-obra{height:calc(var(--alto)*4.4);background:var(--ink);color:var(--cream)}
.wb-obra .sv-pin{--ow:calc((100vw - var(--pad)*2 - var(--u)*5)/1.66);display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:calc(var(--u)*5);padding:calc(70px + var(--u)*1.2) var(--pad) calc(var(--u)*2.6);background:radial-gradient(ellipse 48% 70% at 72% 52%,rgba(75,35,184,.5),transparent 72%)}
.wb-ob-izq{display:grid;align-content:center;gap:calc(var(--u)*1.5);min-width:0}
.wb-ob-izq .ojo{opacity:.6}
.wb-ob-h2t{font-size:min(calc(var(--u)*5.4),3.4vw)}
.wb-ob-sub{font-weight:600;font-size:max(14px,calc(var(--u)*1.5));line-height:1.3;max-width:21em;opacity:.7}
.wb-lst-ob{margin-top:calc(var(--u)*.6)}
.wb-lst-ob .wb-li-n{width:auto;height:max(25px,calc(var(--u)*2.7));padding:0 .85em;border-radius:99px}
.wb-obra .wb-li.hecho .wb-li-n{background:var(--cream);color:var(--ink);box-shadow:none}
.wb-ob-der{display:grid;place-items:center;align-self:stretch;min-width:0;min-height:0}
.wb-ob-ven{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:min(calc(var(--alto) - 70px - var(--u)*3.8),calc(var(--ow)*.7));border-radius:calc(var(--u)*1.4);background:#fff;color:var(--ink);box-shadow:0 0 0 1.5px rgba(243,238,228,.22),0 calc(var(--u)*3) calc(var(--u)*7) rgba(0,0,0,.6);overflow:hidden}
.wb-ob-barra{display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:calc(var(--u)*.75) calc(var(--u)*1.3);background:#efeae0;border-bottom:1.5px solid rgba(17,17,17,.1)}
.wb-ob-dir{position:relative;flex:1;max-width:calc(var(--u)*38);height:max(26px,calc(var(--u)*2.7));margin-inline:auto;border-radius:99px;background:#fff;overflow:hidden;font:500 max(11px,calc(var(--u)*1.1)) 'DM Mono',monospace}
.wb-ob-d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.55em;white-space:nowrap;transition:translate .6s cubic-bezier(.7,0,.2,1),opacity .4s}
.wb-ob-d1{color:rgba(17,17,17,.5)}
.wb-ob-d2{translate:0 100%;opacity:0}
.wb-ob-chip{position:relative;display:inline-flex;align-items:center;gap:.5em;height:max(22px,calc(var(--u)*2.3));padding:0 .9em;border-radius:99px;background:#fff;font:500 max(9px,calc(var(--u)*.9)) 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.wb-ob-chp{display:block;width:.65em;height:.65em;border-radius:50%;background:#b5ae9f;transition:background .4s,box-shadow .4s}
.wb-ob-cht{transition:opacity .35s}
.wb-ob-ch2{position:absolute;left:2.05em;opacity:0}
/* la página: el sitio (en color desde el paso 3), el boceto, las notas, la lista de pruebas, tus notas y el sello */
/* la página de la ventana es el contenedor: lo que se pone encima (notas, llamada, lista, comentarios y sello) se mide con ella
   (--ou ≈ --u en la pantalla de Martí), así no se sale en las pantallas más altas que anchas */
.wb-ob-pag{--ou:1.03cqi;position:relative;container-type:inline-size;min-height:0;background:#fbf9f4;overflow:hidden;transition:background .6s}
.wb-ob-pag::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(17,17,17,.1) 1px,transparent 1.5px);background-size:16px 16px;transition:opacity .6s}
.wb-ob-sitio{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:calc(var(--u)*1.5);padding:calc(var(--u)*1.5) calc(var(--u)*2.4) calc(var(--u)*2)}
.wb-ob-b{opacity:0;transition:opacity .45s;transition-delay:0s}
.wb-ob-cab{display:flex;align-items:center;gap:calc(var(--u)*1.6)}
.wb-ob-logo{display:inline-flex;align-items:center;gap:.5em;margin-right:auto;font-size:max(11px,calc(var(--u)*1.35))}
.wb-ob-marca{display:block;width:1.5em;height:1.5em;border-radius:50%;background:radial-gradient(circle,var(--sun) 0 30%,transparent 32%),conic-gradient(var(--k) 0 25%,#4b23b8 0 50%,var(--k) 0 75%,#4b23b8 0)}
.wb-ob-lt{font-weight:900;font-stretch:115%;white-space:nowrap}
.wb-ob-menu{display:flex;gap:calc(var(--u)*1.4);font-weight:600;font-size:max(9px,calc(var(--u)*.95));white-space:nowrap}
.wb-ob-mi{opacity:.72}
.wb-ob-res{padding:.5em 1.1em;border-radius:99px;background:#4b23b8;color:#fff;font-weight:700;font-size:max(9px,calc(var(--u)*.95));white-space:nowrap}
.wb-ob-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:calc(var(--u)*2.2);min-height:0}
.wb-ob-htxt{display:grid;align-content:center;justify-items:start;gap:calc(var(--u)*1.1);min-width:0}
.wb-ob-h1{font-weight:900;font-stretch:118%;font-size:max(17px,min(calc(var(--u)*3.9),calc(var(--ow)*.056)));line-height:.95;letter-spacing:-.025em;text-wrap:balance}
.wb-ob-h2{font-weight:500;font-size:max(10px,calc(var(--u)*1.15))}
.wb-ob-cta{padding:.75em 1.4em;border-radius:99px;background:#4b23b8;color:#fff;font-weight:700;font-size:max(10px,calc(var(--u)*1.05));white-space:nowrap}
.wb-ob-foto{display:grid;place-items:center;min-height:0;border-radius:calc(var(--u)*1.2);background:radial-gradient(circle at 70% 25%,#ffa8cf,#4b23b8 75%);overflow:hidden}
.wb-ob-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1.1)}
.wb-ob-card{display:flex;align-items:center;gap:.7em;padding:calc(var(--u)*1) calc(var(--u)*1.2);border-radius:calc(var(--u)*1);background:#f1edf9;font-weight:800;font-size:max(10px,calc(var(--u)*1.05));white-space:nowrap}
.wb-ob-ci{flex:none;width:max(16px,calc(var(--u)*2));height:max(16px,calc(var(--u)*2));fill:none;stroke:#4b23b8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* paso 2 · el boceto a lápiz se dibuja (los trazos los saca webs.js de la web de verdad) */
.wb-ob-boceto{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .5s}
.wb-tz{fill:none;stroke:#3a3632;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .25s}
.wb-tz-g{stroke-width:2.6}
.wb-tz-s{stroke:#a39d91;stroke-width:1.1}
.wb-tz-c{stroke-width:1.4}
/* paso 1 · hablamos: notas adhesivas con lo que pides, y la llamada */
.wb-ob-notas{position:absolute;inset:0;pointer-events:none}
.wb-nota{position:absolute;left:var(--x);top:var(--y);display:flex;flex-direction:column;width:20%;min-height:32%;padding:calc(var(--ou)*1.7) calc(var(--ou)*1.2) calc(var(--ou)*1.1);background:var(--f);color:var(--ink);font-weight:700;font-stretch:84%;font-size:max(10.5px,calc(var(--ou)*1.45));line-height:1.15;box-shadow:0 calc(var(--ou)*.9) calc(var(--ou)*1.6) rgba(17,17,17,.2),inset 0 -2px 0 rgba(0,0,0,.05);rotate:var(--r);opacity:0;scale:.6;transition:opacity .3s,scale .45s cubic-bezier(.7,0,.2,1)}
.wb-nota::before{content:'';position:absolute;left:50%;top:calc(var(--ou)*-.7);width:44%;height:max(8px,calc(var(--ou)*1.5));translate:-50% 0;rotate:calc(var(--r)*-1.4);background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(17,17,17,.06)}
/* el garabato de cada nota, a boli: se dibuja cuando la nota se pega */
.wb-nota-d{display:block;flex:none;width:max(24px,calc(var(--ou)*5.2));height:auto;margin:auto 0 0 auto;padding-top:calc(var(--ou)*.6);overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;opacity:.85;rotate:calc(var(--r)*-1.5)}
.wb-nota-p{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 0s .35s}
.wb-nota-c{stroke:none;fill:var(--cc);transform-box:fill-box;transform-origin:center;scale:0;transition:scale 0s .35s}
.wb-ob-llam{position:absolute;left:47.5%;top:63%;display:flex;align-items:center;gap:calc(var(--ou)*1.1);padding:calc(var(--ou)*.75) calc(var(--ou)*1.1) calc(var(--ou)*.75) calc(var(--ou)*.75);border-radius:99px;background:var(--ink);color:var(--cream);font-size:max(10px,calc(var(--ou)*1.2));white-space:nowrap;box-shadow:0 calc(var(--ou)*1) calc(var(--ou)*2) rgba(17,17,17,.3);opacity:0;translate:0 30%;transition:opacity .35s,translate .6s cubic-bezier(.2,1,.3,1)}
.wb-ob-avs{display:flex}
.wb-ob-av{position:relative;display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:50%;border:2px solid var(--ink);background:var(--k);color:var(--kt);font-style:normal;font-weight:800;font-size:.85em}
.wb-ob-av::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--k);opacity:0}
.wb-ob-avd{margin-left:-.42em;background:var(--sun);color:var(--ink);font-stretch:125%}
.wb-ob-llt{display:grid;line-height:1.22;opacity:.8}
.wb-ob-llb{font-weight:800;opacity:1}
.wb-ob-reloj{display:flex;align-items:center;gap:.45em;padding:.3em .7em;border-radius:99px;background:rgba(243,238,228,.1);font:500 .82em 'DM Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wb-ob-reloj::before{content:'';width:.55em;height:.55em;border-radius:50%;background:var(--k);animation:wb-late 1.5s ease-in-out infinite}
.wb-ob-eq{display:flex;align-items:center;gap:2px;height:1.4em}
.wb-ob-eqb{display:block;width:3px;height:100%;border-radius:2px;background:var(--k);transform-origin:50% 50%;animation:wb-eq .9s ease-in-out infinite}
.wb-ob-eqb:nth-child(2){animation-delay:-.3s}
.wb-ob-eqb:nth-child(3){animation-delay:-.6s}
.wb-ob-eqb:nth-child(4){animation-delay:-.15s}
@keyframes wb-eq{0%,100%{scale:1 .3}50%{scale:1 1}}
/* paso 4 · la pruebas: la lista que se marca y tus notas pinchadas encima */
.wb-ob-check{position:absolute;left:var(--kx,60%);top:var(--ky,50%);z-index:2;display:grid;gap:calc(var(--ou)*.7);padding:calc(var(--ou)*1.3) calc(var(--ou)*1.6) calc(var(--ou)*1.4);border-radius:calc(var(--ou)*1.2);background:var(--ink);color:var(--cream);box-shadow:0 calc(var(--ou)*1.4) calc(var(--ou)*3) rgba(17,17,17,.4);opacity:0;translate:14% 0;transition:opacity .35s,translate .6s cubic-bezier(.2,1,.3,1)}
.wb-ob-ckt{font:500 max(8px,calc(var(--ou)*.9)) 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.wb-ob-ck{display:flex;align-items:center;gap:.65em;font-weight:700;font-size:max(10px,calc(var(--ou)*1.25));white-space:nowrap}
.wb-ob-cki{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(243,238,228,.4);transition:background .3s,box-shadow .3s}
.wb-ob-cks{width:72%;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s}
.wb-ob-cko{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.wb-ob-com{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:.5em;padding:.35em .85em .35em .35em;border-radius:99px 99px 99px 4px;background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 6px 14px rgba(17,17,17,.22);font-weight:700;font-size:max(10px,calc(var(--ou)*1.05));white-space:nowrap;translate:var(--x,0px) var(--y,0px);transform-origin:0 100%;opacity:0;scale:.4;transition:opacity .25s,scale .4s cubic-bezier(.7,0,.2,1)}
.wb-ob-cav{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--k);color:var(--kt);font-style:normal;font-weight:800;font-size:.82em}
/* paso 5 · la estrenamos: la barra pasa de «borrador» a la dirección, y el sello */
.wb-ob-sello{position:absolute;left:var(--sx,70%);top:var(--sy,40%);z-index:3;translate:-50% -50%;display:grid;justify-items:center;gap:.25em;padding:.55em 1.1em .6em;border-radius:12px;color:var(--k);background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 3px var(--k),inset 0 0 0 5px #fff,inset 0 0 0 6.5px var(--k);rotate:-9deg;opacity:0;scale:1.9;pointer-events:none}
.wb-ob-sb{font-weight:900;font-stretch:125%;font-size:max(22px,calc(var(--ou)*3.2));line-height:.9;letter-spacing:.01em;text-transform:uppercase}
.wb-ob-ss{font:500 max(8px,calc(var(--ou)*.95)) 'DM Mono',monospace;letter-spacing:.06em}
.wb-ob-conf{position:absolute;left:var(--sx,70%);top:var(--sy,40%);z-index:3;width:0;height:0}
.wb-cf{position:absolute;left:0;top:0;width:7px;height:11px;border-radius:2px;background:var(--f);opacity:0}
/* los estados */
.wb-obra:is([data-e="3"],[data-e="4"],[data-e="5"]) .wb-ob-pag::before{opacity:0}
.wb-obra[data-e="1"] .wb-nota{opacity:1;scale:1;transition:opacity .35s,scale .6s cubic-bezier(.2,1.4,.4,1);transition-delay:calc(var(--i)*.09s + .1s)}
.wb-obra[data-e="1"] .wb-ob-llam{opacity:1;translate:0 0;transition-delay:.6s}
.wb-obra[data-e="1"] .wb-ob-av:first-child::after{animation:wb-onda 1.6s ease-out 1s infinite}
.wb-obra[data-e="1"] .wb-nota-p{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.3,1) calc(var(--i)*.09s + .55s)}
.wb-obra[data-e="1"] .wb-nota-c{scale:1;transition:scale .5s cubic-bezier(.2,1.6,.4,1) calc(var(--i)*.09s + 1.35s + var(--j)*.12s)}
.wb-obra:is([data-e="2"],[data-e="3"],[data-e="4"],[data-e="5"]) .wb-tz{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.6,0,.3,1) calc(var(--d)*1ms)}
.wb-obra:is([data-e="3"],[data-e="4"],[data-e="5"]) .wb-ob-pag{background:#fff}
.wb-obra:is([data-e="3"],[data-e="4"],[data-e="5"]) .wb-ob-boceto{opacity:0;transition-delay:.5s}
.wb-obra:is([data-e="3"],[data-e="4"],[data-e="5"]) .wb-ob-b{opacity:1;transition:opacity .5s calc(var(--i)*.07s)}
.wb-obra[data-e="3"] .wb-ob-foto .wb-obj{animation:wb-ob-pop .8s cubic-bezier(.2,1.4,.4,1) .55s both}
@keyframes wb-ob-pop{from{scale:.4;opacity:0;rotate:-12deg}}
.wb-obra[data-e="4"] .wb-ob-check{opacity:1;translate:0 0}
.wb-obra[data-e="4"] .wb-ob-cki{background:var(--k);box-shadow:none;transition-delay:calc(.3s + var(--i)*.25s)}
.wb-obra[data-e="4"] .wb-ob-cks{stroke-dashoffset:0;transition:stroke-dashoffset .3s calc(.38s + var(--i)*.25s)}
.wb-obra[data-e="4"] .wb-ob-com{opacity:1;scale:1;transition:opacity .25s,scale .55s cubic-bezier(.2,1.5,.4,1);transition-delay:calc(.75s + var(--i)*.18s)}
.wb-obra[data-e="5"] .wb-ob-d1{translate:0 -100%;opacity:0}
.wb-obra[data-e="5"] .wb-ob-d2{translate:0 0;opacity:1;transition-delay:.12s}
.wb-obra[data-e="5"] .wb-ob-chp{background:#1aa36f;box-shadow:0 0 0 3px rgba(26,163,111,.22)}
.wb-obra[data-e="5"] .wb-ob-ch1{opacity:0}
.wb-obra[data-e="5"] .wb-ob-ch2{opacity:1}
.wb-obra[data-e="5"] .wb-ob-sello{animation:wb-sello .6s cubic-bezier(.3,1.3,.5,1) .55s both}
@keyframes wb-sello{0%{opacity:0;scale:1.9;rotate:-17deg}60%{opacity:1;scale:.93;rotate:-8deg}100%{opacity:1;scale:1;rotate:-9deg}}
.wb-obra[data-e="5"] .wb-cf{animation:wb-cf 1.1s cubic-bezier(.2,.7,.3,1) .85s both}
@keyframes wb-cf{0%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0;translate:var(--dx) var(--dy);rotate:var(--rr)}}
.wb-obra:not(.wb-vivo) .wb-ob-eqb,.wb-obra:not(.wb-vivo) .wb-ob-reloj::before,.wb-obra:not(.wb-vivo) .wb-ob-av::after{animation-play-state:paused}

/* ---------- 7 · preguntas: cada una, una ventana con su pestaña ---------- */
.wb-faq{min-height:var(--alto);background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);align-items:center;gap:calc(var(--u)*5);padding:calc(70px + var(--u)*2) var(--pad) calc(var(--u)*4)}
.wb-fq-cab{display:grid;gap:calc(var(--u)*1.8)}
.wb-fq-cab .ojo{opacity:.6}
.wb-fq-h2t{font-size:min(calc(var(--u)*6.2),3.6vw);line-height:.84}
.wb-fq-sub{font-weight:600;font-size:max(15px,calc(var(--u)*1.6));line-height:1.3;max-width:17em;opacity:.75}
.wb-fq-l{display:grid;gap:calc(var(--u)*1.1)}
.wb-fq{--tr:max(9px,calc(var(--u)*1));border-radius:calc(var(--u)*1.5);background:#e3dccd;box-shadow:0 0 0 1.5px var(--ink);overflow:hidden;transition:box-shadow .35s,translate .35s cubic-bezier(.2,1,.3,1)}
.wb-fq:not(.wb-act):hover{translate:0 -2px}
.wb-fq.wb-act{box-shadow:0 0 0 1.5px var(--ink),0 calc(var(--u)*1.4) calc(var(--u)*2.8) calc(var(--u)*-1) rgba(17,17,17,.35)}
.wb-fq-s{display:flex;align-items:flex-end;gap:calc(var(--u)*1.4);padding:calc(var(--u)*.75) calc(var(--u)*1) 0 calc(var(--u)*1.5);list-style:none;cursor:pointer}
.wb-fq-s::-webkit-details-marker{display:none}
.wb-fq-s:focus-visible{outline:2.5px solid var(--ink);outline-offset:-4px;border-radius:calc(var(--u)*1.5)}
.wb-fq-s .wb-luces{align-self:center;opacity:.9}
.wb-fq-tab{position:relative;display:flex;align-items:center;gap:.7em;margin-right:auto;min-width:0;padding:calc(var(--u)*.85) calc(var(--u)*1.6) calc(var(--u)*1);border-radius:var(--tr) var(--tr) 0 0;font-weight:800;font-size:max(15px,calc(var(--u)*1.75));line-height:1.15;transition:background .3s}
.wb-fq-tab::before,.wb-fq-tab::after{content:'';position:absolute;bottom:0;width:var(--tr);height:var(--tr);opacity:0;background:radial-gradient(circle at 0 0,transparent 70%,#fff 72%);transition:opacity .3s}
.wb-fq-tab::before{left:calc(var(--tr)*-1)}
.wb-fq-tab::after{right:calc(var(--tr)*-1);background:radial-gradient(circle at 100% 0,transparent 70%,#fff 72%)}
.wb-fq-s:hover .wb-fq-tab{background:#ece6da}
.wb-fq.wb-act .wb-fq-tab{background:#fff}
.wb-fq.wb-act .wb-fq-tab::before,.wb-fq.wb-act .wb-fq-tab::after{opacity:1}
.wb-fq-fav{flex:none;width:.8em;height:.8em;border-radius:50%;background:radial-gradient(circle,var(--sun) 0 30%,transparent 32%),var(--k);transition:scale .4s cubic-bezier(.2,1.4,.4,1)}
.wb-fq.wb-act .wb-fq-fav{scale:1.15}
.wb-fq-x{flex:none;align-self:center;position:relative;width:max(28px,calc(var(--u)*2.7));height:max(28px,calc(var(--u)*2.7));margin-bottom:calc(var(--u)*.4);border-radius:50%;background:var(--k);transition:rotate .45s cubic-bezier(.2,1.4,.4,1),background .3s}
.wb-fq-x::before,.wb-fq-x::after{content:'';position:absolute;left:29%;right:29%;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--kt)}
.wb-fq-x::after{rotate:90deg}
.wb-fq.wb-act .wb-fq-x{rotate:45deg;background:var(--ink)}
.wb-fq.wb-act .wb-fq-x::before,.wb-fq.wb-act .wb-fq-x::after{background:var(--paper)}
.wb-fq-r{display:grid;grid-template-rows:0fr;background:#fff;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.wb-fq[open] .wb-fq-r{grid-template-rows:1fr}
.wb-fq-in{position:relative;min-height:0;overflow:hidden}
.wb-fq-carga{position:absolute;left:0;top:0;width:100%;height:2px;background:var(--k);transform-origin:0 50%;scale:0 1}
.wb-fq-p{padding:calc(var(--u)*1.6) calc(var(--u)*2.2) calc(var(--u)*1.9);font-weight:500;font-size:max(15px,calc(var(--u)*1.5));line-height:1.45;max-width:36em;opacity:0;transition:opacity .2s}
.wb-fq.wb-act .wb-fq-p{opacity:1}
.wb-fq.wb-abre .wb-fq-carga{animation:wb-fq-carga .6s cubic-bezier(.4,0,.2,1) both}
.wb-fq.wb-abre .wb-fq-p{animation:wb-fq-sale .5s .3s both}
@keyframes wb-fq-carga{0%{scale:0 1;opacity:1}80%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}
@keyframes wb-fq-sale{from{opacity:0;translate:0 8px}}

/* ---------- 8 · el cierre: «La dirección de tu web» ---------- */
.wb-fin{height:var(--alto);background:var(--girasol);color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:calc(var(--u)*2.3);padding:calc(70px + var(--u)*1.5) var(--pad) calc(var(--u)*3);text-align:center}
.wb-fin::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 90% at 50% 42%,transparent 38%,rgba(232,108,0,.4) 100%)}
.wb-fin-barra{position:relative;display:flex;align-items:center;gap:calc(var(--u)*1.4);width:min(100%,calc(var(--u)*80));padding:calc(var(--u)*1.25) calc(var(--u)*1.3) calc(var(--u)*1.25) calc(var(--u)*2.2);border-radius:99px;background:#fff;box-shadow:0 0 0 2px var(--ink),0 calc(var(--u)*2.2) calc(var(--u)*3.6) calc(var(--u)*-1.6) rgba(120,50,0,.55);margin-bottom:calc(var(--u)*.6)}
.wb-fin-ico{position:relative;flex:none;width:max(20px,calc(var(--u)*2.3));height:max(20px,calc(var(--u)*2.3))}
.wb-fin-ii{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s,scale .45s cubic-bezier(.2,1.4,.4,1)}
.wb-fin-cand{opacity:0;scale:.4}
.wb-fin-url{flex:1;display:flex;align-items:center;min-width:0;text-align:left;font-weight:700;font-size:max(18px,min(calc(var(--u)*3.1),4.6vw));letter-spacing:-.01em;white-space:nowrap}
.wb-fin-ph{color:rgba(17,17,17,.32);font-weight:500}
.wb-fin-pro{color:rgba(17,17,17,.38);font-weight:500}
.wb-fin-caret{display:block;flex:none;width:2px;height:1.1em;margin-left:3px;border-radius:2px;background:var(--k);animation:wb-caret 1s steps(1) infinite}
@keyframes wb-caret{50%{opacity:0}}
.wb-fin-ir{flex:none;display:grid;overflow:hidden;padding:.55em .95em;border-radius:9px;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.22);font:500 max(11px,calc(var(--u)*1)) 'DM Mono',monospace;letter-spacing:.04em;white-space:nowrap;opacity:.55;transition:background .3s,color .3s,opacity .25s}
/* la tecla Intro y, debajo, lo que ha tardado en cargar: al final se cambian */
.wb-fin-ir1,.wb-fin-ir2{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:.35em;transition:opacity .3s,translate .5s cubic-bezier(.2,1,.3,1)}
.wb-fin-ir2{opacity:0;translate:0 70%}
.wb-fin-rayo{flex:none;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wb-fin-carga{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);bottom:-1px;height:3px;border-radius:3px;background:var(--k);transform-origin:0 50%;scale:0 1;opacity:0}
.wb-fin.wb-escribe .wb-fin-ph{display:none}
/* al pulsar Intro: la lupa se va y, justo después, entra el candado (nunca los dos a la vez) */
.wb-fin.wb-fin-ok .wb-fin-lupa{opacity:0;scale:.4;transition-duration:.18s}
.wb-fin.wb-fin-ok .wb-fin-cand{opacity:.8;scale:1;transition-delay:.2s}
.wb-fin.wb-fin-ok .wb-fin-ir{background:var(--ink);color:var(--girasol);opacity:1;box-shadow:none;animation:wb-intro .35s cubic-bezier(.3,0,.3,1)}
.wb-fin.wb-fin-ok .wb-fin-carga{animation:wb-an-carga .9s cubic-bezier(.4,0,.2,1) .2s both}
.wb-fin.wb-fin-ok .wb-fin-caret{opacity:0;animation:none}
.wb-fin.wb-fin-cargada .wb-fin-ir{background:var(--k);color:var(--kt)}
.wb-fin.wb-fin-cargada .wb-fin-ir1{opacity:0;translate:0 -70%}
.wb-fin.wb-fin-cargada .wb-fin-ir2{opacity:1;translate:0 0}
@keyframes wb-intro{45%{scale:.88}}
.wb-fin-h2{font-weight:900;font-stretch:125%;font-size:min(9.6vw,17svh);line-height:.84;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
.wb-fin-p{max-width:24em;font-weight:600;font-size:max(16px,calc(var(--u)*1.9));line-height:1.3}
.wb-fin:not(.wb-vivo) .wb-fin-caret{animation-play-state:paused}

/* ---------- móvil ---------- */
@media (max-width:980px){
  /* la web que tarda: la pestaña ocupa la fila y la foto va debajo de la frase */
  .wb-tarda .sv-pin{padding:74px 12px 14px}
  .wb-vt{--r:16px}
  .wb-pest{padding:0 10px;gap:6px}
  .wb-pest .wb-luces{display:none}
  .wb-tab{flex:1;min-width:0;padding-left:12px}
  .wb-tab-t{padding-right:6px}
  .wb-herr{gap:12px;padding:8px 12px}
  .wb-ico-mv{display:none}
  .wb-pag{padding:16px 16px 50px;gap:18px}
  .wb-e-menu{display:none}
  .wb-e-marca{width:110px}
  .wb-cuerpo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:20px;align-items:stretch}
  .wb-frase{font-size:clamp(24px,7.4vw,40px)}
  .wb-e-cta{width:120px}
  .wb-e-cta2{width:90px}
  .wb-img{min-height:110px}
  .wb-estado{left:12px;bottom:12px}
  /* qué incluye: la web arriba y la lista debajo, sin línea */
  .wb-anat{--hv:calc(var(--alto)*.46);--bw:calc((100vw - 32px)/1.09);--bh:min(calc(var(--hv)/1.08),calc(var(--bw)/1.02))}
  .wb-anat .sv-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:start;gap:16px;padding:76px 16px 18px}
  .wb-an-izq{justify-self:start}
  .wb-an-der{max-width:none;gap:10px;align-content:start}
  .wb-an-h2t{font-size:clamp(28px,8vw,40px)}
  .wb-hilo{display:none}
  .wb-an-menu,.wb-an-cta2,.wb-an-op,.wb-an-ss,.wb-an-abierto,.wb-an-gqe,.wb-an-gs{display:none}
  .wb-an-sitio{gap:8px;padding:9px 11px 11px}
  .wb-an-hero{gap:9px}
  .wb-an-h1{font-size:clamp(13px,3.9vw,18px)}
  .wb-an-s{grid-template-columns:minmax(0,1fr);justify-items:start;row-gap:3px;padding:6px}
  .wb-an-si{grid-row:auto}
  /* el móvil, algo más pequeño, y los recuadros solo hasta donde empieza: que no quede ninguno escondido detrás */
  .wb-an-tel{width:calc(var(--bh)*.31)}
  .wb-an-serv{grid-template-columns:repeat(2,minmax(0,1fr));margin-right:calc(var(--bh)*.31 - var(--bw)*.085 - 3px)}
  .wb-an-s:nth-child(3){display:none}
  .wb-an-gg{left:9px;bottom:9px;width:62%}
  /* la etiqueta, abajo a la izquierda: arriba a la derecha se come la barra de direcciones y la chincheta de «Rápida» */
  .wb-an-ej{font-size:9px;top:auto;right:auto;left:10px;bottom:-11px;rotate:-5deg}
  .wb-li-t{font-size:15px}
  .wb-li-p{font-size:13px}
  /* cómo trabajamos: la ventana arriba y los pasos debajo */
  .wb-obra .sv-pin{--ow:calc(100vw - 32px);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:start;gap:16px;padding:76px 16px 18px}
  .wb-ob-der{order:-1;align-self:start}
  .wb-ob-ven{height:min(calc(var(--alto)*.45),calc(var(--ow)*1.05))}
  .wb-ob-h2t{font-size:clamp(28px,8vw,40px)}
  .wb-ob-sub{display:none}
  .wb-ob-izq{gap:10px}
  .wb-ob-chip{display:none}
  .wb-ob-menu,.wb-ob-cards{display:none}
  .wb-ob-sitio{grid-template-rows:auto minmax(0,1fr);gap:10px;padding:11px 12px 12px}
  .wb-ob-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px}
  .wb-ob-htxt{gap:6px}
  .wb-ob-foto{order:-1}
  .wb-nota{width:40%;min-height:0;padding:12px 10px 10px;font-size:12px}
  .wb-nota:nth-child(1){--x:5%!important;--y:6%!important}
  .wb-nota:nth-child(2){--x:53%!important;--y:9%!important}
  .wb-nota:nth-child(3){--x:7%!important;--y:38%!important}
  .wb-nota:nth-child(4){--x:52%!important;--y:42%!important}
  .wb-nota-5{display:none}
  .wb-nota-d{width:24px;padding-top:2px}
  .wb-ob-llam{left:auto;right:5%;top:auto;bottom:5%;gap:8px;padding:6px 10px 6px 6px}
  .wb-ob-eq{display:none}
  .wb-ob-check{padding:9px 11px;gap:5px}
  .wb-ob-com3{display:none}
  /* preguntas y cierre */
  .wb-faq{grid-template-columns:minmax(0,1fr);gap:26px}
  .wb-fq-h2t{font-size:clamp(40px,11vw,60px)}
  .wb-fq-s{padding:8px 8px 0 12px;gap:10px}
  .wb-fq-s .wb-luces{display:none}
  .wb-fq-tab{padding:11px 12px 12px;font-size:15px}
  .wb-fq-p{padding:14px 16px 18px}
  .wb-fin-barra{padding:12px 12px 12px 16px}
  .wb-fin-ir{display:none}
  .wb-fin-url{font-size:clamp(16px,5vw,22px)}
  .wb-fin-h2{font-size:clamp(34px,11.4vw,90px)}
}
/* ---------- movimiento reducido: todo en su estado final ---------- */
@media (prefers-reduced-motion:reduce){
  .wb-tarda,.wb-anat,.wb-obra{height:auto}
  .wb-tarda .sv-pin{height:var(--alto)}
  .wb-w{color:var(--ink);translate:none}
  .wb-w.wb-k{color:var(--k)}
  .wb-w::before,.wb-esq,.wb-img-ico{animation:none}
  .wb-w::before{display:none}
  .wb-spin{animation:none}
  .wb-li,.wb-li.hecho{opacity:1}
  .wb-li-r{grid-template-rows:1fr}
  .wb-li-p{padding-top:calc(var(--u)*.4);opacity:.82}
  .wb-chin{scale:1}
  .wb-chin::after,.wb-hilo,.wb-an-sel{display:none}
  .wb-an-rayo{opacity:1;scale:1}
  .wb-anat .wb-lst{gap:calc(var(--u)*.45)}
  .wb-tz,.wb-nota-p{stroke-dashoffset:0;transition:none}
  .wb-nota-c{scale:1;transition:none}
  .wb-ob-reloj::before,.wb-ob-av::after{animation:none}
  .wb-ob-b{opacity:1;transition:none}
  .wb-ob-sello{opacity:1;scale:1}
  .wb-fq-p,.wb-fq-carga{animation:none}
  .wb-fin-ir,.wb-fin-ir1,.wb-fin-ir2,.wb-fin-ii{transition:none;animation:none}
}