/* ============ SEO/GEO · la demo «Mírate subir» ============ */
/* a todo el ancho: arriba, el título y la búsqueda de tu cliente, que hace de mando (el negocio y la ciudad se cambian dentro de la barra);
   debajo, el altímetro con los cinco pasos como alturas (izquierda) y la ventana con sus tres pestañas (derecha).
   El paso lo lleva servicio.js en .dm-esc[data-paso]; seo-geo.js viste el negocio, escribe la búsqueda, sube la chincheta y coloca el mapa.
   Dentro de la ventana, 1em = --u: así sus tres maquetas se eligen por lo que mide en --u (ancha, alta o compacta) */
.sx-ic{flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sx-iconos{position:absolute;width:0;height:0;overflow:hidden}
.sg-demo{background:var(--cream)}
.sg-demo .sv-pin{display:block;padding:calc(70px + var(--u)*1.2) var(--pad) calc(var(--u)*2)}
.sg-demo .dm-esc{--izq:min(calc(var(--u)*37),31vw);--cw:max(26px,calc(var(--u)*2.8));--tono:#e8468f;display:grid;grid-template-columns:var(--izq) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:calc(var(--u)*3.2);row-gap:calc(var(--u)*1.5);place-items:stretch;height:calc(var(--alto) - 70px - var(--u)*3.2)}

/* --- arriba a la izquierda: el título --- */
.sx-cab{align-self:end;display:grid;justify-items:start;gap:calc(var(--u)*.9);min-width:0}
.sx-cab > .ojo{opacity:.65}
.sx-cab > h2{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*3.9),calc(var(--izq)*.098));line-height:.86;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}

/* --- arriba a la derecha: el mando (la búsqueda de tu cliente) --- */
.sx-mando{position:relative;z-index:6;align-self:end;display:grid;gap:calc(var(--u)*.9);min-width:0}
.sx-mando-t{font-size:max(10px,calc(var(--u)*.86));opacity:.62;white-space:nowrap}
.sx-barra{--bh:max(46px,calc(var(--u)*4.7));display:flex;align-items:center;gap:calc(var(--u)*1.1);height:var(--bh);padding:0 calc(var(--u)*.55) 0 calc(var(--u)*1.7);border-radius:99px;background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 calc(var(--u)*.45) 0 var(--ink)}
.sx-lupa{width:max(18px,calc(var(--u)*2));height:max(18px,calc(var(--u)*2));stroke-width:2.3;color:var(--c)}
.sx-q{display:flex;align-items:center;gap:calc(var(--u)*.55);min-width:0;font-size:max(15px,calc(var(--u)*1.75));letter-spacing:-.01em}
.sx-tk{position:relative;flex:none}
.sx-tk-b{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:.34em;height:calc(var(--bh) - var(--u)*1.25);padding:0 .5em 0 .3em;border-radius:99px;background:color-mix(in srgb,var(--c) 8%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 28%,transparent);color:var(--c);font-weight:800;white-space:nowrap;cursor:pointer;transition:background .25s,box-shadow .25s}
.sx-tk-c .sx-tk-b{padding-left:.48em}
.sx-tk-b:hover,.sx-tk.abierto .sx-tk-b{background:color-mix(in srgb,var(--c) 15%,#fff);box-shadow:inset 0 0 0 1.5px var(--c)}
.sx-tk-b:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.sx-tk-img{width:1.7em;height:1.7em;margin-block:-.2em;object-fit:contain}
.sx-tk-ic{width:.95em;height:.95em;stroke-width:2.1}
.sx-chev{width:.75em;height:.75em;stroke-width:2.8;transition:rotate .35s cubic-bezier(.2,1,.3,1)}
.sx-tk.abierto .sx-chev{rotate:180deg}
.sx-en{font-weight:600;color:rgba(17,17,17,.5)}
.sx-caret{flex:none;width:2px;height:1.2em;margin-left:-.2em;border-radius:1px;background:var(--c);animation:sx-parpadea 1s steps(1) infinite}
@keyframes sx-parpadea{50%{opacity:0}}
/* mientras se escribe, la búsqueda es texto suelto; al acabar, el negocio y la ciudad se vuelven botones */
.sx-barra.tecleo .sx-tk-b{padding:0;background:none;box-shadow:none;color:var(--ink);font-weight:600}
.sx-barra.tecleo :is(.sx-tk-img,.sx-tk-ic,.sx-chev){display:none}
.sx-barra.tecleo :is(.sx-tk-t,.sx-en):empty{display:none}
.sx-barra.listo .sx-tk-b{animation:sx-chip .6s cubic-bezier(.2,1.4,.4,1) both}
.sx-barra.listo .sx-tk-c .sx-tk-b{animation-delay:.1s}
@keyframes sx-chip{from{scale:.82;opacity:.3}}
.sx-barra-der{display:flex;align-items:center;gap:calc(var(--u)*1.1);margin-left:auto;color:rgba(17,17,17,.42);font-size:max(15px,calc(var(--u)*1.7))}
.sx-sep{width:1.5px;height:1.2em;background:rgba(17,17,17,.14)}
.sx-buscar{display:inline-flex;align-items:center;gap:.5em;height:calc(var(--bh) - var(--u)*1.1);padding:0 1.15em 0 .95em;border-radius:99px;background:var(--ink);color:#fff;font-weight:800;font-size:max(13px,calc(var(--u)*1.3));letter-spacing:0}
.sx-buscar .sx-ic{width:1.15em;height:1.15em;stroke-width:2.3;color:var(--girasol)}
/* los menús del negocio y de la ciudad: sugerencias, como en un buscador */
.sx-menu{position:absolute;left:calc(var(--u)*-.8);top:calc(100% + var(--u)*1.15);z-index:10;display:grid;gap:3px;width:max-content;min-width:max(240px,calc(var(--u)*24));padding:calc(var(--u)*.7);border-radius:calc(var(--u)*1.4);background:#fff;color:var(--ink);letter-spacing:0;box-shadow:0 0 0 1.5px var(--ink),0 calc(var(--u)*1.4) calc(var(--u)*3.2) rgba(17,17,17,.24);opacity:0;visibility:hidden;translate:0 calc(var(--u)*-.8);scale:.97;transform-origin:14% 0;transition:opacity .22s,translate .45s cubic-bezier(.2,1,.3,1),scale .45s cubic-bezier(.2,1,.3,1),visibility 0s .45s}
.sx-tk.abierto .sx-menu{opacity:1;visibility:visible;translate:0 0;scale:1;transition:opacity .22s,translate .45s cubic-bezier(.2,1,.3,1),scale .45s cubic-bezier(.2,1,.3,1),visibility 0s}
.sx-menu-t{padding:calc(var(--u)*.45) calc(var(--u)*.8) calc(var(--u)*.25);font-size:max(9.5px,calc(var(--u)*.8));opacity:.5}
.sx-op{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*1.1);padding:calc(var(--u)*.55) calc(var(--u)*.9) calc(var(--u)*.55) calc(var(--u)*.6);border-radius:calc(var(--u)*.9);cursor:pointer;transition:background .2s}
.sx-op:hover{background:rgba(17,17,17,.05)}
.sx-op:focus-visible{outline:2.5px solid var(--ink);outline-offset:-2px}
.sx-op[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 9%,#fff)}
.sx-op > img{width:max(38px,calc(var(--u)*3.8));height:max(38px,calc(var(--u)*3.8));object-fit:contain}
.sx-op-ic{display:grid;place-items:center;width:max(38px,calc(var(--u)*3.8));aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--c)}
.sx-op-ic > .sx-ic{width:44%;height:44%}
.sx-op-tx{display:grid;gap:2px;line-height:1.15}
.sx-op-tx > b{font-weight:800;font-size:max(14px,calc(var(--u)*1.4))}
.sx-op-tx > span{font-weight:500;font-size:max(11.5px,calc(var(--u)*1.05));color:rgba(17,17,17,.55)}
.sx-op-ok{width:max(17px,calc(var(--u)*1.6));height:max(17px,calc(var(--u)*1.6));stroke-width:2.5;color:var(--c);opacity:0;scale:.5;transition:opacity .2s,scale .35s cubic-bezier(.2,1.5,.4,1)}
.sx-op[aria-pressed="true"] .sx-op-ok{opacity:1;scale:1}

/* --- abajo a la izquierda: el altímetro --- */
.sx-alti{position:relative;min-height:0;margin-top:calc(var(--u)*2.4)}
.sx-alt{position:absolute;inset:0;list-style:none;padding:0;display:flex;flex-direction:column-reverse;justify-content:space-between}
.sx-alt button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:var(--cw) minmax(0,1fr);grid-template-rows:var(--cw) auto auto;column-gap:calc(var(--u)*2);width:100%;cursor:pointer}
.sx-alt button:focus-visible{outline:2.5px solid var(--ink);outline-offset:4px;border-radius:calc(var(--u)*.8)}
.sx-alt-n{grid-row:1;position:relative;z-index:2;display:grid;place-items:center;width:var(--cw);height:var(--cw);border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.28);font:500 max(10px,calc(var(--u)*.95))/1 'DM Mono',monospace;color:rgba(17,17,17,.55);transition:background .4s,color .4s,box-shadow .4s,scale .6s cubic-bezier(.2,1.5,.4,1)}
.sx-alt button > b{grid-column:2;grid-row:1;align-self:center;font-weight:800;font-size:max(14px,calc(var(--u)*1.5));line-height:1.1;letter-spacing:-.012em;white-space:nowrap;opacity:.45;transition:opacity .4s}
.sx-alt-a{grid-column:2;grid-row:2;display:flex;align-items:center;gap:.5em;margin-top:calc(var(--u)*-.1);font-size:max(9.5px,calc(var(--u)*.82));opacity:.45;transition:opacity .4s,color .4s}
.sx-alt-a::before{content:'';width:.9em;height:1.5px;background:currentColor}
.sx-alt-d{grid-column:2;grid-row:3;max-width:21em;margin-top:calc(var(--u)*.55);font-weight:500;font-size:max(12px,calc(var(--u)*1.12));line-height:1.35;opacity:0;translate:0 calc(var(--u)*-.6);transition:opacity .3s,translate .5s cubic-bezier(.2,1,.3,1)}
.sx-alt li.hecho .sx-alt-n{background:var(--c);color:transparent;box-shadow:none}
.sx-alt li.hecho .sx-alt-n::after{content:'';position:absolute;inset:0;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.6 3.6 7.4-7.6'/%3E%3C/svg%3E") center/62% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.6 3.6 7.4-7.6'/%3E%3C/svg%3E") center/62% no-repeat}
.sx-alt li.hecho :is(b,.sx-alt-a){opacity:.72}
.sx-alt li.ahora .sx-alt-n{background:var(--girasol);color:var(--ink);box-shadow:0 0 0 1.5px var(--ink);scale:1.14}
.sx-alt li.ahora b{opacity:1}
.sx-alt li.ahora .sx-alt-a{opacity:1;color:var(--c)}
.sx-alt li.ahora .sx-alt-d{opacity:.82;translate:0 0;transition:opacity .45s .25s,translate .7s cubic-bezier(.2,1,.3,1) .25s}
.sx-alt button:hover b{opacity:1}
/* la regla: rayitas como las de un altímetro y, encima, lo ya subido */
.sx-regla{--av:0;position:absolute;left:calc(var(--cw)/2 - 1px);top:0;width:2px;height:100%;background:rgba(17,17,17,.15)}
.sx-regla::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:calc(var(--u)*1.1);translate:-50% 0;background:repeating-linear-gradient(to top,rgba(17,17,17,.24) 0 1.5px,transparent 1.5px calc(var(--u)*1.1))}
.sx-regla-on{position:absolute;left:-1px;right:-1px;bottom:0;height:100%;border-radius:4px;background:var(--c);transform-origin:50% 100%;transform:scaleY(var(--av))}
.sx-chin{position:absolute;left:0;top:0;z-index:3;width:max(36px,calc(var(--u)*4.1));height:auto;pointer-events:none;will-change:transform}

/* --- abajo a la derecha: la ventana --- */
.sx-marco{position:relative;z-index:1;min-width:0;min-height:0}
.sx-marco > .ej-tag{position:absolute;right:calc(var(--u)*-1.3);top:calc(var(--u)*-1.2);z-index:4;rotate:6deg;font-size:11px;background:var(--k);border-color:var(--k);color:var(--ink)}
.sx-ven{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100%;border-radius:calc(var(--u)*1.4);background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 calc(var(--u)*2.2) calc(var(--u)*4) rgba(17,17,17,.15);overflow:hidden;font-family:'Archivo',sans-serif}
.sx-pest{display:flex;align-items:flex-end;gap:calc(var(--u)*.3);padding:calc(var(--u)*.65) calc(var(--u)*3.4) 0 calc(var(--u)*1.2);background:#ebe5d8;border-bottom:1.5px solid rgba(17,17,17,.12)}
.sx-luces{display:flex;gap:max(5px,calc(var(--u)*.5));align-self:center;margin:0 calc(var(--u)*1) calc(var(--u)*.3) 0}
.sx-luces > i{width:max(9px,calc(var(--u)*.85));aspect-ratio:1;border-radius:50%;background:var(--k)}
.sx-luces > i:nth-child(2){background:var(--girasol)}
.sx-luces > i:nth-child(3){background:var(--c)}
.sx-p{display:flex;align-items:center;gap:.6em;padding:calc(var(--u)*.7) calc(var(--u)*1.35);border-radius:calc(var(--u)*.9) calc(var(--u)*.9) 0 0;margin-bottom:-1.5px;font:500 max(10px,calc(var(--u)*1)) 'DM Mono',monospace;letter-spacing:.04em;color:rgba(17,17,17,.5);white-space:nowrap;transition:background .5s,color .5s}
.sx-p > .sx-ic{width:1.25em;height:1.25em;stroke-width:1.7}
.dm-esc:is([data-paso="1"],[data-paso="2"],[data-paso="3"]) .sx-p[data-tab="0"],.dm-esc[data-paso="4"] .sx-p[data-tab="1"],.dm-esc[data-paso="5"] .sx-p[data-tab="2"]{background:#fff;color:var(--ink)}
/* dónde sales tú: el sello de la pestaña, que salta al cambiar */
.sx-marca{margin-left:auto;align-self:center;display:flex;align-items:center;gap:.45em;margin-bottom:calc(var(--u)*.3);padding:.4em .95em;border-radius:99px;background:var(--k);color:var(--ink);font-weight:900;font-stretch:112%;font-size:max(12px,calc(var(--u)*1.2));white-space:nowrap}
.sx-marca > i{display:inline-block;font-style:normal;transition:rotate .5s cubic-bezier(.2,1,.3,1)}
.dm-esc[data-paso="1"] .sx-marca > i{rotate:180deg}
.sx-marca.salta{animation:sx-salta .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes sx-salta{35%{scale:1.16}}
.sx-cuerpo{position:relative;min-height:0;overflow:hidden;container:sxc / size;font-size:var(--u)}
.sx-pistas{display:flex;width:300%;height:100%;transition:transform .95s cubic-bezier(.7,0,.2,1)}
.dm-esc[data-paso="4"] .sx-pistas{transform:translateX(-33.3333%)}
.dm-esc[data-paso="5"] .sx-pistas{transform:translateX(-66.6667%)}
.sx-pista{position:relative;flex:0 0 33.3333%;height:100%;min-width:0;overflow:hidden}
/* lo que se repite en los resultados, el mapa y la IA */
.sx-fav{flex:none;display:grid;place-items:center;width:max(22px,calc(var(--u)*2.3));aspect-ratio:1;border-radius:50%;background:var(--f,var(--ink));color:#fff;font:800 max(10px,calc(var(--u)*.98))/1 'Archivo',sans-serif}
.sx-fav-tu{background:var(--c)}
.sx-sitio{display:grid;min-width:0;line-height:1.18}
.sx-sitio > b{font-weight:700;font-size:max(11.5px,calc(var(--u)*1.08));white-space:nowrap}
.sx-sitio > span{font:500 max(9.5px,calc(var(--u)*.86)) 'DM Mono',monospace;color:rgba(17,17,17,.5);white-space:nowrap}
.sx-est{color:#e0a100;letter-spacing:.06em}
.sx-est-c{font-style:normal;font-weight:700;color:#a87400}
.sx-abierto{display:inline-block;color:var(--c);font-weight:700}
.sx-abierto > i{display:inline-block;vertical-align:.08em;margin-right:.45em;width:.5em;height:.5em;border-radius:50%;background:currentColor;box-shadow:0 0 0 .2em color-mix(in srgb,var(--c) 20%,transparent)}
/* el objeto 3D del negocio, sobre su degradado */
.sx-mini,.sx-paa-img,.sx-top3-img,.sx-tel-foto,.sx-tj-img,.sx-ficha-fotos > i,.sx-pin-c{display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 36%,#fff 0,color-mix(in srgb,var(--tono) 14%,#fff) 46%,color-mix(in srgb,var(--tono) 34%,#fff) 100%)}
:is(.sx-mini,.sx-paa-img,.sx-top3-img,.sx-tel-foto,.sx-tj-img,.sx-ficha-fotos > i,.sx-pin-c) > img{display:block;width:88%;height:88%;object-fit:contain}

/* --- 1·2·3 el buscador --- */
.sx-busca{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"fil" "lista";column-gap:calc(var(--u)*2.6);row-gap:calc(var(--u)*.9);padding:calc(var(--u)*1.3) calc(var(--u)*2) calc(var(--u)*1.3)}
.sx-fil{grid-area:fil;display:flex;align-items:center;gap:calc(var(--u)*1.7);padding:0 calc(var(--u)*1.2) calc(var(--u)*.75);border-bottom:1px solid rgba(17,17,17,.1);font-weight:600;font-size:max(11px,calc(var(--u)*1.05));color:rgba(17,17,17,.55);white-space:nowrap}
.sx-fil > .sx-on{position:relative;color:var(--c);font-weight:800}
.sx-fil > .sx-on::after{content:'';position:absolute;left:-.2em;right:-.2em;bottom:calc(var(--u)*-.75 - 1.5px);height:3px;border-radius:3px 3px 0 0;background:var(--c)}
.sx-fil-n{margin-left:auto;font-size:max(9.5px,calc(var(--u)*.82));opacity:.8}
/* la lista: cuatro huecos iguales (--S) y un poco más (--E) para el resultado rico, que ocupa uno y un poco */
.sx-lista{--g:calc(var(--u)*.5);--E:calc(var(--u)*2.9);grid-area:lista;position:relative;min-height:0}
.sx-res{position:absolute;inset:0;list-style:none;padding:0;margin:0;container-type:size}
.sx-r,.sx-paa-en{--S:calc((100cqh - var(--E) - var(--g)*3)/4)}
.sx-r{--s:0;--o:0;position:absolute;left:0;right:0;top:0;height:var(--S);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;row-gap:calc(var(--u)*.32);padding:0 calc(var(--u)*1.2);border-radius:calc(var(--u)*1.1);translate:0 calc(var(--s)*(var(--S) + var(--g)) + var(--o)*var(--E));transition:translate 1s cubic-bezier(.7,0,.2,1),opacity .6s,background .6s,box-shadow .6s}
.sx-r:not(.tu)::after{content:'';position:absolute;left:calc(var(--u)*1.2);right:calc(var(--u)*1.2);bottom:calc(var(--g)*-.5);height:1px;background:rgba(17,17,17,.08)}
.sx-r[data-r="1"]{--s:1}.sx-r[data-r="2"]{--s:2}.sx-r[data-r="3"]{--s:3}
.sx-r-cab{display:flex;align-items:center;gap:calc(var(--u)*.8);min-width:0}
.sx-tit{font-weight:800;font-size:max(14px,calc(var(--u)*1.62));line-height:1.14;letter-spacing:-.012em;color:#26408b;white-space:nowrap}
.sx-sn{display:flex;align-items:baseline;gap:.75em;min-width:0;font-size:max(11px,calc(var(--u)*1.12));color:rgba(17,17,17,.62);white-space:nowrap}
/* tu resultado: fuera de la lista (1), entra cuarto (2) y sube al primero, ya rico (3) */
.sx-r.tu{--s:4;z-index:2;height:calc(var(--S) + var(--E));grid-template-columns:minmax(0,1fr) auto;column-gap:calc(var(--u)*1.6);opacity:0;background:color-mix(in srgb,var(--c) 6%,#fff);box-shadow:0 0 0 2px var(--c)}
.sx-r.tu > :not(.sx-mini,.sx-1){grid-column:1}
.sx-r.tu .sx-tit{color:var(--c)}
.sx-sn-tu,.sx-links,.sx-mini{display:none}
.sx-checks{display:flex;gap:6px}
.sx-checks > span{display:inline-flex;align-items:center;gap:.35em;padding:.32em .75em .32em .5em;border-radius:99px;background:var(--c);color:#fff;font-weight:700;font-size:max(10px,calc(var(--u)*.98));white-space:nowrap;opacity:0;scale:.6;transition:opacity .35s,scale .5s cubic-bezier(.2,1.5,.4,1)}
.sx-checks .sx-ic{width:1.15em;height:1.15em;stroke-width:2.6}
.dm-esc[data-paso="2"] .sx-r.tu{--s:3;opacity:1}
.dm-esc[data-paso="2"] .sx-r[data-r="3"]{--s:4;opacity:0}
.dm-esc[data-paso="2"] .sx-checks > span{opacity:1;scale:1}
.dm-esc[data-paso="2"] .sx-checks > span:nth-child(1){transition-delay:.9s}
.dm-esc[data-paso="2"] .sx-checks > span:nth-child(2){transition-delay:1.15s}
.dm-esc[data-paso="2"] .sx-checks > span:nth-child(3){transition-delay:1.4s}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r.tu{--s:0;opacity:1;box-shadow:0 0 0 2px var(--c),0 calc(var(--u)*.8) calc(var(--u)*2.2) color-mix(in srgb,var(--c) 26%,transparent)}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r:not(.tu){--o:1}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r[data-r="0"]{--s:1}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r[data-r="1"]{--s:2}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r[data-r="2"]{--s:3}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r[data-r="3"]{--s:4;opacity:0}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r.tu :is(.sx-sn-tu,.sx-links){display:flex}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r.tu .sx-mini{display:grid}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-checks{display:none}
.sx-sn-tu{align-items:center;gap:.7em;color:rgba(17,17,17,.7)}
.sx-sn-tu > .sx-est{font-size:1.05em}
.sx-links{gap:6px}
.sx-links > em{display:inline-flex;align-items:center;gap:.4em;padding:.38em .9em;border-radius:99px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 40%,transparent);color:var(--c);font-style:normal;font-weight:700;font-size:max(10.5px,calc(var(--u)*1.02));white-space:nowrap}
.sx-links > em:first-child{background:var(--c);color:#fff;box-shadow:none}
.sx-links .sx-ic{width:1.2em;height:1.2em;stroke-width:2}
.sx-mini{grid-column:2;grid-row:1/span 4;align-self:center;width:calc(var(--S) + var(--E) - var(--u)*1.8);aspect-ratio:1;border-radius:calc(var(--u)*1);scale:.4;opacity:0;rotate:-6deg;transition:scale .7s cubic-bezier(.2,1.4,.4,1) 1s,opacity .4s 1s,rotate .7s cubic-bezier(.2,1.4,.4,1) 1s}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-mini{scale:1;opacity:1;rotate:0deg}
.sx-r.tu .sx-sn-tu,.sx-r.tu .sx-links{opacity:0;translate:0 calc(var(--u)*.6);transition:opacity .45s 1.1s,translate .6s cubic-bezier(.2,1,.3,1) 1.1s}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r.tu :is(.sx-sn-tu,.sx-links){opacity:1;translate:0 0}
.sx-1{position:absolute;right:calc(var(--u)*-.7);top:calc(var(--u)*-.8);display:grid;place-items:center;width:calc(var(--u)*3.3);aspect-ratio:1;min-width:30px;border-radius:50%;background:var(--k);color:var(--ink);font-style:normal;font-weight:900;font-size:max(12px,calc(var(--u)*1.25));box-shadow:0 0 0 2px #fff;scale:0;rotate:-30deg;transition:scale .6s cubic-bezier(.2,1.6,.4,1) .9s,rotate .6s cubic-bezier(.2,1.6,.4,1) .9s}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-1{scale:1;rotate:0deg}
/* paso 1: debajo de la lista, la página 2, donde estás tú */
.sx-pag{position:absolute;left:0;right:0;bottom:0;height:var(--E);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1.4);font:500 max(10.5px,calc(var(--u)*1)) 'DM Mono',monospace;color:rgba(17,17,17,.5);transition:opacity .4s,translate .6s cubic-bezier(.2,1,.3,1)}
.sx-pag > span:nth-child(2){color:var(--c);font-weight:700}
.sx-pag-tu{position:relative;display:grid;place-items:center;width:calc(var(--u)*2.3);aspect-ratio:1;min-width:22px;border-radius:50%;box-shadow:0 0 0 1.5px var(--k);color:var(--ink)}
.sx-pag-tu > b{position:absolute;left:calc(100% + 5px);top:50%;translate:0 -50%;padding:.15em .55em;border-radius:99px;background:var(--k);color:var(--ink);font-size:.86em;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.sx-pag-tu{margin-right:calc(var(--u)*3)}
.sx-pag-sig{color:var(--c)}
.dm-esc:not([data-paso="1"]) .sx-pag{opacity:0;translate:0 60%}
/* al lado (o debajo), lo que explica cada paso */
.sx-lado{grid-area:lado;position:relative;min-height:0;display:none}
.sx-card{position:absolute;inset:0;display:grid;align-content:start;gap:calc(var(--u)*1.1);padding:calc(var(--u)*1.4) calc(var(--u)*1.6);border-radius:calc(var(--u)*1.2);background:#f7f4ee;box-shadow:inset 0 0 0 1px rgba(17,17,17,.07);opacity:0;translate:calc(var(--u)*2.4) 0;transition:opacity .4s,translate .8s cubic-bezier(.2,1,.3,1)}
.dm-esc[data-paso="1"] .sx-p2,.dm-esc[data-paso="2"] .sx-rev,.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-card.sx-paa{opacity:1;translate:0 0;transition:opacity .5s .35s,translate .9s cubic-bezier(.2,1,.3,1) .35s}
.sx-card-t{display:flex;justify-content:space-between;align-items:baseline;gap:1em;white-space:nowrap}
.sx-card-t > b{font-weight:900;font-stretch:112%;font-size:max(14px,calc(var(--u)*1.5));letter-spacing:-.015em}
.sx-card-t > .mono{font-size:max(9.5px,calc(var(--u)*.8));text-transform:none;letter-spacing:.03em;opacity:.55}
/* la página 2 */
.sx-p2{align-content:space-between;background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,17,.09)}
.sx-p2::before{content:'2';position:absolute;right:calc(var(--u)*1.3);bottom:calc(var(--u)*-.9);font-weight:900;font-stretch:125%;font-size:calc(var(--u)*13);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(17,17,17,.1);pointer-events:none}
.sx-p2-l{list-style:none;padding:0;display:grid;gap:calc(var(--u)*.55)}
.sx-p2-l > li{display:flex;align-items:center;gap:calc(var(--u)*.9);padding:calc(var(--u)*.75) calc(var(--u)*1);border-radius:calc(var(--u)*.9);background:#f4f1ea;opacity:.6}
.sx-p2-l > li.tu{position:relative;background:#fff;opacity:1;box-shadow:0 0 0 1.5px var(--k),0 calc(var(--u)*.6) calc(var(--u)*1.4) rgba(226,86,42,.16)}
.sx-p2-l > li > em{margin-left:auto;padding:.2em .7em;border-radius:99px;background:var(--k);color:var(--ink);font:500 max(9.5px,calc(var(--u)*.82)) 'DM Mono',monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.sx-p2-nota{position:relative;display:flex;align-items:center;gap:.6em;font-weight:700;font-size:max(12px,calc(var(--u)*1.15))}
.sx-p2-nota > .sx-ic{width:1.35em;height:1.35em;color:var(--k);stroke-width:2}
/* tu web, a punto: el móvil con tu web y las tres cosas que se arreglan */
.sx-rev{grid-template-rows:auto minmax(0,1fr)}
.sx-rev-c{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(var(--u)*1.8);min-height:0}
.sx-tel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:calc(var(--u)*.55);height:100%;aspect-ratio:9/17;max-height:calc(var(--u)*27);padding:calc(var(--u)*.6) calc(var(--u)*.7) calc(var(--u)*.8);border-radius:calc(var(--u)*1.8);background:#fff;box-shadow:0 0 0 calc(var(--u)*.45) var(--ink),0 calc(var(--u)*1) calc(var(--u)*2) rgba(17,17,17,.18);font-size:max(8px,calc(var(--u)*.78))}
.sx-tel-st{display:flex;justify-content:space-between;align-items:center;padding:0 .4em;font-weight:800}
.sx-tel-st > i{width:2.4em;height:.9em;border-radius:99px;background:var(--ink)}
.sx-tel-cab{display:flex;justify-content:space-between;align-items:center;padding:.2em .4em;font-weight:900;font-stretch:112%;font-size:1.05em}
.sx-tel-cab > i{width:1.3em;height:.75em;border-block:2px solid var(--ink);position:relative}
.sx-tel-cab > i::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--ink)}
.sx-tel-foto{min-height:0;border-radius:calc(var(--u)*1)}
.sx-tel-foto > img{width:100%;height:100%;object-fit:contain}
.sx-tel-t{padding:0 .3em;font-weight:900;font-size:1.25em;line-height:1.05;letter-spacing:-.01em}
.sx-tel-bt{display:grid;place-items:center;padding:.65em;border-radius:99px;background:var(--c);color:#fff;font-weight:800}
.sx-rev-l{list-style:none;padding:0;display:grid;gap:calc(var(--u)*.8)}
.sx-rev-l > li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.85) calc(var(--u)*1);border-radius:calc(var(--u)*1);background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,17,.08)}
.sx-rev-ic{display:grid;place-items:center;width:calc(var(--u)*3.1);aspect-ratio:1;min-width:28px;border-radius:50%;background:color-mix(in srgb,var(--c) 11%,#fff);color:var(--c)}
.sx-rev-ic > .sx-ic{width:50%;height:50%}
.sx-rev-tx{display:grid;gap:1px;line-height:1.2;min-width:0}
.sx-rev-tx > b{font-weight:800;font-size:max(12.5px,calc(var(--u)*1.25));white-space:nowrap}
.sx-rev-tx > span{font-size:max(10.5px,calc(var(--u)*1));color:rgba(17,17,17,.58);white-space:nowrap}
.sx-rev-ok{display:grid;place-items:center;width:calc(var(--u)*2.3);aspect-ratio:1;min-width:22px;border-radius:50%;background:var(--c);color:#fff;scale:0;rotate:-40deg;transition:scale .5s cubic-bezier(.2,1.6,.4,1),rotate .5s cubic-bezier(.2,1.6,.4,1)}
.sx-rev-ok > .sx-ic{width:60%;height:60%;stroke-width:2.8}
.dm-esc[data-paso="2"] .sx-rev-ok{scale:1;rotate:0deg}
.dm-esc[data-paso="2"] .sx-rev-l > li:nth-child(1) .sx-rev-ok{transition-delay:.9s}
.dm-esc[data-paso="2"] .sx-rev-l > li:nth-child(2) .sx-rev-ok{transition-delay:1.15s}
.dm-esc[data-paso="2"] .sx-rev-l > li:nth-child(3) .sx-rev-ok{transition-delay:1.4s}
/* la gente también pregunta: se abre la primera y contesta tu web */
.sx-paa-cab{display:flex;justify-content:space-between;align-items:center}
.sx-paa-cab > b{font-weight:900;font-stretch:112%;font-size:max(14px,calc(var(--u)*1.5));letter-spacing:-.015em}
.sx-paa-cab > .sx-ic{width:1.6em;height:1.6em;opacity:.5}
.sx-paa-q{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:calc(var(--u)*.75) 0;border-top:1px solid rgba(17,17,17,.12);font-weight:700;font-size:max(12.5px,calc(var(--u)*1.25));line-height:1.2}
.sx-paa-q > .sx-ic{width:1.15em;height:1.15em;color:rgba(17,17,17,.5);stroke-width:2.2;transition:scale .5s cubic-bezier(.2,1,.3,1),color .3s}
.sx-paa-q.sx-paa-ab > .sx-ic{color:var(--c)}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-paa-ab > .sx-ic{scale:1 -1;transition-delay:1.2s}
.sx-paa-r{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:calc(var(--u)*1.4);row-gap:calc(var(--u)*.8);padding:calc(var(--u)*1.1) calc(var(--u)*1.3);border-radius:calc(var(--u)*1);background:#fff;box-shadow:inset 3px 0 0 var(--c),0 0 0 1px rgba(17,17,17,.06);opacity:0;translate:0 calc(var(--u)*-.8);transition:opacity .4s,translate .6s cubic-bezier(.2,1,.3,1)}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-paa-r{opacity:1;translate:0 0;transition-delay:1.3s}
.sx-paa-p{grid-column:1;font-weight:500;font-size:max(12px,calc(var(--u)*1.18));line-height:1.42}
.sx-paa-p > b{padding:0 .15em;border-radius:3px;background:color-mix(in srgb,var(--k) 26%,#fff);font-weight:800}
.sx-paa-f{grid-column:1;display:flex;align-items:center;gap:.65em;font-size:max(10px,calc(var(--u)*.95))}
.sx-paa-img{grid-column:2;grid-row:1/span 2;align-self:stretch;width:calc(var(--u)*9.5);border-radius:calc(var(--u)*.9)}
.sx-card.sx-paa{grid-template-rows:auto auto minmax(0,1fr) auto auto;align-content:stretch;gap:0;background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,17,.09)}
.sx-card.sx-paa > .sx-paa-cab{padding-bottom:calc(var(--u)*.6)}
.sx-card.sx-paa > .sx-paa-r{margin-bottom:calc(var(--u)*.6)}
/* en una ventana estrecha y baja, la pregunta va dentro de la lista, debajo de tu resultado */
.sx-paa-en{position:absolute;left:0;right:0;top:0;height:calc(var(--S)*2 + var(--g));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;align-content:start;padding:calc(var(--u)*.7) calc(var(--u)*1.2) 0;border-radius:calc(var(--u)*1.1);background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,17,.1);opacity:0;translate:0 calc(var(--S)*4 + var(--E));transition:translate 1s cubic-bezier(.7,0,.2,1),opacity .6s}
.sx-paa-en > .sx-paa-cab{padding-bottom:calc(var(--u)*.4)}
.sx-paa-en > .sx-paa-cab > b{font-size:max(13px,calc(var(--u)*1.3))}
.sx-paa-en .sx-paa-q{padding:calc(var(--u)*.5) 0;font-size:max(12px,calc(var(--u)*1.15))}
.sx-paa-en .sx-paa-r{grid-template-columns:minmax(0,1fr);padding:calc(var(--u)*.7) calc(var(--u)*1);margin-bottom:calc(var(--u)*.5)}
.sx-paa-en .sx-paa-p{font-size:max(11.5px,calc(var(--u)*1.08));line-height:1.35}
.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-paa-en{opacity:1;translate:0 calc(var(--S) + var(--E) + var(--g))}
/* la maqueta de la ventana según su tamaño: compacta (por defecto), ancha (al lado) o alta (debajo) */
@container sxc (max-width:85.99em) and (max-height:51.99em){
  .dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r[data-r="0"]{--s:3}
  .dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r[data-r="1"],.dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r[data-r="2"]{--s:4;opacity:0}
}
@container sxc (min-width:86em){
  .sx-busca{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"fil lado" "lista lado";padding-right:calc(var(--u)*1.4)}
  .sx-lado{display:block}
  .sx-paa-en{display:none}
}
@container sxc (max-width:85.99em) and (min-height:52em){
  .sx-busca{grid-template-rows:auto minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"fil" "lista" "lado";row-gap:calc(var(--u)*1.2)}
  .sx-lado{display:block}
  .sx-paa-en{display:none}
}

/* --- 4 el mapa --- */
.sx-mapa{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);background:#efe8da}
.sx-top3{position:relative;z-index:3;display:grid;align-content:start;gap:calc(var(--u)*.8);padding:calc(var(--u)*1.3) calc(var(--u)*1.3) calc(var(--u)*1);background:#fff;box-shadow:1px 0 0 rgba(17,17,17,.1)}
.sx-top3-t{display:grid;gap:2px;padding:0 calc(var(--u)*.3)}
.sx-top3-t > b{font-weight:900;font-stretch:112%;font-size:max(14px,calc(var(--u)*1.5));letter-spacing:-.015em}
.sx-top3-t > .mono{font-size:max(9.5px,calc(var(--u)*.8));text-transform:none;letter-spacing:.03em;opacity:.55}
.sx-top3 > ol{list-style:none;padding:0;display:grid;gap:calc(var(--u)*.5)}
.sx-top3 li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*.9);padding:calc(var(--u)*.7) calc(var(--u)*.8);border-radius:calc(var(--u)*1);box-shadow:inset 0 -1px 0 rgba(17,17,17,.07);opacity:0;translate:calc(var(--u)*-2) 0;transition:opacity .4s,translate .7s cubic-bezier(.2,1,.3,1)}
.sx-top3 li.tu{background:color-mix(in srgb,var(--c) 7%,#fff);box-shadow:0 0 0 2px var(--c)}
.sx-top3 li > .sx-fav{width:max(30px,calc(var(--u)*3.3));font-size:max(11px,calc(var(--u)*1.1))}
.sx-top3-img{width:max(30px,calc(var(--u)*3.3));aspect-ratio:1;border-radius:calc(var(--u)*.8)}
.sx-top3-tx{display:grid;gap:1px;min-width:0;line-height:1.22}
.sx-top3-tx > b{font-weight:800;font-size:max(12.5px,calc(var(--u)*1.22));white-space:nowrap}
.sx-top3-tx > span{font-size:max(10.5px,calc(var(--u)*.98));color:rgba(17,17,17,.6);white-space:nowrap}
.sx-top3 li.tu .sx-top3-tx > b{color:var(--c)}
.sx-top3-n{display:grid;place-items:center;width:max(20px,calc(var(--u)*2));aspect-ratio:1;border-radius:50%;background:rgba(17,17,17,.07);font:500 max(9.5px,calc(var(--u)*.9)) 'DM Mono',monospace}
.sx-top3 li.tu .sx-top3-n{background:var(--k);color:var(--ink);font-weight:700}
.dm-esc[data-paso="4"] .sx-top3 li{opacity:1;translate:0 0}
.dm-esc[data-paso="4"] .sx-top3 li:nth-child(1){transition-delay:1.7s}
.dm-esc[data-paso="4"] .sx-top3 li:nth-child(2){transition-delay:1s}
.dm-esc[data-paso="4"] .sx-top3 li:nth-child(3){transition-delay:1.12s}
.sx-mapa-c{position:relative;min-height:0;overflow:hidden}
.sx-calles{position:absolute;inset:0;width:100%;height:100%}
.sx-m-base{fill:#efe8da}
.sx-m-edif{fill:#e6dece}
.sx-m-parque{fill:#cde3c2}
.sx-m-arb{fill:#b3d3a4}
.sx-m-rio{fill:none;stroke:#b6d8de;stroke-width:34;stroke-linecap:round}
.sx-m-rio-c{fill:none;stroke:#c8e3e7;stroke-width:12;stroke-linecap:round}
.sx-m-borde{fill:none;stroke:#dbd2c0;stroke-width:15;stroke-linecap:round}
.sx-m-calle{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round}
.sx-m-rambla-b{fill:none;stroke:#eccb6e;stroke-width:25}
.sx-m-rambla{fill:none;stroke:#ffe7a1;stroke-width:21}
.sx-m-plaza{fill:#f8f3e9;stroke:#dbd2c0;stroke-width:2.5}
.sx-m-fuente{fill:#b6d8de;stroke:#fff;stroke-width:3}
.sx-m-nom{font-family:'DM Mono',monospace;font-weight:500;font-size:var(--fs,12px);letter-spacing:.1em;text-transform:uppercase;fill:rgba(17,17,17,.46);dominant-baseline:central}
.sx-m-nom > text{transition:opacity .3s}
.sx-m-nom > text.fuera{opacity:0}
.sx-m-nom-rio{fill:#5f9aa5;font-style:italic}
.sx-m-nom-v{fill:#5e8c50}
.sx-m-nom-p{fill:rgba(17,17,17,.5)}
.sx-mp-q{position:absolute;left:calc(var(--u)*1.2);top:calc(var(--u)*1.2);z-index:3;display:flex;align-items:center;gap:.6em;padding:.6em 1.1em .6em .9em;border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 calc(var(--u)*.5) calc(var(--u)*1.4) rgba(17,17,17,.14);font-weight:600;font-size:max(11.5px,calc(var(--u)*1.12));white-space:nowrap}
.sx-mp-q > .sx-ic{width:1.15em;height:1.15em;stroke-width:2.2;color:var(--c)}
.sx-pin{position:absolute;left:0;top:0;z-index:2}
.sx-pin.oculto{visibility:hidden}
.sx-pin.otro{display:flex;align-items:center;gap:5px;translate:calc(max(12px,calc(var(--u)*1.2))*-.5) -50%}
.sx-pin.otro[data-l="-1"]{flex-direction:row-reverse;translate:calc(-100% + max(12px,calc(var(--u)*1.2))*.5) -50%}
.sx-pin.otro > i{flex:none;width:max(12px,calc(var(--u)*1.2));aspect-ratio:1;border-radius:50%;background:#8a8478;box-shadow:0 0 0 2.5px #fff,0 2px 5px rgba(0,0,0,.22)}
.sx-pin.otro > b{padding:.18em .55em;border-radius:99px;background:rgba(255,255,255,.88);font-weight:700;font-size:max(10.5px,calc(var(--u)*.98));color:rgba(17,17,17,.68);white-space:nowrap}
/* tu chincheta: una burbuja con tu objeto, que cae y avisa */
.sx-pin.tu{--pb:max(46px,calc(var(--u)*5.4));translate:-50% -100%;opacity:0}
.sx-pin-c{position:relative;width:var(--pb);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 3px var(--c),0 0 0 6px #fff,0 calc(var(--u)*.8) calc(var(--u)*1.6) rgba(0,0,0,.25)}
.sx-pin-c > img{width:80%;height:80%}
.sx-pin.tu::after{content:'';display:block;width:0;height:0;margin:2px auto 0;border:calc(var(--pb)*.16) solid transparent;border-top:calc(var(--pb)*.26) solid var(--c);border-bottom:0}
.sx-pin.tu > b{position:absolute;left:calc(100% + var(--u)*1.1);top:calc(var(--pb)*.5);translate:0 -50%;padding:.3em .75em;border-radius:99px;background:var(--c);color:#fff;font-weight:800;font-size:max(11px,calc(var(--u)*1.08));white-space:nowrap;box-shadow:0 0 0 2px #fff}
.sx-pin.tu::before{content:'';position:absolute;left:50%;bottom:-2px;width:calc(var(--pb)*.7);aspect-ratio:2.4;border-radius:50%;box-shadow:0 0 0 2px var(--c);translate:-50% 50%;opacity:0}
.dm-esc[data-paso="4"] .sx-pin.tu{animation:sx-cae .8s cubic-bezier(.3,1.5,.5,1) .7s both}
.dm-esc[data-paso="4"] .sx-pin.tu::before{animation:sx-onda 1.8s ease-out 1.45s infinite}
@keyframes sx-cae{from{opacity:0;transform:translateY(-140%)}to{opacity:1;transform:none}}
@keyframes sx-onda{from{opacity:.85;scale:.6}to{opacity:0;scale:2.4}}
.sx-ficha{position:absolute;left:0;top:0;z-index:4;display:grid;gap:calc(var(--u)*.4);width:max(232px,calc(var(--u)*25));padding:calc(var(--u)*.7) calc(var(--u)*.7) calc(var(--u)*1);border-radius:calc(var(--u)*1.3);background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 calc(var(--u)*1.2) calc(var(--u)*2.8) rgba(17,17,17,.2);font-size:max(11px,calc(var(--u)*1.04));line-height:1.25;opacity:0;translate:0 calc(var(--u)*2);transition:opacity .5s,translate .7s cubic-bezier(.2,1.2,.3,1)}
.sx-ficha > :not(.sx-ficha-fotos){padding-inline:calc(var(--u)*.5)}
.sx-ficha-fotos{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:3px;height:calc(var(--u)*7.4);min-height:62px;margin-bottom:calc(var(--u)*.35);border-radius:calc(var(--u)*.8);overflow:hidden}
.sx-ficha-fotos > i{scale:.85;opacity:0;transition:scale .6s cubic-bezier(.2,1.4,.4,1),opacity .4s}
.sx-ficha-fotos > i:nth-child(2){--tono:var(--girasol)}
.sx-ficha-fotos > i:nth-child(3){--tono:var(--c)}
.sx-ficha-n{font-weight:900;font-stretch:112%;font-size:max(14px,calc(var(--u)*1.45));letter-spacing:-.012em}
.sx-ficha-e{display:flex;align-items:center;gap:.4em;font-weight:700}
.sx-ficha-d{color:rgba(17,17,17,.6)}
.sx-bts{display:flex;gap:5px;margin-top:calc(var(--u)*.35)}
.sx-bts > em{display:inline-flex;align-items:center;gap:.4em;padding:.5em .85em;border-radius:99px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 40%,transparent);color:var(--c);font-style:normal;font-weight:700;font-size:.95em;white-space:nowrap}
.sx-bts > em:last-child{background:var(--c);color:#fff;box-shadow:none}
.sx-bts .sx-ic{width:1.15em;height:1.15em;stroke-width:2}
.dm-esc[data-paso="4"] .sx-ficha{opacity:1;translate:0 0;transition-delay:1.35s}
.dm-esc[data-paso="4"] .sx-ficha-fotos > i{scale:1;opacity:1}
.dm-esc[data-paso="4"] .sx-ficha-fotos > i:nth-child(1){transition-delay:1.6s}
.dm-esc[data-paso="4"] .sx-ficha-fotos > i:nth-child(2){transition-delay:1.72s}
.dm-esc[data-paso="4"] .sx-ficha-fotos > i:nth-child(3){transition-delay:1.84s}
@container sxc (min-width:60em){
  .sx-mapa{grid-template-columns:minmax(0,.37fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .sx-top3{padding:calc(var(--u)*1.5) calc(var(--u)*1.3)}
}

/* --- 5 la IA --- */
.sx-ia{display:grid;grid-template-columns:minmax(0,1fr);column-gap:calc(var(--u)*2.4);padding:calc(var(--u)*1.2) calc(var(--u)*2.4) calc(var(--u)*1.3);background:linear-gradient(#fff,color-mix(in srgb,var(--c) 5%,#fff))}
.sx-chat{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:calc(var(--u)*1);min-height:0}
.sx-hoy{justify-self:center;padding:.4em 1em;border-radius:99px;background:rgba(17,17,17,.05);font-size:max(9px,calc(var(--u)*.78));opacity:.7}
.sx-yo{justify-self:end;max-width:78%;padding:.8em 1.15em;border-radius:1.2em 1.2em .3em 1.2em;background:var(--ink);color:#fff;font-weight:600;font-size:max(13px,calc(var(--u)*1.4));line-height:1.3;opacity:0;translate:0 40%;transition:opacity .4s,translate .6s cubic-bezier(.2,1.2,.3,1)}
.sx-ella{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u)*1);align-items:start;align-content:start;min-height:0;opacity:0;transition:opacity .4s}
.sx-av{display:grid;place-items:center;width:calc(var(--u)*3.2);aspect-ratio:1;min-width:28px;border-radius:50%;background:var(--c);color:#fff}
.sx-av > .sx-ic{width:52%;height:52%;stroke-width:1.7}
.sx-burb{display:grid;justify-items:start;gap:calc(var(--u)*.75);padding:calc(var(--u)*1) calc(var(--u)*1.3) calc(var(--u)*1.15);border-radius:calc(var(--u)*1.5) calc(var(--u)*1.5) calc(var(--u)*1.5) calc(var(--u)*.35);background:#fff;box-shadow:0 0 0 1.5px rgba(17,17,17,.1),0 calc(var(--u)*.8) calc(var(--u)*2) rgba(17,17,17,.06);font-size:max(13px,calc(var(--u)*1.4));line-height:1.4}
.sx-quien{font-size:max(9px,calc(var(--u)*.78));color:var(--c)}
.sx-pts{display:none;gap:4px;padding:.3em 0}
.sx-pts > i{width:7px;height:7px;border-radius:50%;background:rgba(17,17,17,.35);animation:sx-pt 1s ease-in-out infinite}
.sx-pts > i:nth-child(2){animation-delay:.15s}.sx-pts > i:nth-child(3){animation-delay:.3s}
@keyframes sx-pt{0%,60%,100%{translate:0 0}30%{translate:0 -5px}}
.sx-ia.pensando .sx-pts{display:flex}
.sx-txt:empty{display:none}
.sx-txt > b{padding:0 .12em;margin-right:-.06em;border-radius:4px;background:color-mix(in srgb,var(--k) 30%,#fff);font-weight:900}
/* la tarjeta de tu negocio, dentro de la respuesta */
.sx-tj{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*1.2);width:100%;padding:calc(var(--u)*.6) calc(var(--u)*.9) calc(var(--u)*.6) calc(var(--u)*.6);border-radius:calc(var(--u)*1.1);background:#faf8f4;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.08);opacity:0;scale:.92;transform-origin:0 0;transition:opacity .4s,scale .6s cubic-bezier(.2,1.4,.4,1)}
.sx-tj-img{width:calc(var(--u)*9.6);aspect-ratio:16/10;border-radius:calc(var(--u)*.8)}
.sx-tj-img > img{width:96%;height:96%}
.sx-tj-tx{display:grid;gap:2px;min-width:0;line-height:1.25;font-size:max(11px,calc(var(--u)*1.04))}
.sx-tj-tx > b{font-weight:900;font-stretch:112%;font-size:max(13px,calc(var(--u)*1.38));letter-spacing:-.012em}
.sx-tj-tx > span{white-space:nowrap}
.sx-tj-bt{display:inline-flex;align-items:center;gap:.45em;padding:.6em 1em;border-radius:99px;background:var(--c);color:#fff;font-weight:800;font-size:max(11px,calc(var(--u)*1.05));white-space:nowrap}
.sx-tj-bt > .sx-ic{width:1.2em;height:1.2em}
.sx-fuente{display:inline-flex;flex-wrap:wrap;gap:.4em;padding:.45em .9em;border-radius:99px;background:color-mix(in srgb,var(--c) 10%,#fff);color:rgba(17,17,17,.7);font-size:max(9.5px,calc(var(--u)*.9));text-transform:none;letter-spacing:.03em;opacity:0;scale:.8;transform-origin:0 50%;transition:opacity .4s,scale .5s cubic-bezier(.2,1.5,.4,1)}
.sx-fuente > b{color:var(--c)}
.sx-escribe{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:calc(var(--u)*.55) calc(var(--u)*.55) calc(var(--u)*.55) calc(var(--u)*1.5);border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.12);font-size:max(12px,calc(var(--u)*1.15));color:rgba(17,17,17,.45)}
.sx-escribe > i{display:grid;place-items:center;width:calc(var(--u)*2.8);aspect-ratio:1;min-width:26px;border-radius:50%;background:var(--ink);color:#fff}
.sx-escribe .sx-ic{width:55%;height:55%;stroke-width:2.2}
.dm-esc[data-paso="5"] .sx-yo{opacity:1;translate:0 0;transition-delay:.8s}
.dm-esc[data-paso="5"] .sx-ella{opacity:1;transition-delay:1.3s}
.sx-ia.listo :is(.sx-tj,.sx-fuente){opacity:1;scale:1}
.sx-ia.listo .sx-fuente{transition-delay:.3s}
/* las fuentes, a la derecha cuando cabe */
.sx-fuentes{display:none;align-content:start;gap:calc(var(--u)*.7);min-height:0}
.sx-fuentes-t{padding:calc(var(--u)*.3) 0 calc(var(--u)*.1);font-size:max(9.5px,calc(var(--u)*.8));opacity:.55}
.sx-fu{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u)*1);padding:calc(var(--u)*1) calc(var(--u)*1.1);border-radius:calc(var(--u)*1.1);background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 calc(var(--u)*.5) calc(var(--u)*1.2) rgba(17,17,17,.05);opacity:0;translate:calc(var(--u)*2) 0;transition:opacity .4s,translate .7s cubic-bezier(.2,1,.3,1)}
.sx-fu > .sx-fav{width:max(28px,calc(var(--u)*3));font-size:max(10px,calc(var(--u)*.95))}
.sx-fu-ic{display:grid;place-items:center;width:max(28px,calc(var(--u)*3));aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--c) 11%,#fff);color:var(--c)}
.sx-fu-ic > .sx-ic{width:52%;height:52%}
.sx-fu-tx{display:grid;gap:2px;min-width:0;line-height:1.25;font-size:max(10.5px,calc(var(--u)*1))}
.sx-fu-d{font:500 max(9px,calc(var(--u)*.8)) 'DM Mono',monospace;letter-spacing:.04em;color:rgba(17,17,17,.5)}
.sx-fu-tx > b{font-weight:800;font-size:max(11.5px,calc(var(--u)*1.1))}
.sx-fu-tx > span:last-child{color:rgba(17,17,17,.6)}
.sx-ia.listo .sx-fu{opacity:1;translate:0 0}
.sx-ia.listo .sx-fu:nth-child(2){transition-delay:.25s}.sx-ia.listo .sx-fu:nth-child(3){transition-delay:.4s}.sx-ia.listo .sx-fu:nth-child(4){transition-delay:.55s}
@container sxc (min-width:86em){
  .sx-ia{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);padding-right:calc(var(--u)*1.6)}
  .sx-fuentes{display:grid}
  .sx-fuente-m{display:none}
}

/* lo que se repite en bucle se para cuando la demo no se ve (seo-geo.js pone .vista) */
.sg-demo:not(.vista) :is(.sx-caret,.sx-pts > i,.sx-pin.tu){animation-play-state:paused}
.sg-demo:not(.vista) .sx-pin.tu::before{animation-play-state:paused}

/* ---------- la demo en el móvil: el título, el mando y, debajo, el altímetro estrecho al lado de la ventana ---------- */
@media (max-width:980px){
  .sg-demo .sv-pin{padding:78px var(--pad) 16px}
  .sg-demo .dm-esc{--cw:26px;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:8px;row-gap:12px;height:calc(var(--alto) - 94px)}
  .sx-cab,.sx-mando{grid-column:1/-1}
  .sx-cab{gap:8px}
  .sx-cab > h2{font-size:clamp(30px,8.6vw,44px)}
  .sx-mando{gap:7px}
  .sx-mando-h{display:none}
  .sx-barra{--bh:48px;gap:8px;padding:0 6px 0 14px}
  .sx-lupa{width:18px;height:18px}
  .sx-q{gap:5px;font-size:15px}
  .sx-tk-b{gap:.3em;padding:0 .45em 0 .25em}
  .sx-barra-der > :not(.sx-buscar),.sx-buscar{display:none}
  .sx-menu{min-width:240px}
  .sx-tk-c .sx-menu{left:auto;right:-60px}
  .sx-alt button{grid-template-columns:var(--cw);grid-template-rows:var(--cw);column-gap:0}
  .sx-alt button > :not(.sx-alt-n){display:none}
  .sx-chin{width:32px}
  .sx-marco > .ej-tag{right:-6px;top:-12px}
  .sx-pest{padding:6px 8px 0 8px;gap:2px}
  .sx-luces{display:none}
  .sx-p{padding:7px 9px;gap:0;font-size:0}
  .sx-p > .sx-ic{width:15px;height:15px}
  .dm-esc:is([data-paso="1"],[data-paso="2"],[data-paso="3"]) .sx-p[data-tab="0"],.dm-esc[data-paso="4"] .sx-p[data-tab="1"],.dm-esc[data-paso="5"] .sx-p[data-tab="2"]{gap:6px;font-size:10px}
  .sx-marca{font-size:12px;padding:.38em .8em}
  /* la ventana es estrecha: siempre la maqueta compacta (la pregunta va dentro de la lista, sin panel al lado) */
  .sx-busca{grid-template-rows:auto minmax(0,1fr);grid-template-areas:"fil" "lista"}
  .sx-lado{display:none}
  .sx-paa-en{display:grid}
  /* del paso 3 en adelante, la lista es tu resultado rico (más alto) y la pregunta debajo: lo demás se va */
  .dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-lista{--E:max(110px,20cqh)}
  .dm-esc:not([data-paso="1"]):not([data-paso="2"]) .sx-r:not(.tu){--s:4;opacity:0}
  .sx-paa-en{height:calc(var(--S)*3 + var(--g)*2)}
  .sx-sn-tu{display:grid;gap:2px}
  /* lo largo baja de línea en vez de salirse por la derecha */
  .sx-tit{white-space:normal;font-size:15px}
  .sx-sn,.sx-sn-tu{white-space:normal;flex-wrap:wrap;row-gap:2px}
  .sx-checks,.sx-links{flex-wrap:wrap}
  .sx-links > em:nth-child(3){display:none}
  .sx-mini{width:60px}
  .sx-paa-img{display:none}
  .sx-paa-r{grid-template-columns:minmax(0,1fr)}
  .sx-ia{padding:12px}
  .sx-chat{grid-template-columns:minmax(0,1fr)}
  .sx-yo{max-width:90%}
  .sx-tj{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .sx-tj-bt{grid-column:1/-1;justify-self:start}
  .sx-tj-img{width:64px}
  .sx-tj-tx > span{white-space:normal}
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){
  .sg-demo .dm-esc{height:calc(var(--alto) - 94px)}
}
/* en los móviles estrechos, el título de tu resultado se queda con todo el ancho y la ficha del mapa con dos botones */
@media (max-width:370px){
  .dm-esc .sx-r.tu .sx-mini{display:none!important}
  .sx-bts > :nth-child(2){display:none}
}
@media (max-width:420px){
  .dm-esc .sx-p{gap:0!important;font-size:0!important}
}

/* ============ SEO/GEO · «La subida»: cada sección habla el idioma del buscador ============ */
/* por qué (un buscador que se escribe solo), qué incluye (un sendero con banderines), cómo trabajamos (una escalera de puestos),
   el informe (un documento), las preguntas (la gente también pregunta) y el cierre (el primer resultado) */
.sg-ic{flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sg-fav{flex:none;display:grid;place-items:center;width:calc(var(--u)*2.5);aspect-ratio:1;min-width:22px;border-radius:50%;background:var(--f,var(--ink));color:#fff;font:800 max(10px,calc(var(--u)*1.05))/1 'Archivo',sans-serif}
.sg-caret{display:inline-block;flex:none;width:2px;height:1.1em;margin-left:3px;background:currentColor;animation:sg-parpadea 1s steps(1) infinite}
@keyframes sg-parpadea{50%{opacity:0}}
@keyframes sg-pt{0%,60%,100%{translate:0 0}30%{translate:0 -4px}}

/* ---------- 2 · por qué importa: lo que escribe tu cliente ---------- */
.sg-porque{height:calc(var(--alto)*2.6);background:var(--paper);color:var(--ink)}
.sg-porque .sv-pin{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1fr);gap:calc(var(--u)*5.5);padding:calc(70px + var(--u)*1.6) var(--pad) calc(var(--u)*2.4)}
.sg-serp{--bh:max(44px,calc(var(--u)*5.2));display:grid;grid-template-rows:var(--bh) auto minmax(0,1fr);gap:calc(var(--u)*1.1);min-height:0}
/* los filtros de debajo de la barra: «Página 1» es donde se elige */
.sg-fil{display:flex;align-items:center;gap:calc(var(--u)*.6);padding:0 calc(var(--u)*1.1)}
.sg-fil > span{padding:.34em .95em;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(17,17,17,.16);font-weight:600;font-size:max(11px,calc(var(--u)*1));color:rgba(17,17,17,.68);white-space:nowrap}
.sg-fil > .sg-on{background:var(--ink);color:var(--paper);box-shadow:none}
.sg-fil > .sg-fil-n{margin-left:auto;padding:0;box-shadow:none;font-size:max(9.5px,calc(var(--u)*.86));color:rgba(17,17,17,.5)}
/* la barra: se escribe sola al llegar */
.sg-bus{position:relative;display:flex;align-items:center;gap:calc(var(--u)*1.1);padding:0 calc(var(--u)*1.7) 0 calc(var(--u)*1.9);border-radius:99px;background:#fff;box-shadow:0 0 0 1.5px rgba(17,17,17,.13),0 calc(var(--u)*.6) calc(var(--u)*2) rgba(17,17,17,.07);font-size:max(16px,calc(var(--u)*2))}
.sg-bus > .sg-ic{width:1.05em;height:1.05em;color:rgba(17,17,17,.42)}
.sg-bus-q{font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.sg-bus .sg-caret{margin-left:calc(var(--u)*-1.1 + 2px);background:var(--c)}
.sg-porque.escrito .sg-bus .sg-caret{animation-duration:1.1s}
.sg-bus-der{display:flex;align-items:center;gap:calc(var(--u)*1.1);margin-left:auto;color:rgba(17,17,17,.42)}
.sg-bus-der .sg-ic{width:.92em;height:.92em}
.sg-bus-der .sg-ic-c{color:var(--c)}
.sg-bus-sep{width:1.5px;height:1.15em;background:rgba(17,17,17,.14)}
.sg-bus > .ej-tag{position:absolute;right:calc(var(--u)*-1.2);top:calc(var(--u)*-1.5);rotate:6deg;font-size:11px;background:var(--k);border-color:var(--k);color:var(--ink)}
/* los diez resultados: entran al llegar, los tres primeros brillan y del 4 al 10 se hunden */
.sg-res{list-style:none;padding:0 0 calc(var(--u)*1.6);display:grid;grid-template-rows:repeat(10,minmax(0,1fr));row-gap:3px;min-height:0}
.sg-r{--a:0;--h:0;position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*1.15);min-height:0;padding:0 calc(var(--u)*1.3);border-radius:calc(var(--u)*1.1);opacity:calc(var(--a)*(1 - var(--h)*.8));transform:translate3d(0,calc((1 - var(--a))*16px + var(--h)*(5px + var(--i)*1.1px)),0) scale(calc(1 - var(--h)*.04));transform-origin:0 50%;transition:background .6s,box-shadow .6s}
.sg-r.sg-tu{opacity:calc(var(--a)*(1 - var(--h)*.5))}
.sg-r::after{content:'';position:absolute;left:calc(var(--u)*1.3);right:calc(var(--u)*1.3);bottom:-2px;height:1px;background:rgba(17,17,17,.09);transition:opacity .4s}
.sg-r::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--c) 16%,transparent) 50%,transparent 65%) 0 0/250% 100% no-repeat;background-position:130% 0;opacity:0}
.sg-r .sg-fav{width:calc(var(--u)*2.3);min-width:20px;font-size:max(9.5px,calc(var(--u)*.95))}
.sg-r-c{display:grid;gap:1px;min-width:0}
.sg-r-c > b{font-weight:800;font-size:max(13px,calc(var(--u)*1.42));line-height:1.15;white-space:nowrap}
.sg-r-c > b > em{margin-left:.45em;padding:.12em .55em;border-radius:99px;background:var(--k);color:var(--ink);font:500 max(9px,calc(var(--u)*.82)) 'DM Mono',monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase;vertical-align:.12em}
.sg-r-u{display:flex;align-items:baseline;gap:.9em;font:500 max(9.5px,calc(var(--u)*.95)) 'DM Mono',monospace;color:rgba(17,17,17,.5);white-space:nowrap}
.sg-r-u > em{font:700 max(10px,calc(var(--u)*1)) 'Archivo',sans-serif;font-style:normal;color:#a87400}
.sg-r-n{display:grid;place-items:center;width:calc(var(--u)*2.3);min-width:22px;aspect-ratio:1;border-radius:50%;font:500 max(9.5px,calc(var(--u)*.95)) 'DM Mono',monospace;color:rgba(17,17,17,.42);transition:background .5s,color .5s}
.sg-porque.brilla .sg-top{background:#fff;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 34%,transparent),0 calc(var(--u)*.5) calc(var(--u)*1.6) color-mix(in srgb,var(--c) 16%,transparent)}
.sg-porque.brilla .sg-top::after{opacity:0}
.sg-porque.brilla .sg-top::before{opacity:1;animation:sg-reflejo 1.5s cubic-bezier(.3,0,.2,1) calc(var(--i)*.14s) both}
@keyframes sg-reflejo{from{background-position:130% 0}to{background-position:-30% 0}}
.sg-porque.brilla .sg-top .sg-r-n{background:var(--c);color:#fff}
/* el corte: después del tercero, una línea de puntos */
.sg-porque.brilla .sg-top:nth-child(3)::after{opacity:1;bottom:-3px;height:0;background:none;border-top:1.5px dashed color-mix(in srgb,var(--c) 70%,transparent)}
/* la frase y la burbuja de la IA */
.sg-pq-txt{display:grid;align-content:center;gap:calc(var(--u)*2);min-width:0}
.sg-pq-txt > .ojo{opacity:.6}
.sg-frase{font-weight:800;font-stretch:112%;font-size:min(calc(var(--u)*4.9),3.2vw);line-height:1.06;letter-spacing:-.022em}
.sg-w{opacity:.14;transition:opacity .35s,color .35s}
.sg-w.on{opacity:1}
.sg-w.sg-k.on{color:color-mix(in srgb,var(--k) 86%,#3a0a00)}
.sg-ia{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:calc(var(--u)*1);max-width:36em;opacity:0;translate:0 calc(var(--u)*3);transition:opacity .5s,translate .9s cubic-bezier(.2,1,.3,1)}
.sg-ia.on{opacity:1;translate:0 0}
.sg-ia-av{display:grid;place-items:center;width:calc(var(--u)*3.3);aspect-ratio:1;min-width:30px;border-radius:50%;background:var(--c);color:#fff;font-size:max(12px,calc(var(--u)*1.35))}
.sg-ia-b{justify-self:start;display:grid;justify-items:start;gap:calc(var(--u)*.45);padding:calc(var(--u)*1.05) calc(var(--u)*1.5) calc(var(--u)*1.15);border-radius:calc(var(--u)*1.6) calc(var(--u)*1.6) calc(var(--u)*1.6) 5px;background:#fff;box-shadow:0 0 0 1.5px rgba(17,17,17,.1),0 calc(var(--u)*.8) calc(var(--u)*2) rgba(17,17,17,.08);font-weight:600;font-size:max(13px,calc(var(--u)*1.42));line-height:1.35}
.sg-ia-quien{font-size:max(9.5px,calc(var(--u)*.85));color:var(--c)}
.sg-ia-pts{display:flex;align-items:center;gap:4px;height:1.35em}
.sg-ia-pts > i{width:7px;height:7px;border-radius:50%;background:rgba(17,17,17,.35);animation:sg-pt 1s ease-in-out infinite}
.sg-ia-pts > i:nth-child(2){animation-delay:.15s}.sg-ia-pts > i:nth-child(3){animation-delay:.3s}
.sg-ia-t{display:none}
.sg-ia-t > b{padding:0 .06em;border-radius:3px;background:color-mix(in srgb,var(--c) 13%,#fff);font-weight:800}
.sg-ia.dice .sg-ia-pts{display:none}
.sg-ia.dice .sg-ia-t{display:block;animation:sg-aparece .6s cubic-bezier(.2,1,.3,1) both}
@keyframes sg-aparece{from{opacity:0;translate:0 6px}}
.sg-porque:not(.brilla) .sg-ia-pts > i{animation-play-state:paused}

/* ---------- 4 · qué incluye: el camino hasta arriba ---------- */
.sg-camino{height:calc(var(--alto)*4.4);background:var(--c);color:var(--on)}
.sg-cn-esc{position:absolute;inset:0}
.sg-cn-topo,.sg-cn-ruta{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* curvas de nivel alrededor de la cima: respiran muy despacio */
.sg-cn-topo{transform-origin:85% 15%;animation:sg-respira 18s ease-in-out infinite alternate}
@keyframes sg-respira{to{transform:scale(1.025) rotate(.6deg)}}
.sg-cn-topo path{fill:none;stroke:rgba(243,238,228,.12);stroke-width:1.2}
.sg-cn-topo path.sg-ix{stroke:rgba(243,238,228,.22);stroke-width:1.7}
.sg-cn-topo path.sg-ci0{fill:rgba(243,238,228,.05)}
/* las cotas de las curvas maestras: cortan la línea, como en un mapa de verdad */
.sg-cota{font:500 max(9px,calc(var(--u)*.8)) 'DM Mono',monospace;letter-spacing:.16em;text-transform:uppercase;text-anchor:middle;dominant-baseline:central;fill:rgba(243,238,228,.46);stroke:var(--c);stroke-width:11px;stroke-linejoin:round;paint-order:stroke}
/* el sendero: una pista ancha y suave, encima la línea de puntos, y lo andado en girasol */
.sg-cn-pista{fill:none;stroke:rgba(0,0,0,.16);stroke-width:calc(var(--u)*1.9);stroke-linecap:round;stroke-linejoin:round}
.sg-cn-senda{fill:none;stroke:rgba(243,238,228,.62);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.1 9}
.sg-cn-hecha{fill:none;stroke:var(--girasol);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 99999}
.sg-cn-guia{fill:none;stroke:var(--cream);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2 6;opacity:0;transition:opacity .35s}
.sg-cn-guia-p{fill:var(--cream);opacity:0;transition:opacity .35s}
.sg-cn-ruta.guia .sg-cn-guia{opacity:.85;transition-delay:.15s}
.sg-cn-ruta.guia .sg-cn-guia-p{opacity:1;transition-delay:.15s}
.sg-cn-cab{position:absolute;z-index:2;left:var(--pad);top:calc(70px + var(--u)*2.2);display:grid;justify-items:start;gap:calc(var(--u)*1.3);width:min(calc(var(--u)*58),46vw)}
.sg-cn-cab > .ojo{opacity:.7}
.sg-cn-cab > h2{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*4.4),3.1vw);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.sg-cn-cab > p{max-width:22em;font-weight:600;font-size:max(14px,calc(var(--u)*1.45));line-height:1.3;opacity:.85}
/* los banderines: un mástil y una tela con su número; el de ahora ondea, los pasados llevan ✓ */
.sg-ban,.sg-cima-ban{--ph:max(32px,calc(var(--u)*4.4));--th:max(19px,calc(var(--u)*2.5));--tw:max(29px,calc(var(--u)*3.7));position:absolute;left:0;top:0;z-index:3;width:0;height:0}
.sg-ban::before{content:'';position:absolute;left:-6px;top:-3px;width:12px;height:6px;border-radius:50%;background:rgba(0,0,0,.28)}
.sg-ban-palo{position:absolute;left:-1px;bottom:0;width:2px;height:var(--ph);border-radius:2px;background:var(--cream)}
.sg-ban-tela{position:absolute;left:1px;bottom:calc(var(--ph) - var(--th));display:grid;place-items:center start;width:var(--tw);height:var(--th);padding-left:.5em;clip-path:polygon(0 0,100% 0,80% 50%,100% 100%,0 100%);background:rgba(243,238,228,.24);color:var(--cream);font:800 max(11px,calc(var(--u)*1.15))/1 'Archivo',sans-serif;transform-origin:0 50%;transition:background .4s,color .4s}
.sg-ban.hecho .sg-ban-tela{background:var(--cream);color:var(--c)}
.sg-ban.hecho .sg-ban-tela > b{font-size:0}
.sg-ban.hecho .sg-ban-tela > b::after{content:'✓';font-size:max(11px,calc(var(--u)*1.15))}
.sg-ban.ahora .sg-ban-tela{background:var(--girasol);color:var(--ink);animation:sg-ondea 1.3s ease-in-out infinite}
@keyframes sg-ondea{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-7deg) scaleX(.9)}}
/* la cima: banderín girasol y, al llegar, «Arriba.» */
.sg-cima{position:absolute;left:0;top:0;z-index:3;width:0;height:0}
.sg-cima-ban{--ph:max(44px,calc(var(--u)*6.2));--th:max(26px,calc(var(--u)*3.4));--tw:max(40px,calc(var(--u)*5))}
.sg-cima .sg-ban-tela{background:var(--girasol);animation:sg-ondea 1.6s ease-in-out infinite}
.sg-cima-t{position:absolute;right:calc(var(--u)*-.6);top:calc(var(--u)*11.5);font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*5.4),4vw);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;opacity:0;scale:.5;rotate:-8deg;transform-origin:100% 0;transition:opacity .4s,scale .7s cubic-bezier(.2,1.5,.4,1),rotate .7s cubic-bezier(.2,1.5,.4,1)}
.sg-cima-s{position:absolute;right:0;top:calc(var(--u)*11.5 + min(calc(var(--u)*5.4),4vw)*.9 + var(--u)*.8);white-space:nowrap;opacity:0;transition:opacity .4s}
.sg-camino.cima .sg-cima-t{opacity:1;scale:1;rotate:-3deg}
.sg-camino.cima .sg-cima-s{opacity:.8;transition-delay:.35s}
/* la chincheta 3D: la mueve seo-geo.js por el sendero */
.sg-chin{position:absolute;left:0;top:0;z-index:4;width:max(44px,calc(var(--u)*5.4));height:auto;transform-origin:31% 79%;pointer-events:none;will-change:transform}
/* las tarjetas: se abre la del banderín donde está la chincheta, desde el banderín */
.sg-tjs{position:absolute;inset:0;z-index:5;pointer-events:none}
.sg-tj{position:absolute;left:0;top:0;width:calc(var(--u)*30);padding:calc(var(--u)*1);border-radius:calc(var(--u)*1.7);background:var(--cream);color:var(--ink);box-shadow:0 calc(var(--u)*1.2) calc(var(--u)*3) rgba(0,0,0,.24),0 0 0 1px rgba(0,0,0,.05);opacity:0;scale:.55;transition:opacity .3s,scale .45s cubic-bezier(.7,0,.2,1)}
/* (solo se apagan, sin esconderlas: así un lector de pantalla lee las seis) */
.sg-tj.on{opacity:1;scale:1;transition:opacity .35s .05s,scale .7s cubic-bezier(.2,1.25,.35,1) .05s}
.sg-tj-txt{display:grid;gap:calc(var(--u)*.4);padding:calc(var(--u)*.9) calc(var(--u)*.7) calc(var(--u)*.35)}
.sg-tj-n{font-size:max(9.5px,calc(var(--u)*.82));opacity:.5}
.sg-tj-txt > b{font-weight:900;font-stretch:112%;font-size:max(15px,calc(var(--u)*1.85));line-height:1;letter-spacing:-.015em}
.sg-tj-txt > p{font-weight:500;font-size:max(13px,calc(var(--u)*1.22));line-height:1.3;opacity:.75}
.sg-il{position:relative;height:calc(var(--u)*8.8);min-height:78px;border-radius:calc(var(--u)*1.1);background:#fff;overflow:hidden;font-size:max(10px,calc(var(--u)*1))}
.sg-tj:not(.on) .sg-il *,.sg-tj:not(.on) .sg-il{animation-play-state:paused}
/* 1 · salir en Google: tu negocio sube al primero */
.sg-g-bar{position:absolute;left:7%;right:7%;top:9%;height:21%;display:flex;align-items:center;gap:.5em;padding:0 .9em;border-radius:99px;box-shadow:0 0 0 1.5px rgba(17,17,17,.14);font-weight:600;color:rgba(17,17,17,.72);white-space:nowrap}
.sg-g-bar > svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sg-g-r{position:absolute;left:7%;right:7%;top:38%;height:16%;display:flex;align-items:center;gap:.6em;padding:0 .75em;border-radius:6px;white-space:nowrap}
.sg-g-r > i{width:1.15em;height:1.15em;border-radius:50%;background:var(--f,var(--c))}
.sg-g-r > b{font-weight:800;color:rgba(17,17,17,.66)}
.sg-g-a{animation:sg-g-baja 4.6s cubic-bezier(.7,0,.2,1) infinite}
.sg-g-b{top:58%;animation:sg-g-baja 4.6s cubic-bezier(.7,0,.2,1) infinite}
.sg-g-tu{top:78%;background:color-mix(in srgb,var(--c) 9%,#fff);box-shadow:inset 0 0 0 1.5px var(--c);animation:sg-g-sube 4.6s cubic-bezier(.7,0,.2,1) infinite}
.sg-g-tu > b{color:var(--c)}
.sg-g-tu > em{margin-left:auto;padding:.12em .55em;border-radius:99px;background:var(--k);color:var(--ink);font-style:normal;font-weight:900;font-size:.9em;scale:0;animation:sg-g-1 4.6s cubic-bezier(.2,1.5,.4,1) infinite}
@keyframes sg-g-sube{0%,16%{translate:0 0}40%,86%{translate:0 -250%}100%{translate:0 0}}
@keyframes sg-g-baja{0%,16%{translate:0 0}40%,86%{translate:0 125%}100%{translate:0 0}}
@keyframes sg-g-1{0%,40%{scale:0}48%,84%{scale:1}92%,100%{scale:0}}
/* 2 · tu ficha en el mapa: la chincheta cae, avisa y sale la ficha */
.sg-il-m{background:#efe9dc}
.sg-m-calles{position:absolute;inset:0;width:100%;height:100%}
.sg-m-parque{fill:color-mix(in srgb,var(--c) 22%,#efe9dc)}
.sg-m-rio{fill:none;stroke:#bcd7d9;stroke-width:12;stroke-linecap:round}
.sg-m-calle{fill:none;stroke:#fff;stroke-width:4}
.sg-m-calle.sg-g{stroke-width:8}
.sg-m-otro{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;border-radius:50%;background:#a39d90;box-shadow:0 0 0 2.5px #fff;translate:-50% -50%}
.sg-m-pin{position:absolute;left:34%;top:60%;width:0;height:0;animation:sg-m-cae 3.8s cubic-bezier(.3,1.5,.5,1) infinite}
.sg-m-pin::before{content:'';position:absolute;left:0;top:0;width:max(20px,calc(var(--u)*2.4));aspect-ratio:1;border-radius:50% 50% 50% 0;background:var(--c);box-shadow:0 0 0 2.5px #fff,3px 3px 8px rgba(0,0,0,.25);translate:-50% -121%;rotate:-45deg}
.sg-m-pin::after{content:'';position:absolute;left:0;top:0;width:max(6px,calc(var(--u)*.75));aspect-ratio:1;border-radius:50%;background:#fff;translate:-50% calc(-50% - max(20px,calc(var(--u)*2.4))*.71)}
.sg-m-onda{position:absolute;left:34%;top:60%;width:max(30px,calc(var(--u)*3.4));aspect-ratio:2/1;border-radius:50%;box-shadow:0 0 0 2px var(--c);translate:-50% -50%;opacity:0;animation:sg-m-onda 3.8s ease-out infinite}
.sg-m-ficha{position:absolute;right:5%;bottom:10%;display:grid;gap:.2em;padding:.55em .8em;border-radius:8px;background:#fff;box-shadow:0 4px 14px rgba(17,17,17,.14);white-space:nowrap;opacity:0;translate:0 30%;animation:sg-m-ficha 3.8s cubic-bezier(.2,1.2,.3,1) infinite}
.sg-m-ficha > b{font-weight:900;font-size:1.05em}
.sg-m-ficha > span{display:flex;align-items:center;gap:.4em;font-size:.88em;color:rgba(17,17,17,.68)}
.sg-m-ficha > span > i{width:6px;height:6px;border-radius:50%;background:var(--c)}
@keyframes sg-m-cae{0%{transform:translateY(calc(var(--u)*-5));opacity:0}10%{opacity:1}24%,88%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes sg-m-onda{0%,24%{opacity:0;scale:.4}30%{opacity:.9}60%,100%{opacity:0;scale:2.4}}
@keyframes sg-m-ficha{0%,30%{opacity:0;translate:0 30%}40%,88%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
/* 3 · más reseñas: llegan las estrellas y contestas */
.sg-il-r{display:grid;align-content:center;gap:9%;padding:0 7%;background:color-mix(in srgb,var(--c) 5%,#fff)}
.sg-r-tj{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.7em;row-gap:.15em;align-items:center;padding:.55em .8em;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.08)}
.sg-r-av{grid-row:1/3;display:grid;place-items:center;width:2.5em;aspect-ratio:1;border-radius:50%;background:#e8468f;color:#fff;font-weight:800;font-size:.9em}
.sg-r-est{display:flex;gap:.12em}
.sg-r-est > i{font-style:normal;line-height:1;color:rgba(17,17,17,.15);animation:sg-r-est 4.2s infinite}
.sg-r-est > i:nth-child(2){animation-delay:.12s}.sg-r-est > i:nth-child(3){animation-delay:.24s}.sg-r-est > i:nth-child(4){animation-delay:.36s}.sg-r-est > i:nth-child(5){animation-delay:.48s}
.sg-r-txt{font-weight:600;white-space:nowrap}
.sg-r-resp{justify-self:end;padding:.45em .8em;border-radius:.9em .9em .2em .9em;background:var(--c);color:#fff;font-weight:600;font-size:.95em;white-space:nowrap;opacity:0;translate:0 30%;animation:sg-r-resp 4.2s cubic-bezier(.2,1.2,.3,1) infinite}
.sg-r-resp > b{margin-right:.45em;font-weight:500;font-family:'DM Mono',monospace;font-size:.78em;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
@keyframes sg-r-est{0%,6%{color:rgba(17,17,17,.15);scale:1}12%{color:#f0b400;scale:1.35}18%,88%{color:#f0b400;scale:1}100%{color:rgba(17,17,17,.15)}}
@keyframes sg-r-resp{0%,34%{opacity:0;translate:0 30%}44%,88%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
/* 4 · que te recomienden las IA: pregunta, piensa y te nombra */
.sg-il-ia{display:grid;align-content:center;gap:9%;padding:0 7%;background:linear-gradient(#fff,color-mix(in srgb,var(--c) 8%,#fff))}
.sg-iy{justify-self:end;padding:.45em .85em;border-radius:1em 1em .25em 1em;background:var(--ink);color:#fff;font-weight:600;white-space:nowrap;animation:sg-ia-yo 4.4s cubic-bezier(.2,1.2,.3,1) infinite}
.sg-ie{display:flex;align-items:flex-end;gap:.5em}
.sg-iav{display:grid;place-items:center;flex:none;width:2em;aspect-ratio:1;border-radius:50%;background:var(--c);color:#fff;font-style:normal;font-size:.9em}
.sg-ib{position:relative;padding:.5em .85em;border-radius:1em 1em 1em .25em;background:#fff;box-shadow:0 0 0 1.5px rgba(17,17,17,.12);font-weight:600;white-space:nowrap}
.sg-ipts{position:absolute;left:.85em;top:50%;display:flex;gap:3px;translate:0 -50%;animation:sg-ia-pts 4.4s infinite}
.sg-ipts > i{width:5px;height:5px;border-radius:50%;background:rgba(17,17,17,.4);animation:sg-pt 1s ease-in-out infinite}
.sg-ipts > i:nth-child(2){animation-delay:.15s}.sg-ipts > i:nth-child(3){animation-delay:.3s}
.sg-it{display:inline;animation:sg-ia-t 4.4s infinite}
.sg-it > b{padding:0 .25em;border-radius:4px;background:color-mix(in srgb,var(--k) 32%,#fff);font-weight:900}
@keyframes sg-ia-yo{0%{opacity:0;translate:0 40%}8%,90%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes sg-ia-pts{0%,12%{opacity:0}16%,36%{opacity:1}40%,100%{opacity:0}}
@keyframes sg-ia-t{0%,38%{opacity:0}46%,90%{opacity:1}100%{opacity:0}}
/* 5 · tu web, por dentro: la aguja va a verde y se marcan las tres */
.sg-il-w{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7%;padding:0 8%}
.sg-w-reloj{width:calc(var(--u)*9);min-width:72px;height:auto;overflow:visible}
.sg-w-arco{fill:none;stroke:rgba(17,17,17,.09);stroke-width:9;stroke-linecap:round}
.sg-w-arco-on{fill:none;stroke:var(--c);stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:sg-w-arco 4s cubic-bezier(.3,0,.2,1) infinite}
.sg-w-aguja{transform-box:view-box;transform-origin:50px 52px;rotate:-82deg;animation:sg-w-aguja 4s cubic-bezier(.3,0,.2,1) infinite}
.sg-w-aguja > path{stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.sg-w-aguja > circle{fill:var(--ink)}
.sg-w-cks{display:grid;gap:.45em}
.sg-w-ck{display:flex;align-items:center;gap:.55em;font-weight:700;white-space:nowrap}
.sg-w-ck > i{display:grid;place-items:center;width:1.55em;aspect-ratio:1;border-radius:50%;background:var(--c);color:#fff;font-style:normal;font-size:.8em;font-weight:900;scale:0;animation:sg-w-ck 4s cubic-bezier(.2,1.5,.4,1) infinite}
.sg-w-ck:nth-child(2) > i{animation-delay:.2s}.sg-w-ck:nth-child(3) > i{animation-delay:.4s}
@keyframes sg-w-arco{0%,8%{stroke-dashoffset:100}40%,86%{stroke-dashoffset:4}100%{stroke-dashoffset:100}}
@keyframes sg-w-aguja{0%,8%{rotate:-82deg}40%,86%{rotate:74deg}100%{rotate:-82deg}}
@keyframes sg-w-ck{0%,38%{scale:0}48%,86%{scale:1}96%,100%{scale:0}}
/* 6 · un informe cada mes: la hoja, las barras que crecen y «Ha subido» */
.sg-il-i{display:grid;place-items:center;background:color-mix(in srgb,var(--c) 6%,#fff)}
.sg-i-hoja{display:grid;grid-template-rows:auto minmax(0,1fr);gap:9%;width:50%;height:80%;padding:6% 8%;border-radius:5px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.1),0 6px 14px rgba(17,17,17,.08);rotate:-3deg}
.sg-i-cab{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;font-size:.82em;padding-bottom:.3em;border-bottom:1px solid var(--ink)}
.sg-i-cab > b{font-weight:900;font-stretch:125%}
.sg-i-cab > span{font-family:'DM Mono',monospace;font-size:.85em;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.sg-i-barras{display:flex;align-items:flex-end;gap:8%;min-height:0}
.sg-i-barras > i{flex:1;height:calc(var(--v)*100%);border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--c) 38%,#fff);transform-origin:50% 100%;animation:sg-i-barra 3.8s cubic-bezier(.2,1.2,.3,1) infinite}
.sg-i-barras > i:nth-child(2){animation-delay:.1s}.sg-i-barras > i:nth-child(3){animation-delay:.2s}.sg-i-barras > i:nth-child(4){animation-delay:.3s}
.sg-i-barras > i:nth-child(5){background:var(--k);animation-delay:.4s}
.sg-i-chip{position:absolute;right:7%;top:13%;padding:.35em .75em;border-radius:99px;background:var(--c);color:#fff;font-weight:800;font-size:.92em;white-space:nowrap;rotate:6deg;scale:0;animation:sg-i-chip 3.8s cubic-bezier(.2,1.5,.4,1) infinite}
@keyframes sg-i-barra{0%{scale:1 0}22%,86%{scale:1 1}100%{scale:1 0}}
@keyframes sg-i-chip{0%,34%{scale:0}44%,86%{scale:1}96%,100%{scale:0}}

/* ---------- 5 · cómo trabajamos: del puesto 5 al 1 ---------- */
.sg-escalera{height:calc(var(--alto)*4);background:var(--ink);color:var(--cream)}
.sg-escalera .sv-pin{--pw:max(44px,calc(var(--u)*5.4));--izq:min(calc(var(--u)*12),10vw);--suelo:calc(var(--u)*2.6)}
.sg-es-cab{position:absolute;left:var(--pad);top:calc(70px + var(--u)*2.2);display:grid;justify-items:start;gap:calc(var(--u)*1.3);width:min(calc(var(--u)*50),40vw)}
.sg-es-cab > .ojo{opacity:.6}
.sg-es-cab > h2{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*4.4),3vw);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.sg-es-cab > p{max-width:15em;font-weight:600;font-size:max(14px,calc(var(--u)*1.5));line-height:1.3;opacity:.72}
/* cinco peldaños, cada uno más alto, sobre una línea de suelo */
.sg-es-l{position:absolute;left:calc(var(--pad) + var(--izq));right:var(--pad);top:calc(70px + var(--u)*2);bottom:var(--suelo);list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:calc(var(--u)*.8)}
.sg-es-l::after{content:'';position:absolute;left:calc(var(--izq)*-1);right:0;bottom:-1.5px;height:1.5px;background:rgba(243,238,228,.2)}
.sg-pe{--hb:calc(var(--alto)*(.1 + var(--k)*.085));position:relative;height:var(--hb)}
.sg-pe-b{--m:calc(var(--u)*1.2);position:relative;height:100%;border-radius:calc(var(--u)*1) calc(var(--u)*1) 0 0;background:#1a1a1a;box-shadow:inset 0 0 0 1.5px rgba(243,238,228,.13);overflow:hidden;container-type:size;transition:background .5s,box-shadow .5s}
.sg-pe-b::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--u)*.5);background:rgba(243,238,228,.1);transition:background .5s}
.sg-pe-b::after{content:'';position:absolute;left:50%;top:0;width:70%;height:calc(var(--u)*5);translate:-50% -50%;background:radial-gradient(closest-side,rgba(255,189,33,.5),transparent);opacity:0;transition:opacity .5s}
/* en cada peldaño: arriba su nombre y su icono; abajo, su puesto, tan grande como quepa (crece con la altura) */
.sg-pe-t{position:absolute;left:var(--m);top:calc(var(--u)*1.25);font-size:max(9.5px,calc(var(--u)*.82));opacity:.5;white-space:nowrap;transition:opacity .5s,color .5s}
@container (max-width:150px){.sg-pe-t{display:none}}
.sg-pe-ic{position:absolute;right:calc(var(--u)*1.05);top:calc(var(--u)*1);width:max(15px,calc(var(--u)*1.6));height:max(15px,calc(var(--u)*1.6));stroke-width:1.7;color:rgba(243,238,228,.42);transition:color .5s}
/* el alto que deja la etiqueta de arriba, o el ancho del peldaño (un «5º» mide .95em; el «1º», .87em) */
.sg-pe-n{--an:.96;position:absolute;left:calc(var(--m) - .04em);bottom:calc(var(--u)*.8);font-weight:900;font-stretch:125%;font-size:max(24px,min(calc((100cqh - var(--u)*4.1)*1.35),calc((100cqw - var(--m)*2)/var(--an))));line-height:.74;letter-spacing:-.05em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(243,238,228,.42);transition:color .5s,-webkit-text-stroke-color .5s}
.sg-pe-n > span{font-size:.42em;vertical-align:.9em;margin-left:.04em;-webkit-text-stroke-width:1px}
.sg-pe:last-child .sg-pe-n{--an:.88}
.sg-pe.hecho .sg-pe-b{background:color-mix(in srgb,var(--c) 42%,#111)}
.sg-pe.hecho .sg-pe-n{color:rgba(243,238,228,.6);-webkit-text-stroke-color:transparent}
.sg-pe.hecho .sg-pe-t{opacity:.72}
.sg-pe.hecho .sg-pe-ic{color:rgba(243,238,228,.62)}
.sg-pe.on .sg-pe-b{background:var(--c);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 70%,#fff)}
.sg-pe.on .sg-pe-b::before{background:var(--girasol)}
.sg-pe.on .sg-pe-b::after{opacity:1;transition-delay:.55s}
.sg-pe.on .sg-pe-n{color:var(--cream);-webkit-text-stroke-color:transparent}
.sg-pe.on .sg-pe-t{opacity:.9}
.sg-pe.on .sg-pe-ic{color:var(--girasol)}
/* arriba del todo, el puesto 1 se pone girasol */
.sg-pe:last-child.on .sg-pe-b{background:var(--girasol);box-shadow:none}
.sg-pe:last-child.on .sg-pe-b::before{background:rgba(255,255,255,.5)}
.sg-pe:last-child.on :is(.sg-pe-n,.sg-pe-t,.sg-pe-ic){color:var(--ink)}
/* el texto del paso: encima del peldaño (y de la chincheta), solo el de ahora */
.sg-pe-txt{position:absolute;z-index:2;left:0;bottom:calc(100% + var(--pw)*1.18 + var(--u)*1.3);display:grid;justify-items:start;gap:calc(var(--u)*.55);width:max(100%,calc(var(--u)*34));opacity:0;translate:0 calc(var(--u)*1.6);transition:opacity .3s,translate .6s cubic-bezier(.2,1,.3,1)}
.sg-pe:last-child .sg-pe-txt{left:auto;right:0;width:max(100%,calc(var(--u)*40))}
.sg-pe.on .sg-pe-txt{opacity:1;translate:0 0;transition:opacity .45s .32s,translate .8s cubic-bezier(.2,1,.3,1) .32s}
.sg-pe-txt > .mono{font-size:max(10px,calc(var(--u)*.88));color:var(--girasol)}
.sg-pe-txt > b{font-weight:900;font-stretch:112%;font-size:max(19px,calc(var(--u)*2.5));line-height:1;letter-spacing:-.02em}
.sg-pe-txt > p{max-width:24em;font-weight:500;font-size:max(14px,calc(var(--u)*1.35));line-height:1.35;opacity:.8}
/* la chincheta salta de peldaño en peldaño (la coloca seo-geo.js) */
.sg-es-chin{position:absolute;left:0;top:0;z-index:3;width:var(--pw);pointer-events:none}
.sg-es-chin.listo{transition:transform .75s cubic-bezier(.45,0,.25,1)}
.sg-es-chin > img{display:block;width:100%;height:auto;transform-origin:31% 79%}
.sg-es-chin.salta > img{animation:sg-salto .75s cubic-bezier(.3,0,.3,1)}
@keyframes sg-salto{0%{translate:0 0;scale:1}14%{translate:0 0;scale:1.1 .86}50%{translate:0 calc(var(--u)*-6.5);scale:.94 1.08}84%{translate:0 0;scale:1.12 .86}100%{translate:0 0;scale:1}}

/* ---------- 6 · el informe de cada mes: un documento de verdad ---------- */
.sg-informe{height:var(--alto);display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1.66fr);align-items:center;gap:calc(var(--u)*4);padding:calc(70px + var(--u)*1.2) var(--pad) calc(var(--u)*2.6);background:var(--cream);color:var(--ink)}
.sg-in-cab{display:grid;justify-items:start;gap:calc(var(--u)*1.6)}
.sg-in-cab > .ojo{opacity:.6}
.sg-in-cab > h2{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*5.2),3.3vw);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.sg-in-cab > p{max-width:15em;font-weight:600;font-size:max(14px,calc(var(--u)*1.5));line-height:1.3;opacity:.72}
.sg-doc{position:relative;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr) minmax(0,.9fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:calc(var(--u)*1.3) calc(var(--u)*1.8);height:100%;padding:calc(var(--u)*1.5) calc(var(--u)*2) calc(var(--u)*1.1);border-radius:calc(var(--u)*.7);background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 calc(var(--u)*.3) calc(var(--u)*.8) rgba(17,17,17,.06),0 calc(var(--u)*2.4) calc(var(--u)*5) rgba(17,17,17,.12)}
/* el documento se mide por su ancho: en pantallas altas y estrechas, la --u de la página lo apretaría */
@media (min-width:981px){.sg-doc{--u:min(.7vw,1.72svh)}}
/* la hoja de debajo asoma un poco: es un informe de varias */
.sg-doc::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#f8f5ef;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 calc(var(--u)*1) calc(var(--u)*2) rgba(17,17,17,.06);rotate:.7deg;translate:calc(var(--u)*.4) calc(var(--u)*.45)}
.sg-doc .mono{font-size:max(9.5px,calc(var(--u)*.84));opacity:.6}
.sg-doc-cab{grid-column:1/-1;display:flex;align-items:center;gap:calc(var(--u)*2);padding-bottom:calc(var(--u)*1.1);border-bottom:2px solid var(--ink)}
.sg-doc-logo{font-weight:900;font-stretch:125%;font-size:max(16px,calc(var(--u)*2));letter-spacing:-.01em;line-height:1}
.sg-doc-tit{display:grid;gap:3px;padding-left:calc(var(--u)*2);border-left:1px solid rgba(17,17,17,.15)}
.sg-doc-tit > b{font-weight:800;font-size:max(13px,calc(var(--u)*1.3));line-height:1.1}
.sg-doc-tit > .mono > em{font-style:normal;padding:.15em .55em;border-radius:99px;background:var(--k);color:var(--ink)}
.sg-doc-cli{margin-left:auto;display:flex;align-items:center;gap:calc(var(--u)*.9);text-align:right}
.sg-doc-cli > span > b{display:block;font-weight:800;font-size:max(13px,calc(var(--u)*1.3));line-height:1.1}
.sg-doc-cli .mono{text-transform:none;letter-spacing:.04em}
.sg-doc-cli > .sg-fav{order:2}
.sg-doc-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1.2)}
.sg-kpi{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:calc(var(--u)*1);row-gap:calc(var(--u)*.55);padding:calc(var(--u)*1.15) calc(var(--u)*1.4);border-radius:calc(var(--u)*.8);background:color-mix(in srgb,var(--c) 6%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 13%,transparent)}
.sg-kpi > .mono{grid-column:1/-1}
.sg-cifra{display:flex;align-items:baseline;gap:calc(var(--u)*.7);font-weight:900;font-stretch:120%;line-height:.9;letter-spacing:-.03em;white-space:nowrap}
.sg-cifra > s{font-size:max(15px,calc(var(--u)*1.8));text-decoration-thickness:2px;opacity:.3}
.sg-cifra > i{font-style:normal;font-size:max(13px,calc(var(--u)*1.4));color:var(--c)}
.sg-cifra > b{display:inline-block;font-size:max(28px,calc(var(--u)*3.9));color:var(--c)}
.sg-kpi-g{width:calc(var(--u)*10.5);min-width:72px;height:calc(var(--u)*3.6);min-height:26px}
.sg-kpi-n{grid-column:1/-1;font-size:max(11px,calc(var(--u)*.98));opacity:.62}
.sg-kpi-l{overflow:visible}
.sg-kpi-l .sg-ar{fill:color-mix(in srgb,var(--c) 15%,transparent)}
.sg-kpi-l .sg-ln{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sg-kpi-b{display:flex;align-items:flex-end;gap:10%}
.sg-kpi-b > i{flex:1;height:calc(var(--v)*100%);border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--c) 32%,#fff);transform-origin:50% 100%}
.sg-kpi-b > i:last-child{background:var(--c)}
.sg-kpi-d{display:flex;align-items:center;justify-content:space-between}
.sg-kpi-d > i{display:grid;place-items:center;width:max(12px,calc(var(--u)*1.45));aspect-ratio:1;border-radius:50%;background:rgba(17,17,17,.07);color:rgba(17,17,17,.32);font-style:normal;font-weight:900;font-size:max(7px,calc(var(--u)*.7))}
.sg-kpi-d > i.sg-si{background:var(--c);color:#fff}
.sg-doc-tabla,.sg-doc-graf,.sg-doc-hecho{display:grid;align-content:start;gap:calc(var(--u)*.8);min-height:0}
.sg-doc-tabla{grid-template-rows:auto minmax(0,1fr)}
.sg-doc-tabla > table{width:100%;height:100%;border-collapse:collapse;font-size:max(11.5px,calc(var(--u)*1.06))}
.sg-doc-tabla th{padding:0 0 .55em;border-bottom:1px solid rgba(17,17,17,.16);font:500 max(9px,calc(var(--u)*.78)) 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;text-align:left;opacity:.55}
.sg-doc-tabla td{padding:.46em 0;border-bottom:1px solid rgba(17,17,17,.07);white-space:nowrap}
.sg-doc-tabla :is(th,td) + :is(th,td){width:1%;text-align:right;padding-left:1.4em}
.sg-doc-tabla td:first-child{font-weight:600}
.sg-doc-tabla td:nth-child(2){opacity:.42;font-variant-numeric:tabular-nums}
.sg-doc-tabla td > b{font-weight:900;color:var(--c)}
.sg-doc-tabla td > em{display:inline-block;min-width:5.2em;margin-left:.6em;padding:.15em .5em;border-radius:99px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font:500 max(9px,calc(var(--u)*.76)) 'DM Mono',monospace;font-style:normal;letter-spacing:.04em;text-align:center}
.sg-doc-tabla tr.sg-sig > td{color:rgba(17,17,17,.55)}
.sg-doc-tabla tr.sg-sig > td > b{color:rgba(17,17,17,.4)}
.sg-doc-tabla tr.sg-sig > td > em{background:var(--ink);color:var(--cream)}
.sg-doc-graf{--ej:max(26px,calc(var(--u)*2.7));grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch}
/* la cabecera de la gráfica: el título y, a la derecha, el dato del último mes */
.sg-doc-graf-t{display:flex;justify-content:space-between;align-items:baseline;gap:1em}
.sg-doc-graf-t > b{font-weight:900;font-stretch:112%;font-size:max(13px,calc(var(--u)*1.3));line-height:1;color:var(--c);white-space:nowrap}
.sg-doc-graf-t > b > span{font-weight:600;font-stretch:100%;font-size:.78em;color:rgba(17,17,17,.55)}
.sg-doc-lienzo{position:relative;min-height:0}
.sg-doc-lienzo > svg{position:absolute;inset:0 0 0 var(--ej);width:calc(100% - var(--ej));height:100%;overflow:visible}
/* el eje: las visitas de cada línea de la rejilla */
.sg-doc-ejes{position:absolute;left:0;top:0;bottom:0;width:var(--ej)}
.sg-doc-ejes > span{position:absolute;left:0;translate:0 -50%;font-size:max(8.5px,calc(var(--u)*.74))}
.sg-doc-ejes > span:nth-child(1){top:25%}.sg-doc-ejes > span:nth-child(2){top:50%}.sg-doc-ejes > span:nth-child(3){top:75%}
.sg-doc-graf > .sg-doc-meses{padding-left:var(--ej)}
.sg-doc-lienzo .sg-rej{fill:none;stroke:rgba(17,17,17,.2);stroke-width:1;stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.sg-doc-lienzo .sg-ar{fill:color-mix(in srgb,var(--c) 13%,transparent)}
.sg-doc-lienzo .sg-ln{fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sg-doc-punto{position:absolute;right:0;top:7.5%;width:10px;height:10px;margin:-5px -5px 0 0;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--c)}
.sg-doc-meses{display:flex;justify-content:space-between}
.sg-doc-hecho{padding:calc(var(--u)*1.2) calc(var(--u)*1.4);border-radius:calc(var(--u)*.8);background:var(--ink);color:var(--cream)}
.sg-doc-hecho > .mono{opacity:.62}
.sg-doc-hecho > ul{list-style:none;padding:0;display:grid;gap:calc(var(--u)*.45);margin-bottom:calc(var(--u)*.5)}
.sg-doc-hecho > ul > li{display:flex;gap:.55em;font-weight:600;font-size:max(12px,calc(var(--u)*1.06));line-height:1.3}
.sg-doc-hecho > ul > li::before{content:'✓';color:var(--girasol);font-weight:900}
.sg-doc-hecho > p{font-weight:600;font-size:max(12px,calc(var(--u)*1.06));line-height:1.38}
/* abajo del todo, cuándo llega el siguiente */
.sg-doc-hecho{grid-template-rows:repeat(4,auto) minmax(0,1fr)}
.sg-doc-prox{align-self:end;display:flex;align-items:center;gap:.6em;margin-top:calc(var(--u)*.4);padding-top:calc(var(--u)*.9);border-top:1px solid rgba(243,238,228,.16);font-weight:700;font-size:max(11.5px,calc(var(--u)*1))}
.sg-doc-prox > .sg-ic{width:1.3em;height:1.3em;color:var(--girasol)}
.sg-doc-pie{grid-column:1/-1;display:flex;justify-content:space-between;gap:1em;padding-top:calc(var(--u)*.8);border-top:1px solid rgba(17,17,17,.1)}
.sg-doc-pie.mono{font-size:max(9px,calc(var(--u)*.76));opacity:.5}
/* al verse: la hoja llega, las cifras saltan, las gráficas se dibujan y las filas entran */
.sg-doc{translate:0 calc(var(--u)*4);rotate:-1deg;opacity:0;transition:opacity .7s,translate 1s cubic-bezier(.2,1,.3,1),rotate 1s cubic-bezier(.2,1,.3,1)}
.sg-doc.vis{translate:0 0;rotate:0deg;opacity:1}
.sg-cifra > b{scale:.4;opacity:0;transition:scale .6s cubic-bezier(.2,1.5,.4,1),opacity .3s}
.sg-doc.vis .sg-cifra > b{scale:1;opacity:1;transition-delay:.75s}
.sg-doc.vis .sg-kpi:nth-child(2) .sg-cifra > b{transition-delay:.9s}.sg-doc.vis .sg-kpi:nth-child(3) .sg-cifra > b{transition-delay:1.05s}
.sg-kpi-l,.sg-doc-lienzo > svg{clip-path:inset(-10% 100% -10% 0);transition:clip-path 1.6s cubic-bezier(.5,0,.2,1) .7s}
.sg-doc.vis :is(.sg-kpi-l,.sg-doc-lienzo > svg){clip-path:inset(-10% -4% -10% 0)}
.sg-kpi-b > i{scale:1 0;transition:scale .8s cubic-bezier(.2,1.2,.3,1)}
.sg-doc.vis .sg-kpi-b > i{scale:1 1}
.sg-doc.vis .sg-kpi-b > i{transition-delay:calc(.8s + var(--v)*.3s)}
.sg-doc-tabla tbody > tr{opacity:0;translate:calc(var(--u)*-1.5) 0;transition:opacity .45s,translate .6s cubic-bezier(.2,1,.3,1)}
.sg-doc.vis .sg-doc-tabla tbody > tr{opacity:1;translate:0 0}
.sg-doc.vis .sg-doc-tabla tbody > tr:nth-child(1){transition-delay:.6s}.sg-doc.vis .sg-doc-tabla tbody > tr:nth-child(2){transition-delay:.7s}.sg-doc.vis .sg-doc-tabla tbody > tr:nth-child(3){transition-delay:.8s}.sg-doc.vis .sg-doc-tabla tbody > tr:nth-child(4){transition-delay:.9s}.sg-doc.vis .sg-doc-tabla tbody > tr:nth-child(5){transition-delay:1s}.sg-doc.vis .sg-doc-tabla tbody > tr:nth-child(6){transition-delay:1.1s}
.sg-doc-punto{scale:0;transition:scale .5s cubic-bezier(.2,1.6,.4,1)}
.sg-doc.vis .sg-doc-punto{scale:1;transition-delay:2.1s}

/* ---------- 7 · preguntas: la gente también pregunta ---------- */
.sg-preguntas{min-height:var(--alto);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);background:var(--paper);color:var(--ink)}
.sg-pr-cab{display:grid;justify-items:start;gap:calc(var(--u)*1.8)}
.sg-pr-cab > .ojo{opacity:.6}
.sg-pr-cab > h2{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*6.2),3.6vw);line-height:.84;letter-spacing:-.03em;text-transform:uppercase}
.sg-pr-cab > p{max-width:17em;font-weight:600;font-size:max(15px,calc(var(--u)*1.6));line-height:1.3;opacity:.75}
.sg-paa{padding:calc(var(--u)*.4) calc(var(--u)*2.2) calc(var(--u)*.6);border-radius:calc(var(--u)*1.8);background:#fff;box-shadow:0 0 0 1.5px rgba(17,17,17,.1),0 calc(var(--u)*1) calc(var(--u)*3) rgba(17,17,17,.07)}
.sg-paa-cab{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*1.4) 0 calc(var(--u)*1.1)}
.sg-paa-cab > b{font-weight:800;font-size:max(16px,calc(var(--u)*1.75));letter-spacing:-.01em}
.sg-paa-cab > .sg-ic{width:20px;height:20px;fill:currentColor;stroke:none;opacity:.45}
.sg-paa-it{border-top:1px solid rgba(17,17,17,.12)}
.sg-paa-h{font:inherit}
.sg-paa-q{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:calc(var(--u)*1.35) 0;cursor:pointer;font-weight:700;font-size:max(15px,calc(var(--u)*1.6));line-height:1.2;transition:color .3s}
.sg-paa-q > .sg-ic{width:1.15em;height:1.15em;color:rgba(17,17,17,.55);transition:scale .45s cubic-bezier(.2,1,.3,1),color .3s}
.sg-paa-q:hover{color:var(--c)}
/* la flecha se voltea (sin girar: girando, de lado, ocupa más que su hueco) */
.sg-paa-q[aria-expanded="true"] > .sg-ic{scale:1 -1;color:var(--c)}
.sg-paa-q:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:6px}
.sg-paa-r{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1),visibility 0s .5s}
.sg-paa-r > div{min-height:0;overflow:hidden}
.sg-paa-it.abierta .sg-paa-r{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1),visibility 0s}
/* la respuesta destacada, con su fuente */
.sg-dest{display:grid;justify-items:start;gap:calc(var(--u)*1.1);margin:0 0 calc(var(--u)*1.5);padding:calc(var(--u)*1.4) calc(var(--u)*1.7);border-radius:calc(var(--u)*1.2);background:color-mix(in srgb,var(--c) 6%,#fff);box-shadow:inset 3px 0 0 var(--c);opacity:0;translate:0 -8px;transition:opacity .3s,translate .5s cubic-bezier(.2,1,.3,1)}
.sg-paa-it.abierta .sg-dest{opacity:1;translate:0 0;transition-delay:.12s}
.sg-dest > p{max-width:40em;font-weight:500;font-size:max(14px,calc(var(--u)*1.42));line-height:1.45}
/* como en un buscador, la respuesta destacada lleva su imagen a la derecha */
.sg-dest{grid-template-columns:minmax(0,1fr) auto;column-gap:calc(var(--u)*2.4)}
.sg-dest > :not(.sg-dest-il){grid-column:1}
.sg-dest-il{position:relative;grid-column:2;grid-row:1/span 2;align-self:center;display:grid;place-items:center;width:max(64px,calc(var(--u)*7.4));aspect-ratio:1;border-radius:calc(var(--u)*1.1);background:var(--c);color:var(--cream);overflow:hidden;scale:.6;opacity:0;transition:scale .3s,opacity .2s}
.sg-dest-il::before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(ellipse 90% 70% at 50% 85%,transparent 0 7px,rgba(243,238,228,.14) 7px 8px)}
.sg-dest-il > .sg-ic{position:relative;width:44%;height:44%;stroke-width:1.7}
.sg-paa-it.abierta .sg-dest-il{scale:1;opacity:1;transition:scale .6s cubic-bezier(.2,1.5,.4,1) .3s,opacity .3s .3s}
.sg-dest a{color:var(--c);font-weight:700;text-underline-offset:3px}
.sg-fuente{display:flex;align-items:center;gap:.7em}
.sg-fuente > span > b{display:block;font-weight:800;font-size:max(12px,calc(var(--u)*1.12));line-height:1.1}
.sg-fuente .mono{font-size:max(9.5px,calc(var(--u)*.84));opacity:.6;text-transform:none;letter-spacing:.04em}

/* ---------- 8 · el cierre: el primer resultado ---------- */
.sg-cierre{height:var(--alto);display:grid;place-items:center;padding:calc(70px + var(--u)*1.4) var(--pad) calc(var(--u)*2.8);background:var(--girasol);color:var(--ink)}
.sg-cierre::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%)}
/* la cima: curvas de nivel muy suaves alrededor de la barra, que respiran como las del camino */
.sg-cierre::after{content:'';position:absolute;inset:-8%;z-index:-1;background:repeating-radial-gradient(ellipse 64% 50% at 50% 40%,transparent 0 calc(var(--u)*2.6),rgba(17,17,17,.075) calc(var(--u)*2.6) calc(var(--u)*2.6 + 1.5px));-webkit-mask:radial-gradient(ellipse 60% 64% at 50% 42%,transparent 30%,#000 52%,transparent 96%);mask:radial-gradient(ellipse 60% 64% at 50% 42%,transparent 30%,#000 52%,transparent 96%);animation:sg-respira 18s ease-in-out infinite alternate}
.sg-ci{display:grid;justify-items:start;gap:calc(var(--u)*1.3);width:min(100%,calc(var(--u)*96))}
.sg-ci-bus{display:flex;align-items:center;gap:calc(var(--u)*2);width:100%;height:max(64px,calc(var(--u)*10.5));padding:0 calc(var(--u)*1.4) 0 calc(var(--u)*3);border-radius:99px;background:#fff;box-shadow:0 0 0 2px var(--ink),0 calc(var(--u)*1) 0 var(--ink)}
.sg-ci-bus > .sg-ic{width:max(22px,calc(var(--u)*3.4));height:max(22px,calc(var(--u)*3.4));stroke-width:2.2;color:rgba(17,17,17,.5)}
.sg-ci-bus > h2{display:flex;align-items:center;min-width:0;font-weight:900;font-stretch:118%;font-size:min(calc(var(--u)*6.4),5.2vw);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.sg-ci-bus .sg-caret{width:.06em;min-width:2px;height:.92em;margin-left:.06em;background:var(--c)}
.sg-ci-ir{margin-left:auto;display:grid;place-items:center;flex:none;width:max(48px,calc(var(--u)*7.6));aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--girasol)}
.sg-ci-ir > .sg-ic{width:42%;height:42%;stroke-width:2.2}
.sg-ci-info{display:flex;align-items:center;gap:.8em;margin:calc(var(--u)*.6) 0 0 calc(var(--u)*1.2);font-size:max(10px,calc(var(--u)*.92));color:rgba(17,17,17,.75)}
/* el número del puesto, como en la lista de «Por qué importa» */
.sg-ci-info > i{display:grid;place-items:center;width:max(22px,calc(var(--u)*2.3));aspect-ratio:1;border-radius:50%;background:var(--c);color:#fff;font-style:normal;font-weight:500}
.sg-ci-res{display:grid;grid-template-columns:minmax(0,1fr) auto;justify-items:start;column-gap:calc(var(--u)*3);row-gap:calc(var(--u)*.85);width:100%;padding:calc(var(--u)*2.1) calc(var(--u)*2.4) calc(var(--u)*2.1) calc(var(--u)*3);border-radius:calc(var(--u)*2.2);background:var(--cream);box-shadow:0 0 0 2px var(--ink)}
.sg-ci-res > :not(.sg-ci-mini){grid-column:1}
.sg-ci-ruta{display:flex;align-items:center;gap:.7em}
.sg-ci-ruta > span > b{display:block;font-weight:800;font-size:max(12px,calc(var(--u)*1.15));line-height:1.1}
.sg-ci-ruta .mono{font-size:max(9.5px,calc(var(--u)*.86));opacity:.6;text-transform:none;letter-spacing:.04em}
.sg-ci-res > h3{font-weight:900;font-stretch:112%;font-size:max(20px,calc(var(--u)*3));line-height:1;letter-spacing:-.02em;color:var(--c)}
.sg-ci-res > p{max-width:34em;font-weight:600;font-size:max(15px,calc(var(--u)*1.55));line-height:1.35}
.sg-ci-bt{display:inline-flex;align-items:center;gap:calc(var(--u)*1.4);margin-top:calc(var(--u)*.4);padding:calc(var(--u)*1.25) calc(var(--u)*1.3) calc(var(--u)*1.25) calc(var(--u)*2.4);border-radius:99px;background:var(--ink);color:var(--girasol);font:500 max(12px,calc(var(--u)*1.25)) 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:scale .3s cubic-bezier(.2,1.4,.4,1)}
.sg-ci-bt > i{display:grid;place-items:center;width:max(32px,calc(var(--u)*3.4));aspect-ratio:1;border-radius:50%;background:var(--girasol);color:var(--ink);font-style:normal;font-size:1.3em;transition:rotate .4s cubic-bezier(.2,1.4,.4,1)}
.sg-ci-bt:hover{scale:1.04}
.sg-ci-bt:hover > i{rotate:-45deg}
.sg-ci-bt:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.sg-ci-sl{display:flex;flex-wrap:wrap;gap:.4em 1.4em;margin-top:calc(var(--u)*.3);padding-top:calc(var(--u)*1);border-top:1px solid rgba(17,17,17,.12);font-weight:700;font-size:max(13px,calc(var(--u)*1.2))}
.sg-ci-sl > a{color:var(--c);text-decoration:none;text-underline-offset:3px}
.sg-ci-sl > a:hover{text-decoration:underline}
.sg-ci-sl > a:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:4px}
/* la miniatura del resultado: la chincheta, en su sitio */
.sg-ci-mini{position:relative;grid-column:2;grid-row:1/span 5;align-self:center;display:grid;place-items:center;width:calc(var(--u)*17);aspect-ratio:1;border-radius:calc(var(--u)*1.6);background:var(--c);overflow:hidden}
.sg-ci-mini::before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(ellipse 90% 70% at 50% 85%,transparent 0 9px,rgba(243,238,228,.14) 9px 10px)}
.sg-ci-mini > img{position:relative;width:46%;height:auto;rotate:-6deg;animation:bobcap 6.5s ease-in-out infinite}
/* llega: se escribe la pregunta y después sale el resultado */
.sg-ci-info,.sg-ci-res{opacity:0;translate:0 calc(var(--u)*3);transition:opacity .6s,translate .9s cubic-bezier(.2,1,.3,1)}
.sg-ci.escrito :is(.sg-ci-info,.sg-ci-res){opacity:1;translate:0 0}
.sg-ci.escrito .sg-ci-res{transition-delay:.12s}

/* lo que se repite en bucle se para cuando su sección no se ve (seo-geo.js pone .vista) */
.sg-porque:not(.vista) .sg-caret,.sg-cierre:not(.vista) .sg-caret,.sg-camino:not(.vista) :is(.sg-cn-topo,.sg-ban-tela),.sg-camino:not(.vista) .sg-il *,.sg-cierre:not(.vista) .sg-ci-mini > img,.sg-cierre:not(.vista)::after{animation-play-state:paused}

/* ---------- móvil ---------- */
@media (max-width:980px){
  /* por qué: la frase debajo del buscador; los resultados, en una línea */
  .sg-porque{height:calc(var(--alto)*2.4)}
  .sg-porque .sv-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:16px;padding:80px var(--pad) 18px}
  .sg-serp{--bh:42px;gap:9px}
  .sg-fil{padding:0 4px;gap:5px}
  .sg-fil > span{font-size:11px}
  .sg-fil > span:nth-child(4){display:none}
  .sg-bus{font-size:15px;padding:0 14px 0 16px}
  .sg-bus-der > .sg-ic:first-child,.sg-bus-sep{display:none}
  .sg-bus > .ej-tag{right:-4px;top:-13px}
  .sg-res{row-gap:2px;padding-bottom:4px}
  .sg-r{padding:0 8px;gap:9px}
  .sg-r .sg-fav{width:19px;min-width:19px;font-size:9px}
  .sg-r-u{display:none}
  .sg-r-c > b{font-size:13px}
  .sg-r-n{width:20px;min-width:20px;font-size:9.5px}
  .sg-pq-txt{gap:12px;align-content:start}
  .sg-frase{font-size:clamp(23px,6.8vw,40px)}
  .sg-ia-b{font-size:13px;padding:9px 13px 10px}
  .sg-ia-av{width:28px;min-width:28px}
  /* el camino: el sendero en zigzag en medio y la tarjeta abajo, siempre en el mismo sitio */
  .sg-camino{height:calc(var(--alto)*4.2)}
  .sg-cn-cab{top:80px;right:var(--pad);width:auto;gap:8px}
  .sg-cn-cab > h2{font-size:clamp(28px,8.2vw,42px)}
  .sg-cn-cab > p{max-width:none;font-size:14px}
  .sg-ban,.sg-cima-ban{--ph:30px;--th:18px;--tw:27px}
  .sg-cima-ban{--ph:40px;--th:24px;--tw:36px}
  .sg-cima-t{top:auto;bottom:30px;right:22px;font-size:clamp(26px,8vw,40px);transform-origin:100% 100%}
  .sg-cima-s{display:none}
  .sg-chin{width:42px}
  .sg-tj{width:calc(100% - var(--pad)*2);padding:8px;border-radius:16px}
  .sg-il{height:92px;min-height:0}
  .sg-tj-txt{gap:4px;padding:9px 6px 3px}
  .sg-tj-txt > b{font-size:17px}
  .sg-tj-txt > p{font-size:13px}
  /* la escalera: los peldaños a lo ancho y el texto encima de todos */
  .sg-escalera{height:calc(var(--alto)*3.6)}
  .sg-escalera .sv-pin{--pw:40px;--izq:0px;--suelo:20px}
  .sg-es-cab{top:80px;right:var(--pad);width:auto;gap:8px}
  .sg-es-cab > h2{font-size:clamp(30px,8.8vw,46px)}
  .sg-es-cab > p{font-size:14px;max-width:none}
  .sg-es-l{top:auto;height:calc(var(--alto)*.5);gap:5px}
  .sg-pe{--hb:calc(var(--alto)*(.08 + var(--k)*.085));position:static}
  .sg-pe-b{--m:7px;border-radius:9px 9px 0 0}
  .sg-pe-ic{right:7px;top:8px;width:14px;height:14px}
  .sg-pe-n{bottom:7px;font-size:max(22px,min(calc((100cqh - 34px)*1.3),calc((100cqw - 14px)/var(--an))))}
  .sg-pe-txt,.sg-pe:last-child .sg-pe-txt{left:0;right:0;width:auto;bottom:calc(100% + 18px)}
  .sg-pe-txt > b{font-size:21px}
  .sg-pe-txt > p{font-size:14px}
  /* el informe: una columna, a su altura */
  .sg-informe{height:auto;display:block;padding:90px var(--pad) 44px}
  .sg-in-cab{margin-bottom:24px}
  .sg-in-cab > h2{font-size:clamp(34px,10vw,52px)}
  .sg-doc{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto;gap:14px;padding:16px 16px 12px}
  .sg-doc-cab{flex-wrap:wrap;gap:10px 14px}
  .sg-doc-cli{width:100%;margin-left:0;justify-content:flex-start;text-align:left}
  .sg-doc-cli > .sg-fav{order:0}
  .sg-doc-kpis{grid-template-columns:minmax(0,1fr);gap:10px}
  .sg-doc-graf{height:190px}
  .sg-doc-pie{flex-wrap:wrap;gap:4px 12px}
  /* preguntas y cierre */
  .sg-preguntas{grid-template-columns:minmax(0,1fr);gap:24px;padding:90px var(--pad) 44px}
  .sg-pr-cab > h2{font-size:clamp(36px,10.4vw,56px)}
  .sg-paa{padding:2px 16px 6px}
  .sg-paa-q{gap:14px;font-size:15px}
  .sg-dest{padding:14px 15px}
  .sg-dest-il{display:none}
  .sg-cierre{height:auto;min-height:var(--alto);padding:90px var(--pad) 44px}
  .sg-ci{gap:12px}
  .sg-ci-bus{height:60px;gap:12px;padding:0 8px 0 18px}
  .sg-ci-bus > h2{font-size:clamp(23px,7.2vw,36px)}
  .sg-ci-ir{width:44px;min-width:0}
  .sg-ci-res{column-gap:14px;padding:18px 18px 18px 20px}
  .sg-ci-res > :is(p,.sg-ci-bt,.sg-ci-sl){grid-column:1/-1}
  .sg-ci-mini{grid-row:1/span 2;width:64px;border-radius:14px}
  .sg-ci-bt{gap:12px;padding:10px 10px 10px 18px;font-size:11.5px}
}

/* ---------- movimiento reducido: todo en su estado final, nada fijado ---------- */
@media (prefers-reduced-motion:reduce){
  .sg-porque,.sg-camino,.sg-escalera{height:auto}
  .sg-ia{opacity:1;translate:none}
  .sg-ia-pts{display:none}
  .sg-ia-t{display:block}
  .sg-cn-topo,.sg-cierre::after{animation:none}
  .sg-cn-esc{position:relative;height:var(--alto)}
  .sg-tjs{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1.4);padding:0 var(--pad) calc(var(--u)*4)}
  .sg-tj{position:relative;width:auto;opacity:1;scale:none;visibility:visible;translate:none}
  .sg-il,.sg-il *{animation:none}
  .sg-g-a,.sg-g-b{translate:0 125%}
  .sg-g-tu{translate:0 -250%}
  .sg-g-tu > em,.sg-w-ck > i,.sg-i-chip{scale:1}
  .sg-m-pin,.sg-m-ficha{opacity:1;translate:none;transform:none}
  .sg-m-onda{display:none}
  .sg-r-est > i{color:#f0b400}
  .sg-r-resp{opacity:1;translate:none}
  .sg-ipts{display:none}
  .sg-w-arco-on{stroke-dashoffset:4}
  .sg-w-aguja{rotate:74deg}
  .sg-escalera .sv-pin{display:grid;align-content:start;gap:calc(var(--u)*3);padding:calc(70px + var(--u)*2.2) var(--pad) var(--suelo)}
  .sg-es-cab{position:static;width:auto}
  .sg-es-l{position:relative;inset:auto;align-items:end}
  .sg-pe,.sg-pe:last-child{display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--u)*1.3);height:auto;position:relative}
  .sg-pe-b{flex:none;height:var(--hb)}
  .sg-pe-txt,.sg-pe:last-child .sg-pe-txt{position:static;width:auto;opacity:1;translate:none}
  .sg-pe:last-child .sg-pe-txt{margin-bottom:calc(var(--pw)*1.2)}
  .sg-doc,.sg-cifra > b,.sg-doc-tabla tbody > tr,.sg-doc-punto,.sg-ci-info,.sg-ci-res{opacity:1;translate:none;rotate:none;scale:none}
  .sg-kpi-l,.sg-doc-lienzo > svg{clip-path:none}
  .sg-kpi-b > i{scale:none}
  .sg-dest,.sg-dest-il{transition:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:980px){
  .sg-tjs{grid-template-columns:minmax(0,1fr)}
  .sg-tj{width:auto}
  /* la escalera, en lista: cada peldaño a la izquierda de su texto */
  .sg-es-l{height:auto;grid-template-columns:minmax(0,1fr);gap:14px}
  .sg-pe,.sg-pe:last-child{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:end;gap:14px}
  .sg-pe-b{order:-1;height:calc(38px + var(--k)*12px)}
  .sg-pe-n{font-size:22px}
  .sg-pe:last-child .sg-pe-txt{margin-bottom:0}
  .sg-es-chin{display:none}
}