/* ClickaCierre — la escultura de la portada (bloque «escultura» de la plantilla, 2026-09-30). Va después de
   landing.css y solo la carga la portada (render.mjs → p.estilos). La pieza viva del hero es la nube de puntos con tres
   formas (escultura.js) en lugar del celular del cliente: una excepción a §7.1 que decidió el usuario. Móvil primero. */

/* el H1 de la portada es más largo que el de un pilar: «Agencia de marketing digital» en tres líneas */
.hero-esc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* el tamaño sale del ancho de la columna: «Agencia de», la línea más larga, mide ~5,1 em */
.hero-esc .hero-copy{container-type:inline-size}
.hero-esc h1{font-size:clamp(50px,19cqi,118px);line-height:.88;letter-spacing:-.052em}
.hero-esc .thesis{max-width:26ch}

/* ------------------------------------------------ el lienzo */

.esc{position:relative;display:flex;flex-direction:column;gap:14px;margin:0}
.esc-stage{position:relative;width:100%;aspect-ratio:1/1;max-height:min(640px,calc(100svh - 190px));margin-inline:auto;touch-action:pan-y;color:rgba(16,26,43,.34)}
.esc-stage>canvas,.esc-fallback{position:absolute;inset:0;display:block;width:100%;height:100%}
#sculpture{pointer-events:none}
.esc.is-ready .esc-fallback{display:none}
/* un aro fino detrás, como las órbitas del inicio anterior: da escala a la nube sin encerrarla */
.esc-stage:before{content:'';position:absolute;inset:9% 7%;border:1px dashed rgba(16,26,43,.13);border-radius:50%;pointer-events:none}

/* el mensaje que acompaña a la forma: uno a la vez, lo que se pregunta el dueño y lo que consigue */
.esc-msg{position:absolute;left:5%;top:6%;z-index:2;display:flex;flex-direction:column;gap:7px;max-width:min(250px,60%);padding:11px 13px 12px;border:1px solid rgba(16,26,43,.12);border-radius:16px;background:rgba(250,251,245,.93);box-shadow:0 18px 36px -24px rgba(16,26,43,.5);pointer-events:none;will-change:opacity,transform}
.esc-q{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.esc-q .i{flex:none;width:14px;height:14px}
.esc-msg b{font:600 16px/1.25 var(--display);letter-spacing:-.01em;color:var(--paper)}

/* pausa (WCAG 2.2.2: lo que se mueve solo se puede detener) */
.esc-pause{position:absolute;right:6px;bottom:6px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(16,26,43,.16);border-radius:999px;background:rgba(250,251,245,.92);font:500 12.5px/1 var(--body);color:var(--soft);transition:border-color .2s,translate .2s var(--ease)}
.esc-pause:hover{border-color:var(--paper);translate:0 -2px}
.esc-pause i{position:relative;width:10px;height:10px}
.esc-pause i:before,.esc-pause i:after{content:'';position:absolute;top:0;bottom:0;width:3px;border-radius:1px;background:currentColor}
.esc-pause i:before{left:1px}
.esc-pause i:after{right:1px}
.esc-pause[aria-pressed=true] i:before{left:1px;width:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent currentColor;background:none}
.esc-pause[aria-pressed=true] i:after{display:none}

/* ------------------------------------------------ las tres formas: botones con su nombre y el avance del recorrido */

.esc-cap{display:flex;flex-direction:column;gap:10px}
.esc-cap>.label{color:var(--soft)}
.esc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.esc-steps li{display:flex}
.esc-steps button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:11px 12px 14px;border:1px solid rgba(16,26,43,.12);border-radius:14px;background:#fafbf5;text-align:left;overflow:hidden;box-shadow:inset 0 1px 0 #fff;transition:border-color .25s,background .25s,translate .25s var(--ease)}
.esc-steps i{padding:3px 6px 2px;border-radius:6px;font:700 11.5px/1 var(--mono);font-style:normal;color:var(--dim);transition:background .25s,color .25s}
.esc-steps span{font:600 14.5px/1.22 var(--display);letter-spacing:-.012em;color:var(--muted);transition:color .25s}
.esc-steps button[aria-pressed=true]{border-color:rgba(16,26,43,.5);background:#fff}
.esc-steps button[aria-pressed=true] i{background:var(--lime);color:var(--on-lime)}
.esc-steps button[aria-pressed=true] span{color:var(--paper)}
.esc-bar{position:absolute;left:0;right:0;bottom:0;display:block;height:3px;background:var(--lime);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.esc-steps button[aria-pressed=false] .esc-bar{opacity:0}
@media (hover:hover){
  .esc-steps button:hover{translate:0 -2px;border-color:rgba(16,26,43,.34)}
  .esc-steps button:hover span{color:var(--paper)}
}

/* ------------------------------------------------ entrada con el hero (regla §14: al cargar, solo el hero) */

.js-motion .esc-stage{animation:esc-in 1.5s var(--m-ease) .3s both}
.js-motion .esc-cap{animation:m-up 1s var(--m-ease) .9s both}
@keyframes esc-in{from{opacity:0;transform:scale(.9)}}

/* ------------------------------------------------ móvil primero: debajo del CTA, sin tapar el H1 ni el botón */

@media (max-width:980px){
  .hero-esc{grid-template-columns:1fr}
  .hero-esc .hero-visual{margin-top:-8px}
  .esc-stage{width:min(100%,560px);max-height:none}
}
@media (max-width:760px){
  .esc-stage{width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter))}
  .esc-stage:before{inset:6% 4%}
  .esc-msg{max-width:min(230px,64%);padding:10px 12px}
  .esc-msg b{font-size:15px}
  .esc-steps{gap:6px}
  .esc-steps button{padding:10px 10px 13px}
  .esc-steps span{font-size:13.5px}
  .esc-pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .esc-pause{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  .esc-bar{display:none}
}

/* ronda 1b (2026-09-30): H1 «Agencia de marketing digital, del clic al cierre». La cola va en su propia línea, más
   chica, para que el término principal siga llenando la columna */
.hero-esc h1 .h1-tail{display:block;margin-top:.22em;font-size:.4em;line-height:1;letter-spacing:-.035em}