.pieza--celular { --recorrido: 700svh; height: auto; overflow: visible; container-type: normal; }
html[data-movimiento="pleno"] .pieza--celular { height: calc(100svh + var(--recorrido)); }
.pieza__escena { position: relative; height: 100svh; overflow: hidden; overflow: clip; }
html[data-movimiento="pleno"] .pieza__escena { position: sticky; top: 0; }

.pieza--celular .pieza__cartela::before { display: none; }
.pieza--celular .pieza__cartela { text-shadow: 0 1px 2px rgb(22 21 21 / 0.85), 0 0 1.75rem rgb(22 21 21 / 0.9); }
.pieza--celular .pieza__cartela .boton { text-shadow: none; }

@media (max-width: 63.99em) {
  .pieza__cartela { padding-bottom: 1.75rem; }
}

.pieza--portada { --recorrido: 520svh; }
.pieza--portada .pieza__titulo { font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem); line-height: 1.08; white-space: normal; text-wrap: balance; }

@media (max-width: 63.99em) {
  .pieza--portada .plegable { --reserva: 14.5rem; }
  html[data-movimiento="pleno"] .pieza--portada[data-escena-baja] .plegable { --reserva: 10rem; }
  html[data-movimiento="pleno"] .pieza--portada[data-escena-baja] .pieza__inicio .pieza__bajada { display: none; }
}
@media (max-width: 63.99em) and (max-height: 31.25em) and (orientation: landscape) {
  .pieza--portada .plegable, html[data-movimiento="pleno"] .pieza--portada[data-escena-baja] .plegable { --reserva: 0px; }
}

@media (min-width: 64em) {
  .pieza--portada .pieza__cartela { width: calc(68% - var(--w-cerrado) / 2 - 2rem); }
  .pieza--portada .pieza__texto { max-width: calc(68vw - var(--w-abierto) - 1.5rem - clamp(2rem, 4.5vw, 5.5rem)); }
}
@media (min-width: 72em) {
  .pieza--portada .plegable { inset: var(--alto-cabecera) 0 0 0; }
  .pieza--portada .pieza__cartela { width: calc(50% - var(--w-cerrado) / 2 - 2rem); }
  .pieza--portada .pieza__texto { max-width: calc(50vw - var(--w-abierto) - 1.5rem - clamp(2rem, 4.5vw, 5.5rem)); }
}

.pieza--celular {
  --util: calc(100svh - var(--alto-cabecera));
  --w-cerrado: min(calc(var(--util) * 0.3147), 88vw);
  --w-abierto: min(46vw, calc(var(--util) * 0.396));
}
.plegable {
  --w: var(--w-abierto);
  --u: calc(var(--w) / 100);
  --bisel: calc(2.4 * var(--u));
  --filo: calc(0.9 * var(--u));
  --esq: calc(15.5 * var(--u));
  --esq-pant: calc(13.1 * var(--u));
  --esq-bis: calc(2 * var(--u));
  --metal: linear-gradient(112deg, #E3B1BA 0%, #AB707A 20%, #94606B 46%, #B67B86 68%, #DDA9B3 100%);
  --metal-v: linear-gradient(180deg, #DDA9B3 0%, #AB707A 35%, #94606B 70%, #C48A95 100%);
  --reserva: 9.5rem;
  position: absolute; inset: var(--alto-cabecera) 0 var(--reserva) 0; z-index: 1;
  pointer-events: none;
}
html[data-movimiento="pleno"] .plegable { --w: var(--w-cerrado); }
@media (min-width: 64em) {
  .pieza--celular {
    --w-cerrado: calc(var(--util) * 0.4365);
    --w-abierto: min(calc(var(--util) * 0.396), 27vw);
  }
  .plegable {
    --reserva: 0px;
    inset: var(--alto-cabecera) 0 0 36%;
  }
}

.plegable__sonda { position: absolute; left: 0; top: 0; height: 0; visibility: hidden; pointer-events: none; }
.plegable__sonda--cerrado { width: var(--w-cerrado); }
.plegable__sonda--abierto { width: var(--w-abierto); }

.plegable__eje, .plegable__inclina { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.plegable__eje { left: 50%; top: 50%; }
html[data-movimiento="pleno"] .plegable__eje { will-change: transform; }
@media (pointer: fine) {
  html[data-movimiento="pleno"] .plegable__inclina { will-change: transform; }
}

.plegable__luz {
  --luz-rgb: 171 112 122; --luz-a: 0.24;
  position: absolute; left: 0; top: 0; width: calc(var(--w) * 2.4); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0; transition: opacity 0.6s linear;
  background: radial-gradient(closest-side, rgb(var(--luz-rgb) / var(--luz-a)), rgb(var(--luz-rgb) / calc(var(--luz-a) * 0.35)) 55%, rgb(var(--luz-rgb) / 0));
}
.plegable__luz[data-activa] { opacity: 1; }
html[data-movimiento="pleno"] .plegable__luz { will-change: opacity; }
html[data-movimiento="calmo"] .plegable__luz { transition: none; }

.aparato {
  position: absolute; left: calc(-1 * var(--w)); top: calc(-0.985 * var(--w)); width: calc(2 * var(--w)); height: calc(1.97 * var(--w));
  perspective: 1700px; pointer-events: auto; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

html[data-movimiento="pleno"] .pieza--celular:not([data-listo]) .aparato { transform: translateX(-25%); }
html[data-movimiento="pleno"] .pieza--celular:not([data-listo]) .aparato__eje { transform: rotateY(180deg); }
html[data-movimiento="pleno"] .aparato { will-change: transform; }
html[data-movimiento="pleno"] .aparato__eje { will-change: transform; }
.aparato[data-arrastrando] { cursor: grabbing; }

.aparato__bisagra {
  position: absolute; left: calc(50% - var(--filo)); top: 0; bottom: 0;
  width: calc(2 * var(--filo)); border-radius: var(--filo); background: var(--metal-v);
}

.mitad { position: absolute; top: 0; width: var(--w); height: 100%; isolation: isolate; }
.mitad--der { left: 50%; }

.mitad::before, .hoja::before {
  content: ""; position: absolute; z-index: -1; background: var(--metal);
}
.mitad::before {
  inset: calc(-1 * var(--filo)) calc(-1 * var(--filo)) calc(-1 * var(--filo)) 0;
  border-radius: var(--esq-bis) calc(var(--esq) + var(--filo)) calc(var(--esq) + var(--filo)) var(--esq-bis);
}

.mitad__botones { position: absolute; left: 100%; top: 0; bottom: 0; width: calc(1.3 * var(--u)); margin-left: calc(0.4 * var(--filo)); }
.mitad__botones::before, .mitad__botones::after {
  content: ""; position: absolute; left: 0; width: 100%; border-radius: var(--u); background: var(--metal-v);
}
.mitad__botones::before { top: 22%; height: 9%; }
.mitad__botones::after { top: 36%; height: 17%; }

.armazon { position: absolute; inset: 0; background: #050505; }
.armazon--der { border-radius: var(--esq-bis) var(--esq) var(--esq) var(--esq-bis); }
.armazon--izq { border-radius: var(--esq) var(--esq-bis) var(--esq-bis) var(--esq); }

.pantalla { position: absolute; overflow: hidden; overflow: clip; background: var(--carbon); color: var(--hueso); container-type: inline-size; }
.pantalla--der { inset: var(--bisel) var(--bisel) var(--bisel) 0; border-radius: 0 var(--esq-pant) var(--esq-pant) 0; }
.pantalla--izq { inset: var(--bisel) 0 var(--bisel) var(--bisel); border-radius: var(--esq-pant) 0 0 var(--esq-pant); }

.pantalla--cubierta { inset: var(--bisel); border-radius: calc(0.6 * var(--u)) var(--esq-pant) var(--esq-pant) calc(0.6 * var(--u)); }

.pantalla__reserva { height: 9.96cqi; }

.aparato__eje { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }
.hoja {
  position: absolute; right: 0; top: 0; width: var(--w); height: 100%; isolation: isolate;
  border-radius: var(--esq) var(--esq-bis) var(--esq-bis) var(--esq);
}
.hoja::before {
  inset: calc(-1 * var(--filo)) 0 calc(-1 * var(--filo)) calc(-1 * var(--filo));
  border-radius: calc(var(--esq) + var(--filo)) var(--esq-bis) var(--esq-bis) calc(var(--esq) + var(--filo));
}
.faz { position: absolute; inset: 0; }
.faz--dorso { transform: scaleX(-1); visibility: visible; }
.faz--frente { visibility: hidden; }
.hoja[data-lado="frente"] .faz--frente { visibility: visible; }
.hoja[data-lado="frente"] .faz--dorso { visibility: hidden; }
html:not([data-movimiento="pleno"]) .faz--frente { visibility: visible; }
html:not([data-movimiento="pleno"]) .faz--dorso { visibility: hidden; }

.hoja__vidrio { position: absolute; inset: 0; overflow: hidden; overflow: clip; pointer-events: none; }
.hoja__sombra {
  position: absolute; inset: 0; opacity: 0; border-radius: var(--esq) var(--esq-bis) var(--esq-bis) var(--esq);
  background: linear-gradient(to left, rgb(0 0 0 / 0.66) 0%, rgb(0 0 0 / 0.22) 50%, rgb(0 0 0 / 0) 100%);
}
.hoja__brillo {
  position: absolute; top: 0; bottom: 0; left: 0; width: 55%; opacity: 0;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 20%, rgb(255 255 255 / 0.2) 50%, rgb(255 255 255 / 0) 80%);
}

.mitad__sombra {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to right, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.2) 40%, rgb(0 0 0 / 0) 75%);
}

.aparato__pliegue {
  position: absolute; left: calc(50% - 5 * var(--u)); width: calc(10 * var(--u)); top: var(--bisel); bottom: var(--bisel);
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.32) 44%, rgb(0 0 0 / 0.46) 50%, rgb(255 255 255 / 0.05) 52%, rgb(0 0 0 / 0) 100%);
}
.barra {
  position: absolute; left: var(--bisel); right: var(--bisel); top: var(--bisel); height: calc(9.72 * var(--u));
  display: flex; align-items: center; justify-content: space-between; padding-inline: calc(8 * var(--u));
  font-size: calc(4.8 * var(--u)); font-weight: 600; line-height: 1; color: var(--hueso); font-variant-numeric: tabular-nums;
  pointer-events: none; opacity: 0;
}
.barra__iconos, .cubierta__iconos { display: inline-flex; align-items: center; }
.icono-estado { fill: currentColor; }
.barra .icono-estado--senal { width: calc(6 * var(--u)); height: calc(4 * var(--u)); }
.barra .icono-estado--bateria { width: calc(8.8 * var(--u)); height: calc(4.1 * var(--u)); margin-left: calc(2.4 * var(--u)); }
html:not([data-movimiento="pleno"]) .barra, html:not([data-movimiento="pleno"]) .aparato__pliegue { opacity: 1; }

html[data-movimiento="pleno"] .hoja__sombra,
html[data-movimiento="pleno"] .mitad__sombra,
html[data-movimiento="pleno"] .aparato__pliegue,
html[data-movimiento="pleno"] .cubierta__pista,
html[data-movimiento="pleno"] .barra { will-change: opacity; }
html[data-movimiento="pleno"] .hoja__brillo { will-change: opacity, transform; }

.ventana, .ficha__caso, .caso__texto { opacity: 0; visibility: hidden; transition: opacity 0.45s linear, visibility 0s linear 0.45s; }
.ficha__caso, .caso__texto { transition: opacity 0.2s linear, visibility 0s linear 0.2s; }

.ventana[data-actual], .ficha__caso[data-actual], .caso__texto[data-actual] { opacity: 1; visibility: inherit; transition: opacity 0.45s linear; }
.ficha__caso[data-actual], .caso__texto[data-actual] { transition: opacity 0.45s linear 0.12s; }

.ventanas { position: relative; width: 100%; aspect-ratio: 522 / 976; background: var(--carbon); }
.ventana { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: var(--carbon); }
.ventana__portada, .ventana__video {
  position: absolute; left: -1.533cqi; top: -12.64cqi; width: 103.45cqi; max-width: none; height: auto; aspect-ratio: 540 / 1112;
}
.ventana__video { opacity: 0; background: var(--carbon); }
.ventana[data-iniciado] .ventana__video { opacity: 1; }

html[data-movimiento="pleno"] .ventana__video { transition: opacity 0.45s linear; }

.ventana[data-iniciado][data-costura] .ventana__video { opacity: 0; }

.ventana__control {
  position: absolute; z-index: 4; right: 3cqi; bottom: 3cqi; width: 2.75rem; height: 2.75rem; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--filete-sobre-carbon); border-radius: var(--radio);
  background: var(--carbon); color: var(--hueso); pointer-events: auto;
}
.ventana__control[hidden] { display: none; }
.ventana__control:hover { background: var(--gris-700); }
.ventana__control:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; box-shadow: 0 0 0 6px var(--carbon); }
.ventana[data-manual]:not([data-iniciado]) .ventana__control { width: 3.5rem; height: 3.5rem; }
.icono { width: 1.25rem; height: 1.25rem; }
.ventana[data-manual]:not([data-iniciado]) .icono { width: 1.75rem; height: 1.75rem; }
.ventana[data-estado="reproduciendo"] .icono--play { display: none; }
.ventana:not([data-estado="reproduciendo"]) .icono--pausa { display: none; }

.ficha { position: absolute; inset: 9.96cqi 0 0 0; display: flex; flex-direction: column; padding: 3.5cqi 7.5cqi 7cqi 6.5cqi; pointer-events: auto; }
.ficha__pila { display: grid; flex: 1 1 auto; min-height: 0; }
.ficha__caso { grid-area: 1 / 1; display: flex; flex-direction: column; --ancho-nombre: 3.7; }
.ficha__caso--immu { --ancho-nombre: 3.7; }
.ficha__caso--el-jichi { --ancho-nombre: 4.42; }
.ficha__caso--codex { --ancho-nombre: 6.12; }
.ficha__caso--sk-solar { --ancho-nombre: 5.36; }
.ficha__caso--fibra { --ancho-nombre: 4.02; }
.ficha__rubro { font-size: 5cqi; font-weight: 600; line-height: 1.3; color: var(--plata); }
.ficha__nombre {
  margin-top: 1.4cqi; margin-left: -0.055em;
  font-size: min(22cqi, calc(86cqi / var(--ancho-nombre))); line-height: 0.98; letter-spacing: -0.005em;
  font-weight: var(--peso-titular); font-stretch: calc(var(--ancho-titular) * 1%); font-variation-settings: "wdth" var(--ancho-titular);
}
.ficha__hicimos { margin-top: 5cqi; font-size: 5.3cqi; line-height: 1.4; text-wrap: pretty; }
.ficha__etiqueta { display: block; margin-bottom: 0.6cqi; font-weight: 600; color: var(--plata); }
.ficha__esencia {
  margin-top: 5cqi; font-size: 7.2cqi; line-height: 1.16; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance;
}
.ficha__nota { margin-top: 4cqi; font-size: 5cqi; line-height: 1.4; color: var(--plata); text-wrap: pretty; }
.ficha__pie { margin-top: auto; padding-top: 3cqi; }
.ficha__casos { display: flex; flex-wrap: wrap; gap: 0.6cqi 4.5cqi; font-size: 4.8cqi; line-height: 1.4; color: var(--plata); }
.ficha__pasos { display: flex; justify-content: space-between; margin-top: 3cqi; font-size: 4.8cqi; line-height: 1.4; font-weight: 600; color: var(--plata); }

.ficha__tab, .ficha__paso, .caso__tab, .caso__paso {
  padding: 0.25em 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; line-height: inherit; text-align: left;
}
.ficha__tab[aria-current], .caso__tab[aria-current] { font-weight: 700; color: var(--hueso); }
.ficha__paso:disabled, .caso__paso:disabled { opacity: 0.4; cursor: default; }
.ficha__tab:focus-visible, .ficha__paso:focus-visible, .caso__tab:focus-visible, .caso__paso:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; }

@media (max-width: 63.99em) {
  .ficha { padding: 3.5cqi 6cqi 6cqi 5.5cqi; }
  .ficha__rubro { font-size: 6.8cqi; }
  .ficha__nombre { font-size: calc(88cqi / var(--ancho-nombre) * 0.985); }
  .ficha__esencia { margin-top: auto; font-size: calc(14.5px / var(--escala-abierto, 1)); line-height: 1.25; letter-spacing: 0; }
  .ficha__hicimos, .ficha__nota, .ficha__pie { display: none; }
}

.caso { display: none; }
@media (max-width: 63.99em) {
  .caso {
    display: block; position: absolute; left: 0; right: 0; bottom: 5.25rem; z-index: 2;
    max-width: 40rem; margin-inline: auto; padding-inline: var(--margen);
  }
  .caso__pila { display: grid; }
  .caso__texto { grid-area: 1 / 1; }
  .caso__hicimos { font-size: var(--t-chico); line-height: 1.45; text-wrap: pretty; }
  .caso__etiqueta { margin-right: 0.35em; font-weight: 700; color: var(--plata); }
  .caso__nota { margin-top: 0.5rem; font-size: var(--t-chico); line-height: 1.4; color: var(--plata); text-wrap: pretty; }
  .caso__pie { margin-top: 0.875rem; }
  .caso__casos { display: flex; flex-wrap: wrap; gap: 0 1rem; font-size: var(--t-chico); line-height: 1.4; color: var(--plata); }
  .caso__tab { min-height: 2rem; }
  .caso__pasos { display: flex; align-items: center; justify-content: space-between; margin-top: 0.25rem; font-size: var(--t-chico); font-weight: 600; color: var(--plata); }
  .caso__paso { min-height: 2.75rem; padding-inline: 0; }
  .caso__paso:last-child { text-align: right; }

  html[data-movimiento="pleno"] .caso { visibility: hidden; opacity: 0; transition: opacity 0.35s var(--curva), visibility 0s linear 0.35s; }
  html[data-movimiento="pleno"] .pieza[data-estado="abierto"][data-texto-oculto] .caso {
    visibility: visible; opacity: 1; transition: opacity 0.6s var(--curva) 0.1s;
  }
}

@media (max-width: 63.99em) {
  html[data-movimiento="pleno"] .pieza[data-escena-baja] .caso__casos { display: none; }
}

@media (max-width: 63.99em) {
  html:not([data-movimiento="pleno"]) .pieza__escena { height: auto; overflow: visible; overflow-x: clip; display: flex; flex-direction: column; padding-top: var(--alto-cabecera); }
  html:not([data-movimiento="pleno"]) .pieza__cartela { position: relative; padding: 1.25rem var(--margen) 0; }
  html:not([data-movimiento="pleno"]) .plegable { position: relative; inset: auto; flex: none; height: calc(1.97 * var(--w) + 3rem); }
  html:not([data-movimiento="pleno"]) .caso { position: relative; bottom: auto; padding-bottom: 2.5rem; }
}
html[data-movimiento="calmo"] .caso { transition: none; }

@media (max-width: 63.99em) and (max-height: 31.25em) and (orientation: landscape) {
  .plegable { --reserva: 0px; inset: var(--alto-cabecera) 0 0 40%; }
  .pieza__cartela {
    right: auto; bottom: auto; top: 0; width: 42%; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 0.5rem 1rem var(--margen);
  }
  .pieza__titulo { font-size: 2rem; }
  .pieza__bajada { margin-top: 0.375rem; font-size: 0.9375rem; }
  html[data-movimiento="pleno"] .caso, html:not([data-movimiento="pleno"]) .caso { display: none; }
  html:not([data-movimiento="pleno"]) .pieza__escena { display: block; height: 100svh; overflow: hidden; overflow: clip; padding-top: 0; }
  html:not([data-movimiento="pleno"]) .pieza__cartela { position: absolute; padding: 0 0.5rem 1rem var(--margen); }
  html:not([data-movimiento="pleno"]) .plegable { position: absolute; inset: var(--alto-cabecera) 0 0 40%; height: auto; }
}

.cubierta__bloqueo, .cubierta__llamada { position: absolute; inset: 0; isolation: isolate; }
.pantalla--cubierta[data-modo="bloqueo"] .cubierta__llamada { visibility: hidden; }
.pantalla--cubierta[data-modo="llamada"] .cubierta__bloqueo { visibility: hidden; }

.cubierta__fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; overflow: clip; background: var(--carbon); }
.cubierta__luz {
  position: absolute; left: 20cqi; top: 118cqi; width: 150cqi; height: 110cqi;
  background: radial-gradient(closest-side, rgb(171 112 122 / 0.26), rgb(171 112 122 / 0));
}

.gato { position: absolute; left: -121cqi; top: 137cqi; width: 210cqi; aspect-ratio: 1800 / 1033; }
.gato > svg, .gato > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.gato__base { fill: #252223; }
.gato img { width: 100%; height: 100%; }
.cubierta__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(22 21 21 / 0.62) 0%, rgb(22 21 21 / 0.3) 32%, rgb(22 21 21 / 0.18) 62%, rgb(22 21 21 / 0.72) 100%);
}
.cubierta__barra, .cubierta__reloj, .avisos, .cubierta__mas { position: relative; z-index: 1; }
.cubierta__barra { height: 9.96cqi; display: flex; align-items: center; justify-content: center; }
.cubierta__camara { width: 3.2cqi; height: 3.2cqi; border-radius: 50%; background: #050505; box-shadow: 0 0 0 0.5cqi rgb(244 242 240 / 0.1); }
.cubierta__iconos { position: absolute; right: 8cqi; top: 50%; transform: translateY(-50%); }
.cubierta__iconos .icono-estado--senal { width: 5.6cqi; height: 3.7cqi; }
.cubierta__iconos .icono-estado--bateria { width: 8.2cqi; height: 3.8cqi; margin-left: 2.2cqi; }
.cubierta__reloj { text-align: center; }
.cubierta__fecha { margin-top: 3.4cqi; font-size: 4.8cqi; line-height: 1.3; font-weight: 500; color: rgb(244 242 240 / 0.88); }
.cubierta__hora {
  margin-top: 0.4cqi; font-size: 25cqi; line-height: 1; font-weight: 500; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--hueso);
}

.avisos { display: grid; gap: 2.2cqi; margin: 5cqi 4.5cqi 0; }
.aviso { position: relative; border-radius: 4.4cqi; background: rgb(32 30 31 / 0.96); box-shadow: 0 0 0 1px rgb(244 242 240 / 0.09); }

.aviso:nth-child(1) { z-index: 3; }
.aviso:nth-child(2) { z-index: 2; }
.aviso:nth-child(3) { z-index: 1; }
.aviso__boton {
  display: block; width: 100%; padding: 2.6cqi 3.2cqi 2.8cqi; border: 0; border-radius: inherit; background: none; color: inherit;
  font: inherit; text-align: left;
}
.aviso__boton:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; }
.aviso__fila { display: flex; justify-content: space-between; gap: 2cqi; font-size: 3.6cqi; line-height: 1.3; font-weight: 600; color: rgb(216 211 208 / 0.8); }
.aviso__titulo { display: block; margin-top: 0.8cqi; font-size: 4.7cqi; line-height: 1.2; font-weight: 700; color: var(--hueso); }
.aviso__texto { display: block; font-size: 4.4cqi; line-height: 1.3; color: rgb(216 211 208 / 0.92); }
.cubierta__mas {
  display: block; width: max-content; margin: 3cqi auto 0; padding: 1.5cqi 4cqi; border: 0; border-radius: 99px;
  background: rgb(32 30 31 / 0.92); font: inherit; font-size: 3.8cqi; line-height: 1.3; font-weight: 600; color: var(--plata);
}
.cubierta__mas { z-index: 0; }
.cubierta__mas:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; }

html[data-movimiento="pleno"]:not([data-gestos="fallo"]) .pieza--celular:not([data-avisos]) [data-cae] { opacity: 0; }

.cubierta__pista {
  position: absolute; z-index: 2; left: 3cqi; bottom: 3cqi; min-height: 2.75rem; padding: 0 0.75rem 0 0.5rem;
  display: inline-flex; align-items: center; gap: 2cqi; border: 0; background: none; color: var(--hueso);
  font-size: 5.4cqi; font-weight: 600; line-height: 1; text-shadow: 0 0 1rem rgb(22 21 21 / 0.9), 0 1px 2px rgb(22 21 21 / 0.9);
  pointer-events: auto;
}
.cubierta__flechas { width: 8.4cqi; height: auto; animation: abrir 2s var(--curva) infinite; }
@keyframes abrir {
  0% { transform: translateX(0); opacity: 0.3; }
  45% { transform: translateX(-3px); opacity: 1; }
  100% { transform: translateX(-9px); opacity: 0; }
}
.pieza:is([data-pausado], [data-fuera]) .cubierta__flechas { animation-play-state: paused; }
html[data-movimiento="calmo"] .cubierta__flechas { animation: none; opacity: 0.9; }

.cubierta__llamada { background: var(--carbon); text-align: center; }
.llamada__luz {
  position: absolute; left: 50%; top: 14cqi; width: 130cqi; height: 100cqi; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(171 112 122 / 0.26), rgb(171 112 122 / 0));
}
.cubierta__llamada > .cubierta__barra { position: relative; z-index: 1; }
.llamada__avatar { position: relative; z-index: 1; width: 44cqi; aspect-ratio: 1; margin: 12cqi auto 0; }
.llamada__anillo {
  position: absolute; inset: 0; border: 1.5px solid rgb(171 112 122 / 0.8); border-radius: 50%; opacity: 0; pointer-events: none;
}
.pieza[data-llamada="sonando"] .llamada__anillo { animation: latir 2.4s var(--curva) infinite; }
.pieza[data-llamada="sonando"] .llamada__anillo:nth-child(2) { animation-delay: 0.8s; }
.pieza[data-llamada="sonando"] .llamada__anillo:nth-child(3) { animation-delay: 1.6s; }
@keyframes latir {
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(1.9); opacity: 0; }
}
.pieza:is([data-pausado], [data-fuera]) .llamada__anillo { animation-play-state: paused; }
html[data-movimiento="calmo"] .llamada__anillo { animation: none; }

.rostro { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; overflow: clip; background: #161515; box-shadow: 0 0 0 0.9cqi #AB707A; }
.rostro__base { position: absolute; inset: 0; width: 100%; height: 100%; fill: #252223; }
.rostro__capas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.rostro__nariz { position: absolute; left: 47.068%; top: 59.885%; width: 10.279%; height: 6.975%; max-width: none; }
.rostro__ojos { position: absolute; left: 36.348%; top: 47.77%; width: 30.655%; height: 5.287%; max-width: none; overflow: visible; }

.llamada__textos { position: relative; z-index: 1; display: grid; margin-top: 7cqi; }
.llamada__texto { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.pieza:is([data-llamada="espera"], [data-llamada="sonando"]) .llamada__texto--sonando,
.pieza[data-llamada="atendida"] .llamada__texto--conectando,
.pieza[data-llamada="perdida"] .llamada__texto--perdida { opacity: 1; visibility: inherit; }
.llamada__nombre {
  font-size: 9.5cqi; line-height: 1.05; font-weight: var(--peso-titular); font-stretch: calc(var(--ancho-titular) * 1%);
  font-variation-settings: "wdth" var(--ancho-titular); letter-spacing: -0.005em; color: var(--hueso);
}
.llamada__linea { margin-top: 1.6cqi; font-size: 4.9cqi; line-height: 1.3; font-weight: 600; color: var(--plata); }
.llamada__tema { margin-top: 1.2cqi; font-size: 5.3cqi; line-height: 1.3; color: rgb(244 242 240 / 0.92); }

.llamada__acciones { position: absolute; z-index: 2; left: 0; right: 0; bottom: 3cqi; display: grid; justify-items: center; --alto-barra: max(17cqi, 3.25rem); }
.llamada__sonando, .llamada__perdida { grid-area: 1 / 1; display: grid; justify-items: center; row-gap: 1.2cqi; }
.llamada__sonando { visibility: hidden; opacity: 0; }
.llamada__perdida { visibility: hidden; opacity: 0; }
.pieza:is([data-llamada="espera"], [data-llamada="sonando"]) .llamada__sonando { visibility: inherit; opacity: 1; }
.pieza[data-llamada="perdida"] .llamada__perdida { visibility: inherit; opacity: 1; }
.llamada__barra {
  position: relative; width: 82cqi; height: var(--alto-barra); display: grid; place-items: center; border-radius: 99px;
  background: rgb(32 30 31 / 0.96); box-shadow: 0 0 0 1px rgb(244 242 240 / 0.1);
}
.llamada__consejo { padding-left: calc(var(--alto-barra) * 0.7); font-size: 4.9cqi; font-weight: 600; line-height: 1.2; color: var(--plata); pointer-events: none; }
.llamada__pulgar {
  position: absolute; left: 4px; top: 4px; width: calc(var(--alto-barra) - 8px); height: calc(var(--alto-barra) - 8px); padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--borgona); color: var(--carbon);
  cursor: grab; touch-action: pan-y;
}
.llamada__pulgar svg { width: 46%; height: auto; }
.llamada__pulgar:focus-visible { outline: 2px solid var(--hueso); outline-offset: 3px; }
.llamada__rechazar {
  min-height: 2.75rem; padding: 0 1.25rem; border: 0; background: none; color: var(--plata); font: inherit;
  font-size: 5.2cqi; font-weight: 600; line-height: 1;
}
.llamada__rechazar:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; }
.llamada__devolver {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 2rem; border-radius: 99px;
  background: var(--borgona); color: var(--carbon); font-size: 5.4cqi; font-weight: 700; line-height: 1; text-decoration: none;
}
.llamada__devolver:focus-visible { outline: 2px solid var(--hueso); outline-offset: 3px; }

.tarjeta { padding: 3rem var(--margen) 4.5rem; border-top: 1px solid var(--filete-sobre-carbon); }
html[data-movimiento="pleno"] .tarjeta { display: none; }
.tarjeta__interior { display: grid; justify-items: center; max-width: 28rem; margin-inline: auto; text-align: center; }
.tarjeta__cara { position: relative; width: 8.5rem; height: 8.5rem; margin-bottom: 1.5rem; }
.tarjeta__nombre {
  font-size: 2.25rem; line-height: 1.05; font-weight: var(--peso-titular); font-stretch: calc(var(--ancho-titular) * 1%);
  font-variation-settings: "wdth" var(--ancho-titular);
}
.tarjeta__linea { margin-top: 0.375rem; font-weight: 600; color: var(--plata); }
.tarjeta__tema { margin-top: 0.125rem; }
.tarjeta__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; }
.tarjeta__acciones[hidden], .tarjeta__textos[hidden], .tarjeta__final[hidden] { display: none; }
.tarjeta__acciones .boton--contorno { background: none; }
.tarjeta__final { margin-top: 2rem; }
.tarjeta__final .pieza__remate { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .cubierta__flechas, .llamada__anillo { animation: none; }
  .cubierta__flechas { opacity: 0.9; }
}
