:root {
  --tinta: #101009; --cian: #00d3ef; --verde: #b4e878;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  --duracion: 640ms; --paso-ajuste: 42px; --paso: var(--paso-ajuste); --franja-grosor: 42px; --franja-color: #000000; --franja-desenfoque: 0px;
  /* Primer fotograma alineado con el diseño publicado; el editor conserva el control. */
  --brillo: .79; --px: 0px; --py: 0px;
  --tamano: min(60svh, 32vw, 620px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: #19160e; }
body { margin: 0; color: var(--tinta); font-family: Archivo, Arial, sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #d5a64b url('madera.webp') center / cover no-repeat;
  filter: brightness(var(--brillo)); transform: translate(var(--px), var(--py)) scale(var(--escala-fondo, 1)); }
.marco { position: fixed; inset: 0; border: 6px solid rgba(16,16,9,.8); z-index: 20; pointer-events: none; }
#bienvenida { position: relative; z-index: 1; min-height: 720px; height: 100svh; isolation: isolate; overflow: hidden; }
.herramientas { position: fixed; top: 20px; right: 24px; display: flex; gap: 7px; z-index: 25; }
.herramientas button { display: flex; align-items: center; gap: 9px; border: 1px solid #17160b55; background: #ebd79a50;
  backdrop-filter: blur(8px); padding: 8px 10px; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.herramientas button:hover { background: var(--cian); border-color: var(--cian); }
.herramientas button[aria-pressed='true'] > span:first-child { color: #08592a; }
.encabezado { position: absolute; top: clamp(26px,4svh,44px); left: clamp(22px,2.8vw,54px); width: max-content; max-width: calc(100% - 44px); z-index: 4; }
.encabezado-magnetico { transform: translate3d(var(--iman-x,0px),var(--iman-y,0px),0); transition: transform var(--iman-retorno,600ms) cubic-bezier(.22,1,.36,1); }
.encabezado.con-iman .encabezado-magnetico { transition-duration: 220ms; }
.cota { margin: 0; font: 300 clamp(7px, .64vw, 10px) var(--mono); text-transform: uppercase; letter-spacing: .2em; }
.encabezado .cota, .firma-pequena, .introduccion, .origen, .firma-pie { color: #fff; text-shadow: none; font-weight: 300; }
.firma { position: relative; display: flex; align-items: baseline; gap: clamp(12px,1vw,20px); margin: 8px 0 9px; width: max-content; max-width: 100%; }
#marca { position: relative; margin: 0; color: #080a04; font-size: clamp(58px,7.1vw,112px); font-weight: 900; line-height: .85; letter-spacing: -.085em; white-space: nowrap;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px rgb(255 255 255 / .56)); }
.marca-texto { display: block; }
.barra-firma { display: inline-block; font-size: inherit; font-weight: 600; letter-spacing: -.05em; margin-left: .065em; }
.firma-pequena { font: 300 clamp(7px,.58vw,10px) var(--mono); letter-spacing: .2em; white-space: nowrap; }
/* Redes: todo el conjunto de la marca lleva a Instagram y el icono de TikTok va aparte. */
.red-instagram, .red-tiktok { color: inherit; text-decoration: none; }
.red-texto { display: block; }
.firma { align-items: flex-start; }
.red-marca { display: flex; align-items: flex-start; gap: clamp(12px,1vw,20px); }
.firma-ig { display: grid; justify-items: center; gap: clamp(6px,.6vw,10px); margin-top: .1em; }
.icono-red { display: block; width: auto; transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s; }
.icono-instagram { height: clamp(40px,4.9vw,78px); filter: drop-shadow(0 2px 8px #0005); }
.icono-tiktok { height: clamp(42px,5.2vw,84px); margin-top: .05em; filter: drop-shadow(0 2px 8px #0004); }
.red-marca:hover .icono-instagram, .red-tiktok:hover .icono-tiktok { transform: scale(1.08); }
.red-marca:focus-visible, .red-tiktok:focus-visible { outline: 3px solid var(--cian); outline-offset: 6px; }
.introduccion { margin: 0; font-size: clamp(10px,.78vw,12px); line-height: 1.5; font-weight: 300; letter-spacing: .045em; }
/* Capas transparentes: los cortes de color conservan visible la madera. */
.marca-glitch { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.glitch-cian { color: #00e5f4; --glitch-sentido: 1; text-shadow: -1px 0 #fff; }
.glitch-rojo { color: #ff344b; --glitch-sentido: -1; text-shadow: 1px 0 #fff; }
.con-glitch .marca-glitch { animation: cortesTrons var(--glitch-duracion,3200ms) steps(1,end) infinite; }
.con-glitch .glitch-rojo { animation-delay: -150ms; animation-direction: reverse; }
@keyframes cortesTrons {
  0%, 16%, 49%, 70%, 100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
  3%, 54% { opacity: 1; clip-path: inset(18% 0 61% 0); transform: translateX(calc(var(--glitch-corte,5px) * var(--glitch-sentido))); }
  7%, 60% { opacity: 1; clip-path: inset(58% 0 24% 0); transform: translateX(calc(var(--glitch-corte,5px) * var(--glitch-sentido) * -1)); }
  11%, 65% { opacity: 1; clip-path: inset(79% 0 8% 0); transform: translateX(calc(var(--glitch-corte,5px) * var(--glitch-sentido) * .65)); }
}
body.pausada .marca-glitch, body.oculta .marca-glitch, body.modo-edicion .marca-glitch { animation: none; opacity: 0; }
body.pausada .encabezado-magnetico, body.oculta .encabezado-magnetico, body.modo-edicion .encabezado-magnetico { transform: none; transition: none; }
.selector { position: absolute; top: 50%; transform: translateY(-50%); left: 1.6%; right: 1.6%; height: var(--tamano); display: grid;
  grid-template-columns: minmax(0,1fr) var(--tamano) minmax(0,1fr); column-gap: 0; row-gap: 12px; align-items: center; touch-action: pan-x; user-select: none; }
.columna { height: 100%; min-width: 0; position: relative; }
.lista { position: absolute; inset: -35px 0; overflow: hidden; }
.fila { --posicion: 0; position: absolute; top: 50%; width: 100%; height: var(--paso); margin: 0; padding: 0 10px;
  border: 0; background: none; font-weight: 700; font-size: clamp(12px, 1.24vw, 21px); line-height: 1.15;
  display: flex; align-items: center; color: var(--tinta); color: color-mix(in srgb, var(--tinta), #fff var(--blanco, 0%)); opacity: var(--opacidad, 1);
  text-shadow: 0 1px 4px rgb(12 47 47 / calc(var(--realce, 0) * .5));
  transform: translateY(calc(-50% + var(--posicion) * var(--paso))) scale(var(--escala, 1));
  will-change: transform, opacity;
  text-wrap: balance; }
.izquierda .fila { justify-content: flex-end; text-align: right; transform-origin: right center; }
.derecha .fila { justify-content: flex-start; text-align: left; transform-origin: left center; font-size: clamp(10px,1.03vw,17px); padding-right: 28px; }
.fila.activa { padding-left: 30px; }
.derecha .fila.activa { padding-left: 10px; }
.fila:hover { opacity: 1 !important; }
.derecha .fila { cursor: pointer; }
.fila:focus-visible { outline-offset: -3px; }
.banda { position: absolute; top: 50%; height: var(--franja-grosor); transform: translateY(-50%); left: 0; right: 0;
  background: transparent; border: 0; border-radius: 999px; isolation: isolate; }
.banda::before { content: ''; position: absolute; inset: 0; background: var(--franja-color); border-radius: inherit;
  filter: blur(var(--franja-desenfoque)); opacity: .96; z-index: 0; }
.izquierda .banda, .izquierda .banda::before { border-radius: 999px 0 0 999px; }
.derecha .banda, .derecha .banda::before { border-radius: 0 999px 999px 0; }
.banda span { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); font: 600 10px var(--mono); z-index: 1; }
.derecha .banda span { left: auto; right: 7px; }
.centro { min-width: 0; position: relative; z-index: 3; }
.visor { aspect-ratio: 1; position: relative; background: #11120f; border-radius: var(--radio-cuadro, 24px); overflow: hidden;
  isolation: isolate; box-shadow: 0 14px 45px #3e200021;
  transform-origin: center; }
.lamina { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; transform-origin: center; }
.contenido-lamina { position: absolute; inset: 0; background: inherit; transition: transform .65s cubic-bezier(.16,1,.3,1); }
.contenido-lamina > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El cristal sigue visible mientras se prepara la textura del área siguiente. */
.visor.cristal-listo, .visor.cristal-renderizado { overflow: visible; background: transparent; box-shadow: none; }
.visor.efectos-activos { overflow: visible; }
.visor.cristal-renderizado .lamina { opacity: 0 !important; pointer-events: none; }
body.cristal-inicializando .visor .lamina { opacity: 0 !important; pointer-events: none; }
body.cristal-inicializando .centro { opacity: 0; }
.visor.cristal-listo .lamina { opacity: 0 !important; pointer-events: none; }
.escena-cristal { position: absolute; top: -25%; left: -90%; width: 280%; height: 150%; pointer-events: none; z-index: 2; }
.escena-cristal canvas { display: block; width: 100%; height: 100%; }
.centro:has(.cristal-listo)::before { content: ''; position: absolute; top: calc(var(--tamano) / 2); left: 0; right: 0;
  height: var(--franja-grosor); transform: translateY(-50%); background: var(--franja-color); opacity: .96; filter: blur(var(--franja-desenfoque)); }
body.modo-edicion .escena-cristal { visibility: hidden; }
body.modo-edicion .visor.cristal-listo { background: #11120f; overflow: hidden; }
body.modo-edicion .visor.cristal-listo .lamina { opacity: 1 !important; pointer-events: auto; }
body.modo-edicion .visor .abrir-area { pointer-events: none; }
body.pausada .contenido-lamina, body.oculta .contenido-lamina { animation: none !important; transform: none !important; transition: none; }
body.pausada .visor, body.oculta .visor { transform: none !important; transition: none; }
.abrir-area { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; z-index: 3; }
.abrir-area > span { position: absolute; top: 14px; right: 14px; background: #080b09d9; color: #fff9df; padding: 7px 10px;
  font: 11px var(--mono); opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.abrir-area:hover > span, .abrir-area:focus-visible > span { opacity: 1; transform: none; }
.abrir-area:focus-visible { outline: 3px solid var(--cian); outline-offset: -5px; }
.mosaico { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 8px;
  transform: rotate(-9deg) scale(1.09); position: absolute; inset: -10% -2% 0; background: #131711; padding: 8px; }
.mosaico img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rotulo-regalo { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 14px;
  background: #b4e878; color: #101108; padding: 12px 16px; }
.rotulo-regalo strong { font-size: clamp(19px, 2.2vw, 38px); letter-spacing: -.045em; line-height: 1.04; font-weight: 900; }
.rotulo-regalo span { margin-left: auto; font-size: 30px; }
.fotografia .contenido-lamina::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#0002,transparent 40%,#0009); }
.sello { position: absolute; left: 7%; bottom: 14%; z-index: 1; color: #fff7dc; font-weight: 900;
  font-size: clamp(26px, 3.6vw, 58px); line-height: .88; letter-spacing: -.06em; }
.pie-imagen { position: absolute; z-index: 1; bottom: 5%; left: 7%; right: 5%; color: #fff8e6;
  font: 500 clamp(6px, .6vw, 10px)/1.5 var(--mono); letter-spacing: .04em; }
.impresion img { object-position: 36% center; }
.impresion .sello { color: #c9ff1b; }
.uniformes .sello { font-size: clamp(24px, 2.7vw, 44px); font-weight: 600; letter-spacing: -.04em; }
.maquila img { object-position: 70% center; }
.maquila .sello { color: #fff397; transform: rotate(-6deg); font-style: italic; bottom: 17%; }
.software { background: radial-gradient(ellipse at 40% 40%,#183740,#0a1319 68%); color: #c5f9ff; }
.reticula { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(#57d5e255 1px,transparent 1px),linear-gradient(90deg,#57d5e255 1px,transparent 1px); background-size: 26px 26px; }
.software .contenido-lamina > img { position: absolute; width: 67%; height: 67%; object-fit: contain; top: 10%; left: 17%; filter: drop-shadow(0 8px 24px #00e8ff24); }
.software-cota { position: absolute; top: 7%; left: 7%; font: 9px var(--mono); letter-spacing: .12em; }
.software-pie { position: absolute; bottom: 7%; left: 7%; font-size: clamp(14px,1.7vw,27px); line-height: 1; letter-spacing: -.04em; }
.software-pie b { color: #ffad39; font-weight: 900; }
.descripcion-movil { display: none; }
.cinta-movil { display: none; }
@keyframes cintaHaciaIzquierda { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes revelarDetalleCinta { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@media (max-width: 760px) {
  .cinta-movil-lista .izquierda .banda { right: calc(-6vw + 4px); }
  body.cinta-movil-animada .izquierda .fila.activa { color: transparent; text-shadow: none; }
  .cinta-movil-lista #numero-izquierdo { visibility: hidden; }
  .cinta-movil { position: absolute; top: 50%; left: 0; right: calc(-6vw + 4px); height: var(--franja-grosor); transform: translateY(-50%); overflow: hidden; border-radius: 999px 0 0 999px; pointer-events: none; z-index: 4; }
  /* Durante la ruleta se ve solo la fila original: título centrado, sin resumen. */
  body.cinta-movil-animada .cinta-movil { display: block; }
  /* El borde de entrada difumina solo las letras; la banda negra queda intacta. */
  .cinta-movil { --espera-cinta: 1s; --revelado-cinta: .5s; -webkit-mask-image: linear-gradient(to right,#000 0%,#000 max(76%,var(--fin-titulo-cinta,76%)),transparent 100%); mask-image: linear-gradient(to right,#000 0%,#000 max(76%,var(--fin-titulo-cinta,76%)),transparent 100%); }
  .cinta-movil-pista { width: max-content; height: 100%; display: flex; align-items: center; }
  body.cinta-movil-animada .cinta-movil-pista { animation: cintaHaciaIzquierda var(--duracion-cinta,18s) linear infinite; animation-delay: calc(var(--espera-cinta) + var(--revelado-cinta)); animation-fill-mode: backwards; }
  .cinta-movil-tramo { flex: 0 0 auto; min-width: 94vw; padding: 0 24px 0 var(--inicio-cinta,24px); font: inherit; text-shadow: 0 1px 4px rgb(12 47 47 / .5); color: #fff; white-space: nowrap; text-align: left; }
  body.cinta-movil-animada .cinta-movil-detalle { animation: revelarDetalleCinta var(--revelado-cinta) ease-out var(--espera-cinta) both; }
  body.cinta-movil-animada .cinta-movil-tramo + .cinta-movil-tramo { animation: revelarDetalleCinta var(--revelado-cinta) ease-out var(--espera-cinta) both; }
  body.pausada .cinta-movil-pista, body.oculta .cinta-movil-pista { animation-play-state: paused; }
  body.pausada .cinta-movil-detalle, body.oculta .cinta-movil-detalle,
  body.pausada .cinta-movil-tramo, body.oculta .cinta-movil-tramo { animation-play-state: paused; }
  body.modo-edicion .cinta-movil, body.trons-seleccionando .cinta-movil { display: none; }
  body.modo-edicion .izquierda .fila.activa, body.trons-seleccionando .izquierda .fila.activa { color: #fff; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .cinta-movil { -webkit-mask-image: none; mask-image: none; }
  .cinta-movil-pista { animation: none !important; transform: none; width: 100%; }
  .cinta-movil-detalle { animation: none !important; opacity: 1; filter: none; }
  .cinta-movil-tramo { min-width: 0; width: 100%; padding: 0 14px; white-space: normal; font-size: 12px; }
  .cinta-movil-tramo + .cinta-movil-tramo { display: none; }
}
.pie-bienvenida { position: absolute; bottom: 5%; left: 4.4%; right: 4.4%; display: flex; justify-content: space-between; align-items: center;
  font: 500 clamp(8px,.64vw,10px)/1.6 var(--mono); letter-spacing: .08em; }
.positivos { background: #101211; }
.mesa-luz { position: absolute; inset: 0; background: radial-gradient(ellipse at 45% 35%,#596456,#141917 75%); }
.hojas-positivos { position: absolute; top: 10%; left: 28%; width: 47%; height: 60%; }
.hoja { display: block; position: absolute; inset: 0; background: #f6f6dcdb; border: 1px solid #ffffffba; box-shadow: 0 14px 28px #0005; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.hoja.trasera { transform: translate(-14%,2%) rotate(-18deg); }
.hoja.media { transform: translate(14%,4%) rotate(14deg); }
.hoja.frontal { transform: rotate(-3deg); padding: 12% 9%; }
.hoja img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(3); mix-blend-mode: multiply; }
.registro { position: absolute; left: 46%; color: #161812; font: 16px var(--mono); }
.registro-superior { top: 1%; }.registro-inferior { bottom: 1%; }
.positivos .sello { font-size: clamp(24px,2.5vw,43px); bottom: 11%; color: #f8ffe9; }
body.pausada .hoja, body.oculta .hoja { transition: none; }
.editable { translate: var(--ed-x, 0px) var(--ed-y, 0px); }
body.modo-edicion .editable { outline: 1px dashed rgb(0 211 239 / .75); outline-offset: 4px; cursor: grab; }
body.modo-edicion .editable:focus, body.modo-edicion .editable.editor-seleccionado { outline: 2px solid var(--verde); outline-offset: 5px; }
body.modo-edicion .editable[contenteditable='true'], body.modo-edicion .editable[contenteditable='plaintext-only'] { cursor: text; }
.boton-editor[aria-pressed='true'], #modo-edicion[aria-pressed='true'] { background: var(--verde); color: #0b100a; border-color: #0b100a; }
.color-mando input[type='color'] { height: 32px; padding: 2px; border: 1px solid #354131; background: #121a15; cursor: pointer; }
.archivo-mando input[type='file'] { width: 100%; padding: 7px 4px; color: #dbead4; font: 10px Archivo, sans-serif; }
#editor-elemento { text-transform: none; }
#aviso-editor { margin-bottom: 0; }
#panel { position: fixed; z-index: 40; right: 16px; top: 16px; width: 302px; max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain; background: #090e0df5; color: #e4ebdf; backdrop-filter: blur(16px);
  border: 1px solid #3c4639; border-radius: 3px; padding: 17px; color-scheme: dark; box-shadow: 0 16px 60px #0005; }
.cabeza-panel { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.cabeza-panel h2 { margin: 0; color: var(--cian); font: 10px var(--mono); letter-spacing: .08em; }
.cabeza-panel button, .boton-panel { background: #121a15; border: 1px solid #3d4c38; color: #e9f5dc; padding: 7px 9px; font: 10px var(--mono); }
.boton-panel:hover, .cabeza-panel button:hover { background: #b4e878; color: #0b100a; }
.nota-panel { font: 11px/1.6 Archivo, sans-serif; color: #98a393; margin: 11px 0; }
fieldset { margin: 22px 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: 14px; color: #d0ddc9; font: 10px var(--mono); letter-spacing: .08em; }
.mando { display: grid; gap: 8px; margin: 0 0 15px; font: 10px/1.55 var(--mono); color: #9ca795; text-transform: uppercase; }
.mando > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mando output { color: var(--verde); font-weight: 500; white-space: nowrap; }
.mando input { width: 100%; margin: 0; accent-color: var(--verde); }
.mando select { width: 100%; padding: 9px 6px; background: #121a15; border: 1px solid #354131; color: #e3efdb; font: 11px Archivo, sans-serif; }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.casilla input { accent-color: var(--verde); }
.acciones-panel { display: flex; gap: 8px; justify-content: space-between; }
#cursor-oficial { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; display: none; }
#cursor-oficial img { display: block; width: 36px; height: 45px; filter: drop-shadow(0 3px 6px #0007);
  transform-origin: 5.7px .2px; transition: transform .2s; }
body.con-raton #cursor-oficial { display: block; }
body.con-raton, body.con-raton button, body.con-raton input, body.con-raton a, body.con-raton select,
body.con-raton [role='button'], body.con-raton .fila, body.con-raton canvas { cursor: none; }
#cursor-oficial.activo img { transform: scale(1.16); }
#detalle { width: min(640px,calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: clamp(26px,5vw,60px);
  border: 1px solid #d6daae; background: #f5f0d9; color: #10160e; box-shadow: 0 30px 100px #0005; }
#detalle::backdrop { background: #0b160ba8; backdrop-filter: blur(9px); }
#cerrar-detalle { position: absolute; top: 12px; right: 12px; border: 0; background: none; padding: 8px; font-size: 20px; }
#detalle h2 { font-size: clamp(32px,5vw,56px); line-height: .98; letter-spacing: -.055em; margin: 28px 0 20px; }
#detalle p { font-size: 17px; line-height: 1.6; }
#detalle ul { padding-left: 20px; line-height: 1.85; margin-bottom: 30px; }
.enlace-area { display: inline-block; padding: 15px 18px; color: #0a1810; background: var(--cian); font-weight: 700; text-decoration: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sin-js { position: absolute; bottom: 90px; left: 10%; right: 10%; background: #fff3c2; padding: 15px; text-align: center; }
@media (min-width: 761px) and (max-height: 719px) {
  #bienvenida { min-height: 420px; }
  .encabezado { top: 24px; }
  .firma { margin: 6px 0 9px; }
  #marca { font-size: clamp(52px,7.1vw,92px); }
  .introduccion { font-size: 10px; }
  .herramientas { top: 16px; }
  .pie-bienvenida { bottom: 3%; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  :root { --paso: min(var(--paso-ajuste), 32px); }
  .firma-pequena { letter-spacing: .12em; }
  .fila { font-size: 12px; }
  .derecha .fila { font-size: 10px; }
}
@media (max-width: 760px) {
  /* Una composición centrada que cabe también con las barras del navegador móvil. */
  :root { --tamano: min(74vw, 36svh, 340px); --paso: min(var(--paso-ajuste), 5.9svh); }
  .marco { border-width: 4px; }
  #bienvenida { min-height: 520px; height: 100svh; }
  .herramientas { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); left: 18px; right: 18px; justify-content: center; }
  .herramientas button { font-size: 9px; padding: 9px 10px; }
  .encabezado { top: max(4.4svh, env(safe-area-inset-top)); left: 24px; right: 24px; width: auto; max-width: none; text-align: center; }
  .cota { font-size: clamp(6px, 1.85vw, 8px); }
  #marca { font-size: clamp(54px,16vw,76px); }
  .firma { gap: 10px; margin: 9px auto 4px; }
  .red-marca { gap: 10px; }
  .firma-ig { margin-top: .12em; }
  .icono-instagram { height: clamp(30px,8.6vw,42px); }
  .icono-tiktok { height: clamp(32px,9.2vw,45px); }
  .firma-pequena { display: none; }
  .introduccion { font-size: 9px; line-height: 1.35; letter-spacing: .045em; }
  .selector { top: 0; bottom: 0; left: 6%; right: 6%; height: auto; display: block; transform: none; }
  .centro { position: absolute; top: 43.5%; left: 50%; width: var(--tamano); margin: 0; transform: translate(-50%,-50%); }
  .centro::before { display: none; }
  .izquierda { position: absolute; top: 78.5%; width: 100%; height: min(140px,19svh); margin: 0; transform: translateY(-50%); }
  .izquierda .lista { inset: 0; mask-image: linear-gradient(transparent,#000 22%,#000 78%,transparent); }
  .izquierda .fila { text-align: center; justify-content: center; font-size: 14px; transform-origin: center; padding: 0 30px; }
  .derecha { display: none; }
  .descripcion-movil { display: none; }
  .rotulo-regalo strong { font-size: 20px; }
  .rotulo-regalo span { font-size: 24px; }
  .rotulo-regalo { padding: 10px 12px; }
  .sello { font-size: 32px; }
  .uniformes .sello { font-size: 27px; }
  .pie-imagen { font-size: 7px; }
  .software-pie { font-size: 20px; }
  .software-cota { font-size: 7px; }
  .abrir-area > span { opacity: 1; transform: none; font-size: 9px; top: 9px; right: 9px; padding: 6px 8px; }
  .pie-bienvenida { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 43px); left: 7%; right: 7%; justify-content: center; text-align: center; }
  .origen { font-size: 6px; line-height: 1.3; }
  .firma-pie { display: none; }
  #panel { width: min(320px,calc(100% - 24px)); right: 12px; top: 12px; max-height: calc(100dvh - 24px); }
}
@media (max-width: 760px) and (max-height: 640px) {
  #marca { font-size: clamp(44px,14vw,58px); }
  .cota { font-size: 6px; }
  .introduccion { font-size: 8.5px; }
}
@media (pointer: coarse) { #cursor-oficial { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (prefers-reduced-motion: reduce) {
  .marca-glitch { animation: none !important; opacity: 0 !important; }
  .encabezado-magnetico { transform: none !important; transition: none !important; }
}
body.pausada .fila { transition: none; }