/* ==========================================================================
   Sección «Voz y tono»: el orbe de puntos que habla (js/seccion-orbe.js monta js/orbe.js).
   Va entre «Cómo se contrata» y el cierre. No reemplaza la galaxia del inicio: se suma.
   ========================================================================== */
.voz{background:var(--negro);min-height:92vh;min-height:92svh;display:flex;align-items:center}
.voz__rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto 1fr;column-gap:24px;align-items:center}
.voz__escena{grid-column:1 / span 7;grid-row:1 / span 3;justify-self:center;display:flex;flex-direction:column;align-items:center}
.voz__cabeza{grid-column:8 / span 5;grid-row:1;align-self:end}
.voz__frase{grid-column:8 / span 5;grid-row:2 / span 2;align-self:start;margin-top:28px;min-height:3.12em;font:700 clamp(24px,2.7vw,40px)/1.04 var(--disp);letter-spacing:-.02em;color:var(--crema);text-wrap:balance;
  transition:opacity .21s ease,translate .5s var(--suave),filter .21s ease}
.voz__frase--sale{opacity:0;translate:0 10px;filter:blur(4px)}
.voz__orbe{position:relative;width:min(64vh,46vw);width:min(64svh,46vw);aspect-ratio:1}
.voz__lienzo{position:absolute;inset:0;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.voz__poster{position:absolute;left:28%;top:28%;width:44%;height:44%;fill:var(--rojo);transition:opacity .4s ease}
.voz--viva .voz__poster{opacity:0}
.voz__boton{position:absolute;inset:0;padding:0;border:0;border-radius:50%;background:none;pointer-events:none}
.voz__boton:focus-visible{outline:2px solid var(--rojo-vivo);outline-offset:-2px}
.voz__pista{position:relative;margin-top:-5%;text-align:center;font:600 13px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8C8885;transition:opacity .4s ease}
html:not(.js) .voz__pista{display:none}
.voz--tocada .voz__pista{opacity:.35}
.voz .voz__pausa{top:auto;bottom:28px}

@media (max-width:1023px){
  .voz__rejilla{display:flex;flex-direction:column;align-items:stretch}
  .voz__cabeza,.voz__frase{align-self:stretch}
  .voz__escena{align-self:center;margin-top:8px}
  .voz__orbe{width:min(86vw,46vh);width:min(86vw,46svh)}
  .voz__frase{margin-top:22px;min-height:2.08em;text-align:center}
  .voz__pista{letter-spacing:.12em;text-wrap:balance}
  .voz{padding-bottom:calc(var(--sec) + 40px)}
}
@media (prefers-reduced-motion:reduce){.voz__frase--sale{translate:none;filter:none}}
@media print{.voz__pausa,.voz__pista{display:none!important}}