/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — LA PUERTA ÚNICA
   ───────────────────────────────────────────────────────────────────────────
   «Contame qué querés hacer». La caja, las preguntas con botones, la tarjeta
   del plan, el avance y el resultado. Se usa en dos lugares con las mismas
   reglas: la portada (/), donde se apoya sobre la intro muda, y /crear/, a
   pantalla completa.

   Todo sale de los tokens que el sitio ya tiene (estetica.css: --g0…--g10,
   --tinta, --acento). Ningún color suelto: el único que no es un token es el
   negro del velo sobre el video, que es una sombra y no un color de marca.

   Estética: alto contraste, filetes de 1 px, rótulos chicos con tracking,
   serif cursiva para lo que se dice en voz baja. Sin degradés de color: el
   único degradé es el velo negro que protege el texto sobre la imagen.
   ═══════════════════════════════════════════════════════════════════════════ */

.entrada {
  --e-linea: var(--linea-fuerte, rgba(213, 232, 240, .36));
  --e-linea-suave: var(--linea, rgba(213, 232, 240, .17));
  --e-panel: var(--g2, #304b59);
  --e-panel-2: var(--g1, #354f5d);
  --e-tinta: var(--tinta, #edf2f4);
  --e-tenue: var(--tinta-dim, #d5e1e7);
  --e-acento: var(--acento, var(--gr-rosa));
  --e-acento-tinta: var(--acento-ink, #28161f);
  --e-error: #ffb4a8;
  --e-ok: var(--verde, #9dd5b7);
  position: relative;
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(26px, 5vw, 64px) clamp(16px, 4vw, 30px) clamp(34px, 6vw, 72px);
  color: var(--e-tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  box-sizing: border-box;
}
.entrada *, .entrada *::before, .entrada *::after { box-sizing: border-box; }
.entrada [hidden] { display: none !important; }
/* Los reinicios van con :where(): especificidad cero, para que cada botón
   (acento, borde, generar) pueda poner su propio color sin pelear. */
:where(.entrada) :is(button, input, textarea) { font: inherit; color: inherit; }
:where(.entrada) button { cursor: pointer; touch-action: manipulation; }
.entrada button:disabled { cursor: not-allowed; opacity: .5; }
:where(.entrada) p { margin: 0; }
:where(.entrada) a { color: inherit; }

.entrada :is(button, a, input, textarea, summary):focus-visible {
  outline: 2px solid var(--e-acento);
  outline-offset: 3px;
}

/* Solo para lectores de pantalla. */
.entrada .solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── La portada: sobre la intro muda ────────────────────────────────────────
   El fondo es negro y lo que hay que proteger es el texto: se sube la opacidad
   del panel y se le da una sombra suave a lo que queda suelto. */
.entrada--portada {
  --e-panel: rgba(6, 8, 10, .66);
  --e-panel-2: rgba(6, 8, 10, .74);
  --e-linea: rgba(242, 242, 240, .34);
  --e-linea-suave: rgba(242, 242, 240, .18);
  --e-tinta: #f2f2f0;
  --e-tenue: rgba(242, 242, 240, .8);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .55);
}
.entrada--portada :is(.entrada-caja, .entrada-tarjeta, .entrada-pieza, .entrada-cajon) { text-shadow: none; }

/* ═══════════════════════════════════════════════════════════════ TÍTULO ══ */
.entrada-titulo {
  margin: 0 0 clamp(20px, 3.4vw, 36px);
  font-family: var(--f-rara);
  font-weight: 600;
  font-size: clamp(36px, 8.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
  color: var(--e-tinta);
}
.entrada-titulo em {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--e-acento);
}

/* ═══════════════════════════════════════════════════════════════ LA CAJA ══ */
.entrada-caja {
  position: relative;
  padding: clamp(14px, 2.4vw, 22px);
  border: 1px solid var(--e-linea);
  border-radius: 20px;
  background: var(--e-panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color .2s linear, box-shadow .2s linear;
}
.entrada-caja:focus-within, .entrada-caja.soltando {
  border-color: var(--e-acento);
  box-shadow: 0 0 0 1px var(--e-acento);
}
.entrada-texto {
  display: block;
  width: 100%;
  min-height: 92px;
  max-height: 40vh;
  padding: 0;
  resize: vertical;
  border: 0;
  background: transparent;
  outline: none !important;
  font-size: clamp(18px, 2.6vw, 25px);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -.01em;
}
.entrada-texto::placeholder {
  color: var(--e-tenue);
  opacity: .72;
  font-family: var(--f-serif);
}
.entrada-contador {
  position: absolute; right: 22px; top: 14px;
  font: 500 11px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .08em;
  color: var(--e-tenue);
}
.entrada-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.entrada-sumar { display: flex; flex-wrap: wrap; gap: 8px; }
.entrada-sumar-boton {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--e-linea); border-radius: 999px;
  background: transparent;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  transition: background .15s linear, border-color .15s linear;
}
.entrada-sumar-boton:hover { background: var(--e-linea-suave); border-color: var(--e-tinta); }
.entrada-seguir {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--e-acento); color: var(--e-acento-tinta);
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  transition: filter .15s linear, transform .15s linear;
}
.entrada-seguir:hover { filter: brightness(1.08); }
.entrada-seguir:active { transform: translateY(1px); }

/* Los archivos sumados. */
.entrada-adjuntos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.entrada-adjunto {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; min-height: 40px; padding: 4px 6px 4px 8px;
  border: 1px solid var(--e-linea-suave); border-radius: 12px;
  background: var(--e-linea-suave);
  font-size: 12.5px;
}
.entrada-adjunto img { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; }
.entrada-adjunto-nombre { min-width: 0; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entrada-adjunto-quitar {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: transparent;
}
.entrada-adjunto-quitar:hover { background: var(--e-linea-suave); }

/* Los ejemplos. */
.entrada-pruebas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 16px; font-size: 13px; }
.entrada-pruebas-rotulo { color: var(--e-tenue); }
.entrada-prueba {
  min-height: 36px; padding: 4px 2px; border: 0; background: none;
  font-family: var(--f-serif); font-size: 16px; letter-spacing: -.005em;
  text-align: left;
  border-bottom: 1px solid var(--e-linea);
}
.entrada-prueba:hover { border-bottom-color: var(--e-acento); color: var(--e-acento); }

/* Lo que se dice en voz baja. */
.entrada-estado { min-height: 1.6em; margin-top: 14px; font-size: 13px; color: var(--e-tenue); }
.entrada-estado:empty { min-height: 0; margin: 0; }
.entrada-falla, .entrada-falla-chica { margin-top: 12px; font-size: 13.5px; color: var(--e-error); }
.entrada-nota { font-size: 13px; color: var(--e-tenue); }

.entrada-cuenta {
  margin-top: 14px; padding: 16px 18px;
  border: 1px solid var(--e-linea); border-radius: 14px; background: var(--e-panel);
}
.entrada-cuenta p { margin-bottom: 12px; }

/* ═════════════════════════════════════════════ BOTONES Y FILAS COMUNES ══ */
.entrada-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.entrada-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  transition: background .15s linear, border-color .15s linear, filter .15s linear;
}
.entrada-boton-acento { background: var(--e-acento); color: var(--e-acento-tinta); }
.entrada-boton-acento:hover { filter: brightness(1.08); }
.entrada-boton-borde { background: transparent; border-color: var(--e-linea); color: var(--e-tinta); }
.entrada-boton-borde:hover { border-color: var(--e-tinta); background: var(--e-linea-suave); }
.entrada-enlace {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 32px; padding: 0; border: 0; background: none;
  font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--e-linea);
  color: var(--e-tinta);
}
.entrada-enlace:hover { text-decoration-color: var(--e-acento); color: var(--e-acento); }

/* ══════════════════════════════════════════════════════════ PREGUNTAS ══ */
.entrada-preguntas { display: grid; gap: 22px; margin-top: 28px; }
.entrada-preguntas:empty { margin: 0; }
.entrada-leyenda { margin-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--e-tinta); }
.entrada-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.entrada-opcion {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid var(--e-linea); border-radius: 999px;
  background: var(--e-panel);
  font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  text-align: left;
  transition: background .15s linear, border-color .15s linear, color .15s linear;
}
.entrada-opcion:hover { border-color: var(--e-tinta); }
.entrada-opcion-precio { font: 500 12.5px/1 var(--mono, ui-monospace, monospace); color: var(--e-tenue); }
.entrada-opcion-plan { font-size: 11px; color: var(--e-tenue); text-transform: uppercase; letter-spacing: .08em; }
/* El punto marca la que viene puesta: el color solo no alcanza para quien no
   lo distingue, así que también cambia el relleno y aparece el aro. */
.entrada-punto {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--e-linea); background: transparent;
}
.entrada-opcion[aria-pressed="true"] {
  border-color: var(--e-tinta); background: var(--e-tinta); color: var(--g0, #1f2a30);
}
.entrada-opcion[aria-pressed="true"] .entrada-opcion-precio,
.entrada-opcion[aria-pressed="true"] .entrada-opcion-plan { color: inherit; opacity: .72; }
.entrada-opcion[aria-pressed="true"] .entrada-punto { border-color: var(--g0, #1f2a30); background: var(--g0, #1f2a30); }
.entrada--portada .entrada-opcion[aria-pressed="true"] { color: #0a0a0b; }
.entrada--portada .entrada-opcion[aria-pressed="true"] .entrada-punto { border-color: #0a0a0b; background: #0a0a0b; }

/* La mirada: ocho tarjetas con imagen y «Elegí por mí». */
.entrada-estilos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 10px; }
.entrada-estilo {
  display: flex; flex-direction: column; gap: 7px; padding: 0; min-width: 0;
  border: 0; background: none; text-align: left;
}
.entrada-estilo-muestra {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 10px;
  background-color: var(--e-panel); background-size: cover; background-position: center;
  border: 1px solid var(--e-linea);
  transition: border-color .15s linear, box-shadow .15s linear;
}
.entrada-estilo-auto { display: grid; place-items: center; color: var(--e-acento); }
.entrada-estilo-sin { display: flex; align-items: flex-end; padding: 8px 8px 9px; }
.entrada-estilo-bajada {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
  font-family: var(--f-serif); font-size: 12.5px; line-height: 1.2; color: var(--e-tenue); overflow-wrap: break-word;
}
.entrada-estilo-nombre { font-size: 12.5px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.entrada-estilo:hover .entrada-estilo-muestra { border-color: var(--e-tinta); }
.entrada-estilo[aria-pressed="true"] .entrada-estilo-muestra { border-color: var(--e-acento); box-shadow: 0 0 0 2px var(--e-acento); }
.entrada-estilo[aria-pressed="true"] .entrada-estilo-nombre { color: var(--e-acento); }
.entrada-estilo[aria-pressed="true"] .entrada-estilo-muestra::after {
  content: '✓'; position: absolute; top: 6px; right: 6px;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--e-acento); color: var(--e-acento-tinta); font-size: 11px; font-weight: 700; line-height: 1;
}

/* ═══════════════════════════════════════════════════════════ LA TARJETA ══ */
.entrada-tarjeta-zona { margin-top: 28px; }
.entrada-tarjeta-zona:empty { margin: 0; }
.entrada-tarjeta, .entrada-pieza {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--e-linea); border-radius: 20px;
  background: var(--e-panel);
}
.entrada-rotulo {
  margin-bottom: 16px;
  font: 500 11px/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: .2em; text-transform: uppercase; color: var(--e-acento);
}
.entrada-tarjeta-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.entrada-tarjeta-cuerpo:has(.entrada-foto) { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.entrada-foto { margin: 0; }
.entrada-foto img {
  display: block; width: clamp(84px, 16vw, 128px); aspect-ratio: 3 / 4;
  border-radius: 12px; object-fit: cover; border: 1px solid var(--e-linea-suave);
}
.entrada-datos { display: grid; gap: 10px; min-width: 0; }
.entrada-titulo-campo { position: relative; display: block; }
.entrada-titulo-input {
  width: 100%; padding: 2px 70px 6px 0;
  border: 0; border-bottom: 1px solid var(--e-linea); border-radius: 0; background: transparent;
  font: 600 clamp(19px, 2.8vw, 26px)/1.25 var(--f-rara);
  letter-spacing: -.025em;
}
.entrada-titulo-input:focus-visible { outline: 0; border-bottom-color: var(--e-acento); }
.entrada-editable {
  position: absolute; right: 0; bottom: 9px;
  font-size: 11.5px; color: var(--e-tenue);
}
.entrada-recibir b, .entrada-hace b { font-weight: 600; }
.entrada-recibir, .entrada-hace { font-size: 14.5px; }

.entrada-aviso {
  display: grid; gap: 10px; margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--e-linea); border-left: 3px solid var(--e-acento); border-radius: 10px;
  background: var(--e-linea-suave); font-size: 13.5px;
}

.entrada-precio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--e-linea-suave);
  font: 500 15px/1.4 var(--mono, ui-monospace, monospace);
}
.entrada-precio strong { font-weight: 700; font-size: 18px; }
.entrada-espera { margin-top: 6px; font-size: 13px; color: var(--e-tenue); }

.entrada-consentimiento {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 18px;
  padding: 10px 0; font-size: 13.5px; cursor: pointer;
}
.entrada-consentimiento input {
  flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--e-acento); cursor: pointer;
}
.entrada-consentimiento input[aria-invalid="true"] { outline: 2px solid var(--e-error); outline-offset: 2px; }
.entrada-consentimiento-nota { margin: -4px 0 6px 34px; font-size: 13px; color: var(--e-error); }

.entrada-faltan { display: grid; gap: 10px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--e-linea); border-radius: 12px; }
.entrada-faltan-texto { font-weight: 500; }
.entrada-alternativas { display: flex; flex-wrap: wrap; gap: 8px; }

.entrada-generar {
  display: block; width: 100%; min-height: 58px; margin-top: 20px; padding: 0 24px;
  border: 0; border-radius: 14px;
  background: var(--e-acento); color: var(--e-acento-tinta);
  font: 700 15px/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; text-indent: .22em;
  transition: filter .15s linear, transform .15s linear;
}
.entrada-generar:hover:not(:disabled) { filter: brightness(1.08); }
.entrada-generar:active:not(:disabled) { transform: translateY(1px); }
.entrada-generar:disabled { background: var(--e-linea-suave); color: var(--e-tenue); opacity: 1; border: 1px solid var(--e-linea); }
.entrada-guardamos { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--e-tenue); }

.entrada-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 16px; }
.entrada-separador { color: var(--e-tenue); }
.entrada-mas { display: grid; gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--e-linea-suave); }
.entrada-pedido { margin-top: 14px; font-size: 13px; }
.entrada-pedido summary { cursor: pointer; color: var(--e-tenue); min-height: 32px; }
.entrada-pedido pre {
  margin: 8px 0 0; padding: 12px 14px; max-height: 240px; overflow: auto;
  border: 1px solid var(--e-linea-suave); border-radius: 10px; background: var(--e-linea-suave);
  font: 12px/1.55 var(--mono, ui-monospace, monospace); white-space: pre-wrap; overflow-wrap: anywhere;
}
.entrada-propuesta {
  margin: 14px 0 18px; padding: 4px 0 4px 16px; border-left: 3px solid var(--e-acento);
  font-family: var(--f-serif); font-size: 20px; line-height: 1.35;
}

/* ══════════════════════════════════════════════ AVANCE Y RESULTADO ══ */
.entrada-piezas { display: grid; gap: 16px; margin-top: 28px; }
.entrada-piezas:empty { margin: 0; }
.entrada-pieza-titulo {
  margin: 0 0 14px; font: 500 11px/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: .2em; text-transform: uppercase; color: var(--e-acento);
}
.entrada-avance { display: grid; gap: 12px; }
.entrada-avance-titulo { font: 600 clamp(20px, 3vw, 28px)/1.2 var(--f-rara); letter-spacing: -.03em; }
.entrada-avance-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.entrada-avance-lista li { display: flex; align-items: center; gap: 10px; color: var(--e-tenue); }
.entrada-avance-lista li.hecho { color: var(--e-ok); }
.entrada-avance-lista li.hecho .entrada-punto { background: var(--e-ok); border-color: var(--e-ok); }
.entrada-avance-lista li.activa { color: var(--e-tinta); }
.entrada-avance-lista li.activa .entrada-punto { background: var(--e-acento); border-color: var(--e-acento); animation: entrada-latido 1.4s ease-in-out infinite; }
@keyframes entrada-latido { 50% { opacity: .35; } }
.entrada-barra-avance { height: 3px; overflow: hidden; border-radius: 3px; background: var(--e-linea-suave); }
.entrada-barra-avance i { display: block; height: 100%; background: var(--e-acento); transition: width .6s ease; }

/* La pieza mide su propio ancho (23/10/2026). En /crear/ y en la portada, de 1280 a 1920 px, la pieza va
   en una columna de 400 a 470 px: con la imagen a 340 px, el costado medía 23–43 px y «Listo.»,
   «Descargar», «Otra versión», «Darle movimiento», la encuesta y la etiqueta se salían de la pieza
   (pasaba antes de «¿Qué cambiar?»). Ahora la pieza es un contenedor y el resultado va en dos columnas
   solo si adentro hay 600 px o más (la imagen y, al lado, un costado de 230 px o más); si no, va en una:
   la imagen arriba y todo lo demás debajo, a lo ancho. Lo mismo a cualquier ancho de pantalla. */
.entrada-pieza { container: entrada-pieza / inline-size; }
.entrada-resultado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px clamp(16px, 3vw, 28px); align-items: start; }
.entrada-resultado-falla { grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container entrada-pieza (min-width: 600px) {
  .entrada-resultado:not(.entrada-resultado-falla) { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); row-gap: clamp(16px, 3vw, 28px); }
}
.entrada-medio { overflow: hidden; border-radius: 14px; background: #000; border: 1px solid var(--e-linea-suave); }
.entrada-medio img, .entrada-medio video { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.entrada-resultado-lado { display: grid; gap: 14px; min-width: 0; }
.entrada-pieza-nombre { font-size: 14px; color: var(--e-tenue); overflow-wrap: anywhere; }
.entrada-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.entrada-confirmar { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--e-linea); border-radius: 12px; font-size: 13.5px; }
/* «¿Qué cambiar?» (23/10/2026): al salir el cambio, el foco va a la pieza nueva, que no es un control y no lleva anillo. */
.entrada-pieza[tabindex="-1"]:focus { outline: none; }
/* «¿Qué cambiar?» (pedir-cambio.js): debajo de la imagen o del video. Con la pieza en dos columnas va en la columna del
   resultado, bajo el medio, y el costado ocupa las dos filas (la fila 2 es flexible: lo que el costado mida de más va ahí y no
   separa la imagen del campo). Con la pieza en una columna (el celular, y desde el 23/10/2026 también la pieza angosta de la
   computadora), el costado se abre (display: contents) para que el campo vaya justo después de los botones y antes de «Ya está en
   Mis creaciones», la encuesta y la etiqueta; al fondo no se encontraba. Hasta el 23/10/2026 esto se decidía por el ancho de la
   pantalla (640 px) y no por el de la pieza. */
.entrada-resultado > .pc { grid-column: 1 / -1; order: 1; }
.entrada-resultado:has(> .pc) > .entrada-resultado-lado { display: contents; }
.entrada-resultado:has(> .pc) > .entrada-resultado-lado > :not(.entrada-avance-titulo, .entrada-pieza-nombre, .entrada-acciones, .entrada-confirmar, .entrada-descargado, .entrada-falla-chica) { order: 2; }
@container entrada-pieza (min-width: 600px) {
  .entrada-resultado:has(> .pc) { grid-template-rows: auto 1fr; }
  .entrada-resultado:has(> .pc) > .entrada-resultado-lado { display: grid; grid-column: 2; grid-row: 1 / span 2; }
  .entrada-resultado:has(> .pc) > .entrada-resultado-lado > * { order: 0; }
  .entrada-resultado > .pc { grid-column: 1; grid-row: 2; order: 0; }
}
/* Una tanda («Versión 1 de 2», revisión del 23/10/2026): su grilla es de una sola columna a cualquier ancho
   (`.entrada-tanda .entrada-resultado`, más abajo). Mandar el costado a la columna 2 inventaba otra y dejaba la imagen y el campo
   en 0 px, con el texto encima de «Listo.», los botones y la encuesta. Ahí va siempre como en el celular: el costado se abre y el
   campo queda después de los botones. Estas reglas pesan más que las de la pieza ancha (una clase más). */
.entrada-tanda .entrada-resultado:has(> .pc) { grid-template-rows: none; row-gap: 14px; }
.entrada-tanda .entrada-resultado:has(> .pc) > .entrada-resultado-lado { display: contents; }
.entrada-tanda .entrada-resultado > .pc { grid-column: 1 / -1; grid-row: auto; order: 1; }
.entrada-tanda .entrada-resultado:has(> .pc) > .entrada-resultado-lado > :not(.entrada-avance-titulo, .entrada-pieza-nombre, .entrada-acciones, .entrada-confirmar, .entrada-descargado, .entrada-falla-chica) { order: 2; }
.entrada-ya-esta a { text-decoration: underline; text-underline-offset: 3px; }
.entrada-legal { font-size: 11.5px; color: var(--e-tenue); }

/* ═══════════════════════════════════════════════════ EL VIDEOCLIP Y LA BAJADA ══ */
.entrada-videoclip {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: clamp(26px, 4vw, 40px); max-width: 100%;
  text-decoration: none; color: var(--e-tinta);
}
.entrada-videoclip > svg {
  flex: none; box-sizing: content-box; width: 18px; height: 18px; padding: 15px 15px 15px 17px;
  border-radius: 50%; background: var(--e-acento); color: var(--e-acento-tinta);
  transition: transform .2s ease;
}
.entrada-videoclip:hover > svg { transform: scale(1.06); }
.entrada-videoclip-texto {
  font: 700 clamp(15px, 2.4vw, 19px)/1.1 var(--sans);
  letter-spacing: .18em; padding-bottom: 5px; border-bottom: 2px solid var(--e-acento);
}
.entrada-videoclip-bajada { flex-basis: 100%; margin-left: 66px; font-size: 13.5px; color: var(--e-tenue); }
.entrada-bajada {
  margin-top: clamp(30px, 5vw, 52px);
  font-family: var(--f-serif); font-size: clamp(20px, 3vw, 28px); color: var(--e-tenue);
}

/* ═══════════════════════════════════════════════ EL CAJÓN «¿QUÉ HACE?» ══ */
.entrada-cajon {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 26px 26px 30px;
  width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  border: 0; border-left: 1px solid var(--e-linea);
  background: var(--g2, #304b59); color: var(--e-tinta);
  overflow-y: auto; overscroll-behavior: contain;
}
.entrada-cajon::backdrop { background: rgba(0, 0, 0, .55); }
.entrada-cajon-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.entrada-cajon-titulo { margin: 0; font: 600 clamp(22px, 4vw, 28px)/1.15 var(--f-rara); letter-spacing: -.035em; }
.entrada-cajon-cerrar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 50%; background: transparent; }
.entrada-cajon-cerrar:hover { background: var(--e-linea-suave); }
.entrada-cajon-modelo { margin: 6px 0 22px; font: 500 11px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--e-acento); }
.entrada-cajon-lista { display: grid; gap: 4px; margin: 0 0 18px; }
.entrada-cajon-lista dt { margin-top: 12px; font: 500 11px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--e-tenue); }
.entrada-cajon-lista dd { margin: 0; font-size: 14.5px; }
.entrada-cajon-nota { margin-top: 10px; font-size: 13px; color: var(--e-tenue); }
.entrada-cajon-legal { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--e-linea-suave); font-size: 12px; color: var(--e-tenue); }

/* ════════════════════════════════════════════════════════════ CELULAR ══ */
@media (max-width: 640px) {
  .entrada { padding-inline: 16px; }
  .entrada-barra { flex-direction: column; align-items: stretch; }
  .entrada-sumar { justify-content: flex-start; }
  .entrada-seguir { width: 100%; }
  .entrada-contador { top: auto; bottom: 74px; }
  .entrada-tarjeta-cuerpo:has(.entrada-foto) { grid-template-columns: minmax(0, 1fr); }
  .entrada-foto img { width: 96px; }
  .entrada-opcion { min-height: 48px; }
  .entrada-videoclip { display: flex; }
  .entrada-videoclip-bajada { margin-left: 0; }
  .entrada-cajon {
    inset: auto 0 0 0; width: 100%; height: auto; max-height: 86dvh;
    border-left: 0; border-top: 1px solid var(--e-linea); border-radius: 20px 20px 0 0;
  }
}

/* ═════════════════════════════════════════ LA IA QUE ENTIENDE · LA ETIQUETA ══
   Lo que leyó la IA va en voz baja, con un sello chico: se ve qué entendió sin
   que pese más que el precio. La nota de «hoy no pudimos leer» no es un error:
   es una línea tenue, sin color de alerta. */
.entrada-entendi { font-size: 13.5px; color: var(--e-tenue); }
.entrada-entendi b { font-weight: 600; color: var(--e-tinta); }
.entrada-ia-sello {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  border: 1px solid var(--e-linea); border-radius: 999px;
  font: 600 9.5px/1.5 var(--mono, ui-monospace, monospace); letter-spacing: .12em; color: var(--e-tenue);
  vertical-align: 1px;
}
.entrada-ia-nota, .entrada-ia-pista { font-size: 13px; color: var(--e-tenue); }
.entrada-ia-pista a { text-decoration: underline; text-underline-offset: 3px; }
.entrada-runway, .entrada-denunciar { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.entrada-runway:hover, .entrada-denunciar:hover { color: var(--e-acento); }

@media (prefers-reduced-motion: reduce) {
  .entrada *, .entrada *::before, .entrada *::after { animation: none !important; transition: none !important; }
}

/* ═════════════════════════════════════════ VARIOS ARCHIVOS Y SIN TOPE (09/10/2026) ══
   Hasta 15 fotos, 5 videos y una canción. Con dos fotos o más, cada foto es una
   miniatura con su número (el de @Image1) y sin el nombre, para que 15 entren
   en dos renglones; los videos siguen como píldora, con su número. La subida
   muestra su avance dentro de la caja, con la misma barra fina del resultado. */
.entrada-sumar-cuenta {
  font: 500 11px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .04em; color: var(--e-tenue);
}
.entrada-sumar-boton.lleno { border-style: dashed; }
.entrada-sumar-boton.lleno .entrada-sumar-cuenta { color: var(--e-acento); }

.entrada-adjunto-numero {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--e-acento); color: var(--e-acento-tinta);
  font: 700 10.5px/1 var(--mono, ui-monospace, monospace);
}
.entrada-adjunto-compacto {
  position: relative; width: 52px; height: 52px; min-height: 0; padding: 0;
  border-radius: 12px; overflow: visible;
}
.entrada-adjunto-compacto img { width: 100%; height: 100%; border-radius: 11px; }
.entrada-adjunto-compacto .entrada-adjunto-numero { position: absolute; left: 4px; bottom: 4px; }
.entrada-adjunto-compacto .entrada-adjunto-quitar {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px;
  border: 1px solid var(--e-linea); background: var(--e-panel-2);
}
.entrada-adjunto-compacto .entrada-adjunto-quitar:hover { background: var(--e-tinta); color: var(--g0, #1f2a30); }

.entrada-subida { display: grid; gap: 8px; margin-top: 14px; }
.entrada-subida-fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.entrada-subida-texto {
  min-width: 0; font: 500 12px/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: .04em; color: var(--e-tenue); overflow-wrap: anywhere;
}
.entrada-subida-cancelar { min-height: 32px; font-size: 12.5px; }
/* Cuando el archivo ya llegó y el servidor lo prepara no hay porcentaje que
   mostrar: la barra late, como el punto de «Generando». */
.entrada-barra-avance.esperando i { animation: entrada-latido 1.4s ease-in-out infinite; }
.entrada-caja.subiendo .entrada-sumar-boton { cursor: progress; }

.entrada-archivos-aviso { margin-top: 10px; font-size: 13px; color: var(--e-tenue); }

/* Las fotos de un plan de varias referencias: hasta cuatro, y cuántas más. */
.entrada-fotos {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  width: clamp(84px, 16vw, 128px);
}
.entrada-fotos img { width: 100%; aspect-ratio: 1; border-radius: 8px; }
.entrada-fotos-mas {
  position: absolute; right: 4px; bottom: 4px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .66); color: #fff;
  font: 600 11px/1.3 var(--mono, ui-monospace, monospace);
}

/* El motor: el puesto y los que se pueden elegir, con su precio. */
.entrada-motores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.entrada-motores-rotulo {
  margin-right: 4px; font: 500 11px/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--e-tenue);
}

/* Una casilla por video (o por cara): la frase una vez arriba, cada archivo con su número. */
.entrada-permisos { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.entrada-permisos-frase { padding: 0; margin-bottom: 2px; font-size: 13.5px; }
.entrada-permisos .entrada-consentimiento { margin-top: 0; padding: 6px 0; }
.entrada-consentimiento span { min-width: 0; overflow-wrap: anywhere; }

.entrada-pedido-nota { margin-top: 8px; font-size: 12.5px; color: var(--e-tenue); }

@media (max-width: 640px) {
  .entrada-adjunto-compacto { width: 48px; height: 48px; }
  .entrada-fotos { width: 96px; }
}
/* El archivo que el servidor no aceptó: borde de aviso, como en Transferir movimiento. */
.entrada-adjunto-aviso { border-color: var(--e-error); box-shadow: 0 0 0 1px var(--e-error); }
/* Lo que usa un motor que no entra entero: «usa 9 de 15 fotos». */
.entrada-opcion-detalle { font-size: 11.5px; color: var(--e-tenue); }
.entrada-opcion[aria-pressed="true"] .entrada-opcion-detalle { color: inherit; opacity: .72; }
/* Con miniaturas, un poco más de aire: la ✕ de cada una cae en el hueco y no pisa la de al lado. */
.entrada-adjuntos:has(.entrada-adjunto-compacto) { gap: 12px 14px; padding-top: 4px; }

/* ═════════════════════════════════════════ LA CAJA CON HERRAMIENTAS (10/10/2026) ══
   Pedido del dueño: botones arriba de la caja (Automático, Imagen, Sonido,
   Video, Objetos 3D), un desplegable por tipo con cada marca y cada
   herramienta, y abajo la herramienta elegida con sus ajustes y el precio.
   Diseño: _etapa2/CAJA-MENU-HERRAMIENTAS.md, sección 1.7. Mismos tokens que
   el resto de la caja (petróleo, tinta, rosa) y las letras del sitio: Space
   Grotesk en nombres, Instrument Serif itálica en la palabra del tipo,
   Archivo en el texto y JetBrains Mono en rótulos, sellos y precios. */

/* ── Arriba: Automático y los tipos ──────────────────────────────────────── */
/* `contain: inline-size`: lo largo de adentro (la fila que se desliza, un
   nombre de herramienta largo) no ensancha la caja ni empuja la página de
   costado en el celular: el ancho lo pone la caja. */
/* Automático y, al lado, la pista con los tipos (la que se desliza si no
   entra). Posicionadas: los textos «solo para lectores» (que son absolutos)
   quedan adentro y no estiran la página. */
.entrada-tipos { position: relative; display: flex; gap: 8px; min-width: 0; margin: 0 0 12px; contain: inline-size; }
.entrada-tipos-pista {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.entrada-tipos-pista::-webkit-scrollbar { display: none; }
.entrada-tipo {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 15px;
  border: 1px solid var(--e-linea); border-radius: 999px;
  background: transparent;
  font-size: 13px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  transition: background .15s linear, border-color .15s linear, color .15s linear;
}
.entrada-tipo:hover { background: var(--e-linea-suave); border-color: var(--e-tinta); }
.entrada-tipo-flecha { font-size: 10px; line-height: 1; opacity: .7; }
.entrada-tipo-corto { display: none; }
/* Automático marcado, o el tipo de la herramienta elegida: relleno en tinta,
   como una opción marcada. El tipo elegido lleva además el punto rosa. */
.entrada-tipo[aria-pressed="true"], .entrada-tipo.con-elegida {
  border-color: var(--e-tinta); background: var(--e-tinta); color: var(--g0, #1f2a30);
}
.entrada--portada .entrada-tipo[aria-pressed="true"], .entrada--portada .entrada-tipo.con-elegida { color: #0a0a0b; }
.entrada-tipo.con-elegida::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--e-acento);
}
.entrada-tipo[aria-expanded="true"] { border-color: var(--e-acento); box-shadow: 0 0 0 1px var(--e-acento); }

/* Que los tipos se reconozcan como menús (23/10/2026; relevamiento de la caja, 7.4): la flecha
   era un «▾» de 9 px que parecía un guion. Ahora es un trazo de 12 px (entrada-herramientas.js) que
   baja un pelo al pasar y gira con el menú abierto. En el celular sigue escondida: ahí los cuatro
   tipos son una grilla de botones grandes. La grieta esconde los svg de las pestañas; este gana. */
@media (min-width: 641px) {
  .entrada-tipos .entrada-tipo-flecha {
    display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: -2px;
    font-size: 0; opacity: 1; color: currentColor;
    transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  }
  .entrada-tipos .entrada-tipo-flecha svg { display: block; width: 12px; height: 12px; stroke-width: 2.2; }
  .entrada-tipos .entrada-tipo:not([aria-expanded="true"]):hover .entrada-tipo-flecha { transform: translateY(2px); }
  .entrada-tipos .entrada-tipo[aria-expanded="true"] .entrada-tipo-flecha { transform: rotate(180deg); }
  /* Con la flecha más grande, «Objetos 3D» quedaba detrás del borde de la caja: menos aire entre la
     palabra y su flecha, y a los costados. */
  .entrada-tipos-pista .entrada-tipo { gap: 4px; padding-inline: 9px; }
}
/* /crear/ en La grieta desde 1440 px (23/10/2026, revisión): la columna del negro deja de crecer
   (449–457 px) y las cinco pestañas a 15 px pedían 461–478: «Objetos 3D» se salía 11–19 px y
   «Oggetti 3D» 21–29, cortada con su flecha. Entre 1200 y 1439 ya se achican (grieta.css); acá van
   a 14 px con menos aire entre pestaña y pestaña, y entran en un renglón también con el punto de
   una herramienta elegida. El subrayado sigue el ancho nuevo. Si un día un nombre no entra, baja
   de renglón (como entre 1200 y 1439) en vez de quedar cortado. La portada no cambia: es
   `.entrada--portada` y de 1200 a 1599 ya dice «3D». */
@media (min-width: 1440px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-tipos { flex-wrap: wrap; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-tipos-pista { gap: 2px; flex-wrap: wrap; overflow: visible; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-tipos .entrada-tipo { font-size: 14px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-tipos-pista .entrada-tipo { padding-inline: 7px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-tipos-pista .entrada-tipo::after { left: 7px; right: 7px; }
}

/* Con el desplegable abierto, la caja va por encima de la tarjeta de abajo. */
.entrada-caja.menu-abierto { z-index: 6; }

/* ── El desplegable (y la lista corta de cada ajuste) ──────────────────────
   En la computadora cae debajo de lo que lo abrió; en el celular es la hoja
   que sube desde abajo, como el cajón «¿Qué hace?». */
.entrada-menu {
  position: absolute; z-index: 20; inset: auto;
  margin: 0; padding: 18px 18px 12px;
  max-width: none; max-height: min(70vh, 560px);
  display: none; flex-direction: column; gap: 10px;
  border: 1px solid var(--e-linea); border-radius: 20px;
  background: var(--g2, #304b59); color: var(--e-tinta);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  overflow: hidden; text-shadow: none;
}
.entrada-menu[open] { display: flex; animation: entrada-menu-aparece .12s ease-out; }
@keyframes entrada-menu-aparece { from { opacity: 0; transform: translateY(6px); } }
.entrada-menu--herramientas:not(:modal) { left: 12px; width: min(680px, calc(100% - 24px)); }
/* El alto reservado mientras se buscan las herramientas (23/10/2026; relevamiento de los
   paneles, H6): el panel abría con 205 px y al llenarse crecía a 530–600, y la página saltaba
   debajo del mouse. Con `.reservado` (entrada-herramientas.js, armarTipo) abre ya con su alto de
   tope: 100vh lo recorta el max-height de cada piel (en La grieta, min(74vh, 600px)), así que
   vale el mismo número que usa el panel lleno sin escribirlo dos veces. Queda puesto hasta que
   se cierra: al llenarse, la lista ocupa ese alto y el panel no crece ni se achica. */
.entrada-menu--herramientas.reservado:not(:modal) { height: 100vh; }
/* Mientras tanto, «Buscando las herramientas…» ocupa el lugar de la lista y el pie («Volver a
   Automático», «Más herramientas en el Laboratorio») ya está abajo, donde va a quedar. */
.entrada-menu--herramientas.reservado:not(:modal) > .entrada-menu-estado { flex: 1 1 auto; }
.entrada-menu--lista:not(:modal) { width: min(320px, calc(100% - 16px)); padding-bottom: 10px; }
.entrada-menu:modal {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 86dvh;
  border-width: 1px 0 0; border-radius: 20px 20px 0 0;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.entrada-menu::backdrop { background: rgba(0, 0, 0, .55); }

.entrada-menu-cabeza { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.entrada-menu-titulo {
  margin: 0; font: 600 clamp(20px, 3vw, 24px)/1.15 var(--f-rara);
  letter-spacing: -.03em;
}
.entrada-menu-titulo em {
  font-family: inherit; font-weight: inherit;
  letter-spacing: inherit; color: var(--e-acento);
}
.entrada-menu-titulo-chico { padding-top: 10px; font-size: 16px; letter-spacing: -.015em; }
.entrada-menu-cerrar {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px 0 0;
  border: 0; border-radius: 50%; background: transparent;
}
.entrada-menu-cerrar:hover { background: var(--e-linea-suave); }
.entrada-menu-bajada { flex: none; margin-top: -6px; font-size: 13px; color: var(--e-tenue); }
/* La cuenta real del tipo y el buscador (23/10/2026): «147 para usar · 216 todavía no». */
.entrada-menu-cuenta { flex: none; margin: -4px 0 0; font: 600 10.5px/1.3 var(--gr-texto, inherit); letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .7; }
.entrada-menu-buscar {
  flex: none; width: 100%; min-height: 40px; padding: 8px 2px;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent;
  color: inherit; font: 400 15px/1.3 var(--gr-texto, inherit); outline: none;
  opacity: .9;
}
.entrada-menu-buscar::placeholder { color: inherit; opacity: .55; }
.entrada-menu-buscar:focus { opacity: 1; box-shadow: inset 0 -1px 0 currentColor; }
.entrada-menu-buscar::-webkit-search-cancel-button { cursor: pointer; }
@media (pointer: coarse) { .entrada-menu-buscar { min-height: 44px; font-size: 16px; } }
/* En la computadora, el desplegable de un tipo es más ancho que la caja: dos columnas de nombres
   y precios no entraban en 469 px. */
@media (min-width: 900px) {
  .entrada-caja > .entrada-menu--herramientas:not(:modal) { width: min(720px, calc(100vw - 96px)); }
}

.entrada-menu-filtros { flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.entrada-menu-filtros::-webkit-scrollbar { display: none; }
/* Revisión del cambio 14 (12/10/2026): con «Con personajes propios» y
   «Publicidad estilo creador», Video tiene ocho filtros y en la compu el
   último quedaba cortado al borde («Con personajes prop…»), sin nada que
   dijera que la fila seguía. De 641 px para arriba bajan a una segunda fila y
   se ven todos (Void ya lo hacía en su piel). En el celular siguen en una fila
   que se corre, como las marcas. */
@media (min-width: 641px) {
  .entrada-menu-filtros { flex-wrap: wrap; overflow-x: visible; }
}
.entrada-menu-filtro {
  flex: none; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--e-linea); border-radius: 999px; background: transparent;
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.entrada-menu-filtro:hover { border-color: var(--e-tinta); }
/* Sin recuadro (23/10/2026, «que los botones no tengan un cuadrado que los encierre»): un tono
   apenas más oscuro que el papel; el elegido, relleno como siempre. */
.entrada-menu .entrada-menu-filtro { border-color: transparent; background: color-mix(in oklch, currentColor 7%, transparent); }
.entrada-menu .entrada-menu-filtro:not([aria-pressed="true"]):hover { border-color: transparent; background: color-mix(in oklch, currentColor 13%, transparent); }
.entrada-menu-filtro[aria-pressed="true"] { border-color: var(--e-tinta); background: var(--e-tinta); color: var(--g0, #1f2a30); }

.entrada-menu-lista { flex: 1 1 auto; min-height: 0; margin: 0 -8px; padding: 0 8px 4px; overflow-y: auto; overscroll-behavior: contain; }
/* Con marcas (11/10/2026): a la izquierda la lista de marcas con su cantidad
   y a la derecha las herramientas de la que está elegida. Cada columna se
   desliza por su cuenta. El alto de partida evita que el desplegable salte de
   tamaño al pasar de una marca con pocas herramientas a una con muchas.
   Revisión del cambio 14 (12/10/2026): ese alto era un mínimo fijo de 380 px y,
   en una pantalla de 760 px de alto o menos (o con una segunda fila de
   filtros), el desplegable llegaba a su tope y el pie —«Volver a Automático»
   y «Más herramientas en el Laboratorio»— quedaba cortado abajo. Ahora es el
   alto de partida (flex-basis): si no entra, la lista se achica hasta 180 px
   y el pie se ve siempre. */
.entrada-menu-lista.con-marcas {
  display: grid; grid-template-columns: 196px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  flex: 1 1 min(380px, 58vh); min-height: min(180px, 30vh); margin: 0; padding: 0; overflow: hidden;
  border-top: 1px solid var(--e-linea-suave);
}
.entrada-menu-marcas {
  display: flex; flex-direction: column; min-height: 0; padding: 2px 0 6px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  border-right: 1px solid var(--e-linea-suave);
}
.entrada-menu-marca-boton {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  font: 600 11.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .13em; text-transform: uppercase;
}
.entrada-menu-marca-cuenta { font-size: 12px; letter-spacing: 0; color: var(--e-tenue); }
.entrada-menu-marca-boton:hover { background: var(--e-linea-suave); }
.entrada-menu-marca-boton[aria-selected="true"] { color: var(--e-acento); background: var(--e-linea-suave); box-shadow: inset 3px 0 0 var(--e-acento); }
.entrada-menu-cols { min-height: 0; padding: 0 0 4px 12px; overflow-y: auto; overscroll-behavior: contain; }
.entrada-menu-marca[hidden] { display: none; }
/* styles.css (la portada) le pone relleno a todo <section> y centra a sus hijos. */
.entrada-menu .entrada-menu-marca { padding: 0; }
.entrada-menu .entrada-menu-marca > * { max-width: none; margin-inline: 0; }
@media (max-width: 640px) {
  /* En el celular las marcas son una tira horizontal arriba de las herramientas. */
  .entrada-menu-lista.con-marcas { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
  .entrada-menu-marcas { flex-direction: row; padding: 0; overflow: auto hidden; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--e-linea-suave); }
  .entrada-menu-marcas::-webkit-scrollbar { display: none; }
  .entrada-menu-marca-boton { width: auto; gap: 8px; padding: 0 14px; white-space: nowrap; }
  .entrada-menu-marca-boton[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--e-acento); }
  .entrada-menu-cols { padding-left: 0; }
}
/* El rótulo de la marca elegida, arriba de sus herramientas. */
.entrada-menu-rotulo {
  margin: 0; padding: 12px 6px 6px;
  font: 500 11px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase;
  color: var(--e-acento);
}
.entrada-menu-herramientas { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.entrada-herramienta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 12px; }
/* La elegida: un filete rosa de 2 px a la izquierda. */
.entrada-herramienta:has(> .entrada-herramienta-elegir[aria-pressed="true"]) {
  background: var(--e-linea-suave); box-shadow: inset 2px 0 0 var(--e-acento);
}
.entrada-herramienta-elegir {
  display: grid; gap: 3px; min-width: 0; min-height: 56px; padding: 10px 12px;
  border: 0; border-radius: 12px; background: none;
  color: inherit; text-align: left; text-decoration: none;
}
.entrada-herramienta-elegir:hover { background: var(--e-linea-suave); }
.entrada-herramienta-elegir[aria-disabled="true"] { opacity: .62; cursor: help; }
.entrada-herramienta-linea { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.entrada-herramienta-cabezal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.entrada-herramienta-nombre { font: 500 16px/1.25 var(--f-rara); letter-spacing: -.015em; }
.entrada-herramienta-precio { margin-left: auto; font: 500 12.5px/1.3 var(--mono, ui-monospace, monospace); white-space: nowrap; text-align: right; }
/* Para la casa, debajo de «Uso del estudio»: lo que paga el público. */
.entrada-herramienta-lista { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--e-tenue); }
.entrada-herramienta-para { font-size: 13.5px; line-height: 1.4; color: var(--e-tenue); }
.entrada-herramienta-pide { font-size: 12.5px; line-height: 1.4; color: var(--e-tenue); }
.entrada-herramienta-pide-rotulo { font: 600 9.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .14em; }
.entrada-herramienta-auto {
  justify-self: start; margin-top: 3px;
  font: 600 10px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--e-acento);
}
/* «¿Qué hace?» abajo a la derecha de la fila; la línea de «pide» le deja lugar. */
.entrada-herramienta-ficha { position: absolute; right: 12px; bottom: 6px; min-height: 32px; font-size: 12.5px; white-space: nowrap; }
.entrada-herramienta:has(> .entrada-herramienta-ficha) .entrada-herramienta-pide { padding-right: 96px; }
.entrada-herramienta-plan { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 12px 10px; font-size: 13px; }
.entrada-sello {
  display: inline-block; padding: 1px 7px;
  border: 1px solid var(--e-linea); border-radius: 999px;
  font: 600 9.5px/1.5 var(--mono, ui-monospace, monospace); letter-spacing: .12em; color: var(--e-tenue); white-space: nowrap;
}
.entrada-sello-plan { border-color: var(--e-acento); color: var(--e-acento); }
.entrada-menu-estado { padding: 16px 6px; font-size: 13.5px; color: var(--e-tenue); }
/* El modo «Próximamente» (cambio 14): lo que viene va debajo de lo que se elige,
   con su rótulo. Se ve y se alcanza con el teclado, pero no se elige: nada de
   precio ni de resaltado al pasar, y el nombre en el tono tenue. */
.entrada-menu-subrotulo {
  margin: 10px 0 2px; padding: 10px 6px 4px; border-top: 1px dashed var(--e-linea);
  font: 600 9.5px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .18em; text-transform: uppercase; color: var(--e-tenue);
}
.entrada-herramienta--pronto .entrada-herramienta-elegir { min-height: 44px; padding: 8px 12px; gap: 2px; align-content: center; }
.entrada-herramienta--pronto .entrada-herramienta-elegir[aria-disabled="true"] { opacity: 1; cursor: default; }
.entrada-herramienta--pronto .entrada-herramienta-elegir:hover { background: none; }
.entrada-herramienta--pronto .entrada-herramienta-elegir:focus-visible { outline: 2px solid var(--e-acento); outline-offset: -2px; }
.entrada-herramienta--pronto .entrada-herramienta-nombre { font-size: 14.5px; color: var(--e-tenue); }
.entrada-herramienta--pronto .entrada-herramienta-para { font-size: 12.5px; }
.entrada-herramienta-via { font-size: 12px; color: var(--e-tenue); white-space: nowrap; }
.entrada-herramienta-aviso { padding-top: 0; font-size: 12.5px; color: var(--e-tenue); }
.entrada-sello-sinapi { border-style: dashed; }
.entrada-menu-marca-boton.solo-pronto .entrada-menu-marca-nombre { opacity: .62; }
.entrada-menu-pie {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  padding-top: 8px; border-top: 1px solid var(--e-linea-suave);
}

/* La lista corta de un ajuste: cada opción con lo que pagarías en total. */
.entrada-menu-opciones { display: grid; gap: 2px; min-height: 0; margin: 0 -6px; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.entrada-lista-opcion {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 0; border-radius: 10px; background: none; text-align: left; font-size: 14px;
}
.entrada-lista-opcion:hover { background: var(--e-linea-suave); }
.entrada-lista-opcion[aria-pressed="true"] { font-weight: 600; }
.entrada-lista-opcion[aria-pressed="true"] .entrada-punto { border-color: var(--e-acento); background: var(--e-acento); }
.entrada-lista-opcion[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.entrada-lista-texto { flex: 1 1 auto; min-width: 0; }
.entrada-lista-precio { font: 500 12.5px/1 var(--mono, ui-monospace, monospace); color: var(--e-tenue); }
.entrada-lista-motivo { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--e-tenue); white-space: nowrap; }
/* «Qué crear» (23/10/2026): cada tipo con su cuenta, a la derecha. */
.entrada-lista-cuenta { font-size: 12px; line-height: 1.3; text-align: right; opacity: .72; }

/* ── Motor y Resolución, cada uno con su lista (tanda 2, 23/10/2026) ───────
   Lo que marcó el evaluador sobre el pedido del 21/10 («opciones de resolución, motores, modelos…»):
   en Automático, Motor, Duración, Formato, Resolución y Cantidad abrían el mismo «Qué crear». Motor
   lista los motores del tipo (marca, desde cuánto sale, para qué sirve, cuántos se usan de cuántos) y
   Resolución las resoluciones con sus modelos y precios. Arriba, los tipos con la forma de los
   filtros de siempre; la lista se desliza entera adentro del panel. */
.entrada-menu--motores:not(:modal), .entrada-menu--resoluciones:not(:modal) { width: min(460px, calc(100% - 16px)); }
.entrada-menu-motores, .entrada-menu-resoluciones {
  flex: 1 1 auto; min-height: 0; margin: 0 -8px; padding: 0 8px 4px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.entrada-menu-motores .entrada-menu-opciones, .entrada-menu-resoluciones .entrada-menu-opciones { overflow: visible; }
.entrada-motor {
  display: grid; gap: 3px; width: 100%; min-height: 56px; padding: 10px 12px;
  border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; cursor: pointer;
}
.entrada-motor:hover { background: var(--e-linea-suave); }
.entrada-motor[aria-pressed="true"] { background: var(--e-linea-suave); box-shadow: inset 2px 0 0 var(--e-acento); }
.entrada-motor:focus-visible { outline: 2px solid var(--e-acento); outline-offset: -2px; }
.entrada-motor-linea { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.entrada-motor-nombre { font: 600 12px/1.25 var(--gr-texto, inherit); letter-spacing: .13em; text-transform: uppercase; }
.entrada-motor-precio { margin-left: auto; font: 500 12.5px/1.3 var(--gr-texto, inherit); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.entrada-motor-usos { font-size: 13px; line-height: 1.4; color: var(--e-tenue); }
.entrada-motor-cuenta { font-size: 11.5px; line-height: 1.3; color: var(--e-tenue); }
.entrada-motor .entrada-herramienta-auto { margin-top: 1px; }
.entrada-motor-vienen { margin: 0; padding: 4px 6px 8px; font-size: 12.5px; line-height: 1.55; color: var(--e-tenue); }
.entrada-menu-motores .entrada-menu-subrotulo { margin-top: 8px; }
.entrada-menu-tipos-panel { flex: none; }
/* Resolución: el rótulo de cada una con cuántos modelos la hacen; debajo, los más baratos y «Ver N más». */
.entrada-resolucion + .entrada-resolucion { margin-top: 4px; }
.entrada-resolucion-rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.entrada-resolucion-nombre { font-size: 12.5px; letter-spacing: .12em; }
.entrada-resolucion-cuenta { font-weight: 500; letter-spacing: .08em; opacity: .72; }
.entrada-resolucion-opcion { align-items: baseline; }
.entrada-resolucion-opcion .entrada-lista-texto { line-height: 1.35; }
.entrada-resolucion-opcion .entrada-punto { align-self: center; }
.entrada-resolucion-opcion .entrada-lista-precio { flex: none; white-space: nowrap; }
.entrada-resolucion-mas { min-height: 36px; margin: 0 0 6px 6px; font-size: 13px; }
/* «1 de 7» en la columna de marcas: lo que se usa, en el tono de la marca; el total, tenue. */
.entrada-menu-marca-cifra { flex: none; display: inline-flex; align-items: baseline; white-space: nowrap; font-size: 12px; letter-spacing: 0; text-transform: none; }
.entrada-menu-marca-usables { color: inherit; opacity: .9; }
.entrada-menu-marca-cifra.todas .entrada-menu-marca-usables { opacity: .72; }
/* La línea de para qué sirve de una fila «Próximamente», mientras llegan los textos de su alta. */
.entrada-herramienta-para.esperando { min-height: 1.4em; }
/* El precio de arranque, antes de «Seguir»: «Desde 4 créditos» y debajo «Imagen 9:16». Las reglas van
   con las dos clases: las de `.entrada-mandos-precio` de más abajo (y las del celular) son de después. */
.entrada-mandos-precio.entrada-mandos-precio--arranque { cursor: help; }
.entrada-mandos-precio.entrada-mandos-precio--arranque strong { font-size: 18px; }
/* En el celular el precio va en su renglón, arriba de «Seguir»: un poco más chico y con el renglón del
   alto de antes, así «Seguir» no baja ni se corre cuando llega el catálogo (medido a 320 y 390 px en los
   tres idiomas: con «…» medía 15,3 px y con el precio 21). En la tableta de la portada también va en su
   renglón. */
@media (max-width: 640px) {
  .entrada-mandos-precio.entrada-mandos-precio--arranque { align-items: center; }
  .entrada-mandos-precio.entrada-mandos-precio--arranque > * { line-height: 15px; }
  .entrada-mandos-precio.entrada-mandos-precio--arranque strong { font-size: 15px; line-height: 15px; }
}
@media (max-width: 1199px) {
  .studio-portada #entrada-portada .entrada-mandos-precio.entrada-mandos-precio--arranque { align-items: center; }
  .studio-portada #entrada-portada .entrada-mandos-precio.entrada-mandos-precio--arranque > * { line-height: 15px; }
  .studio-portada #entrada-portada .entrada-mandos-precio.entrada-mandos-precio--arranque strong { font-size: 15px; line-height: 15px; }
}

/* ── Abajo: los mandos a la vista (23/10/2026) ─────────────────────────────
   Pedido del dueño del 21/10/2026: «opciones de resolución, motores, modelos…»,
   y del 23/10: «le faltan más de la mitad de las opciones y herramientas y
   botones y menúes». Una tabla siempre a la vista: arriba Motor y Modelo, en
   el medio Duración, Formato, Resolución, lo demás y Cantidad, abajo el
   precio. Cada celda es el rótulo chico arriba y el valor abajo, sin
   recuadro («que los botones no tengan un cuadrado que los encierre»): lo que
   se elige lleva su flechita y se subraya al pasar. `.entrada-mandos` es la
   de Automático y `.entrada-ajustes` la de una herramienta elegida; tienen la
   misma forma (entrada-herramientas.js, pintarMandos y pintarFila).

   Más compacta (23/10/2026, a la tarde): la tabla hizo crecer la caja de la
   portada 190–260 px y «Seguir» quedaba debajo del borde en 1280 × 720,
   1366 × 768, 1360 × 860, 1536 × 864 y 390 × 844. Ahora Motor, Modelo y lo
   demás van juntos en `.entrada-mandos-fila`: en la computadora, una grilla de
   tres columnas (con Automático son dos renglones de 41 px, antes cuatro y 235
   px); en el celular, un solo renglón que se desliza de costado. El precio dejó
   la tabla y va al lado de «Seguir» (`.entrada-barra-accion`, más abajo). No se
   sacó ningún mando. */
.entrada-mandos, .entrada-ajustes {
  contain: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  margin-top: 4px; padding: 0;
  border-top: 1px solid var(--e-linea-suave);
}
.entrada-mandos-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; min-width: 0; }
/* Arriba (Motor, Modelo) y el medio (lo demás) ya no son dos filas con su filete: van en la misma grilla. */
.entrada-mandos-cabeza, .entrada-mandos-grilla { display: contents; }
/* Modelo con una herramienta elegida (el nombre, la versión y la ×) ocupa dos columnas. */
.entrada-mandos-fila .entrada-mando--elegida { grid-column: span 2; }
.entrada-mandos-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding: 0 0 6px; }

/* Una celda: el rótulo arriba, el valor abajo. Un botón de verdad, sin borde ni fondo. El renglón
   del valor mide lo mismo en todas (la × de Modelo es la más alta): los valores quedan parejos. */
.entrada-mando { min-width: 0; }
.entrada-mando-boton, .entrada-mando--fijo, .entrada-mando--elegida {
  display: grid; grid-template-columns: minmax(0, auto) auto; grid-template-rows: auto minmax(20px, auto); grid-template-areas: "rotulo rotulo" "valor flecha";
  justify-content: start; align-content: start; align-items: center; gap: 1px 5px;
  width: 100%; min-width: 0; min-height: 40px; padding: 5px 0 3px;
}
.entrada-mando-boton {
  border: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.entrada-mando-rotulo {
  grid-area: rotulo; min-width: 0;
  font: 600 9.5px/1.3 var(--gr-texto, inherit); letter-spacing: .14em; text-transform: uppercase;
  color: var(--e-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entrada-mando-valor {
  grid-area: valor; min-width: 0;
  font: 500 14.5px/1.25 var(--gr-texto, inherit); letter-spacing: 0; color: var(--e-tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
/* Lo que todavía no se sabe («Según el modelo»): más chico, en el tono tenue, y puede ir en dos renglones
   (en italiano, «Dipende dal modello», a 1280 px). */
.entrada-mando-valor--tenue { font-size: 12.5px; line-height: 1.2; color: var(--e-tenue); white-space: normal; }
.entrada-mando-flecha {
  grid-area: flecha; display: inline-grid; place-items: center; width: 14px; height: 14px;
  color: var(--e-tenue); transition: transform .22s cubic-bezier(.2, .7, .2, 1), color .18s ease;
}
.entrada-mando-flecha svg { display: block; width: 12px; height: 12px; stroke-width: 2.1; }
.entrada-mando-boton:hover .entrada-mando-valor, .entrada-elegida-nombre:hover .entrada-mando-valor { text-decoration-color: currentColor; color: var(--e-tinta); }
.entrada-mando-boton:hover .entrada-mando-flecha, .entrada-elegida-nombre:hover .entrada-mando-flecha { color: var(--e-tinta); transform: translateY(1px); }
.entrada-mando-boton[aria-expanded="true"] .entrada-mando-flecha,
.entrada-elegida-nombre[aria-expanded="true"] .entrada-mando-flecha { transform: rotate(180deg); color: var(--e-acento); }
.entrada-mando-boton[aria-expanded="true"] .entrada-mando-valor { text-decoration-color: var(--e-acento); }
.entrada-mando-boton:focus-visible, .entrada-elegida-nombre:focus-visible, .entrada-elegida-quitar:focus-visible {
  outline: 2px solid var(--e-acento); outline-offset: 2px; border-radius: 2px;
}
/* El valor nuevo entra con un fundido corto (de «Automático» a «Kling», de 5 s a 10 s). */
.entrada-mando-valor.recien { animation: entrada-mando-cambia .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes entrada-mando-cambia { from { opacity: 0; transform: translateY(5px); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) {
  .entrada-mando-valor.recien { animation: none; }
  .entrada-mando-flecha, .entrada-mando-valor { transition: none; }
}

/* Modelo: el rótulo arriba y, abajo, el nombre (abre su tipo), la versión si la hay y la ×. */
.entrada-mando--elegida { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rotulo" "valor"; justify-content: stretch; }
.entrada-elegida { grid-area: valor; display: flex; align-items: center; gap: 4px 10px; min-width: 0; max-width: 100%; border: 0; border-radius: 0; }
.entrada-elegida-nombre {
  flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 24px; padding: 0;
  border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.entrada-elegida-texto { flex: 0 1 auto; }
.entrada-elegida-nombre .entrada-mando-flecha { flex: none; }
.entrada-mando-boton--version { flex: none; display: inline-flex; align-items: center; gap: 4px; width: auto; min-height: 24px; padding: 0; }
.entrada-mando-boton--version .entrada-mando-valor { font-size: 13.5px; color: var(--e-tenue); }
.entrada-elegida-quitar {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 0;
  border: 0; border-radius: 50%; background: none; color: var(--e-tenue); cursor: pointer;
  transition: background .15s linear, color .15s linear;
}
/* El dedo encuentra la × aunque se vea chica: el área de toque mide 44 px. */
.entrada-elegida-quitar::after { content: ''; position: absolute; inset: -11px; }
.entrada-elegida-quitar:hover { background: color-mix(in oklch, var(--e-tinta) 10%, transparent); color: var(--e-tinta); }

/* Abajo de la tabla: «Lo eligió Automático…» y lo que toma la herramienta. */
.entrada-mandos-nota { flex: 1 1 220px; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--e-tenue); }
.entrada-mandos-notas { flex: 1 1 220px; display: grid; gap: 2px; min-width: 0; }
.entrada-ajuste-nota { font-size: 12.5px; line-height: 1.4; color: var(--e-tenue); }

/* «Seguir» con el precio al lado (23/10/2026): los dos juntos, a la derecha, al final de la fila de los
   «+» si entran (1920 px) y si no en el renglón de abajo. El precio va en voz baja, como una celda más
   de la tabla: el rótulo chico arriba y el total abajo. */
.entrada-barra-accion {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 6px 20px; min-width: 0;
}
.entrada-precio-zona { flex: 0 1 auto; min-width: 0; max-width: 17em; }
.entrada-precio-zona:empty { display: none; }
.entrada-mandos-precio {
  display: grid; justify-items: end; gap: 1px; text-align: right;
  font: 500 13px/1.3 var(--gr-texto, inherit); transition: opacity .15s linear;
}
/* Adentro del precio no hay áreas con nombre: todo va en una columna, alineado a la derecha. */
.entrada-mandos-precio > * { grid-area: auto; }
.entrada-mandos-precio strong { font: 900 20px/1.05 var(--gr-titulo, inherit); letter-spacing: -.005em; white-space: nowrap; }
.entrada-mandos-precio small { font-size: 12px; color: var(--e-tenue); }
.entrada-mandos-precio .entrada-mando-valor { text-decoration: none; }
/* Mientras llega un precio nuevo, el anterior queda a media luz. */
.entrada-precio-zona.esperando .entrada-mandos-precio { opacity: .5; }

/* «+ Foto», «+ Canción», «+ Video» y «+ Personaje», sin recuadro (23/10/2026; pedido del 21/10: «que
   los botones no tengan un cuadrado que los encierre, que sea todo soft delicado»). Son texto, como
   «Seguir»: se subrayan al pasar y miden 44 px para tocar. Sin el recuadro, la fila es más angosta y,
   donde entra, «Seguir» y el precio van en el mismo renglón. Lo que «hace falta» va en el acento,
   con su punto; lo que ya llegó al tope, a media luz. */
.entrada-caja .entrada-sumar { gap: 2px 4px; }
.entrada-caja .entrada-sumar .entrada-sumar-boton {
  min-width: 44px; padding: 0 7px; gap: 6px;
  border-color: transparent; border-radius: 999px; background: none;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: text-decoration-color .18s ease, color .18s ease, opacity .18s ease;
}
.entrada-caja .entrada-sumar .entrada-sumar-boton:hover { border-color: transparent; background: none; color: var(--e-tinta); text-decoration-color: currentColor; }
.entrada-caja .entrada-sumar .entrada-sumar-personaje:hover { color: var(--e-acento); }
.entrada-caja .entrada-sumar .entrada-sumar-boton:hover .entrada-sumar-cuenta { color: var(--e-tenue); }
.entrada-caja .entrada-sumar .entrada-sumar-boton.hace-falta { border-color: transparent; color: var(--e-acento); }
.entrada-caja .entrada-sumar .entrada-sumar-boton.lleno { border-style: solid; opacity: .72; }
/* El «+» del primero, en la línea del texto de arriba. */
@media (min-width: 361px) {
  .entrada-caja .entrada-sumar > .entrada-sumar-boton:first-child { padding-left: 0; }
}

/* Los botones de subir que la herramienta necesita: borde y punto rosa. */
.entrada-sumar-boton.hace-falta { border-color: var(--e-acento); }
.entrada-sumar-boton.hace-falta::after { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--e-acento); }

/* ── Varias versiones de una vez ────────────────────────────────────────── */
/* La tanda es un <section>, y en la portada styles.css le pone relleno a todo <section> y un ancho
   máximo a sus hijos: a 1280 px cada versión quedaba de 132 px, con la imagen de 74 × 43 (23/10/2026).
   Sin ese relleno, y de a dos solo si la tanda mide 700 px o más (antes, con la pantalla de 640 o más):
   en la columna de la caja van una debajo de la otra, a lo ancho. */
.entrada .entrada-tanda { display: grid; gap: 12px; padding: 0; container: entrada-tanda / inline-size; }
.entrada .entrada-tanda > * { max-width: none; margin-inline: 0; }
.entrada-tanda-rotulo { font: 500 11px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--e-acento); }
.entrada-tanda-piezas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.entrada-tanda .entrada-resultado { grid-template-columns: minmax(0, 1fr); }
.entrada-pieza-version { margin: -8px 0 12px; font: 500 11px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--e-tenue); }
.entrada-medio-audio { padding: 12px; border-radius: 14px; background: var(--e-linea-suave); }
.entrada-medio-audio audio { display: block; width: 100%; }
@container entrada-tanda (min-width: 700px) {
  .entrada-tanda-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .entrada-tipo { gap: 6px; padding: 0 12px; }
  .entrada-tipo-flecha, .entrada-tipo-largo { display: none; }
  /* La fila de cada herramienta, en una columna: «¿Qué hace?» va debajo. */
  /* Con el dedo, todo lo que se toca mide 44 px (diseño, 1.7): «¿Qué hace?» y el pie de la hoja también. */
  .entrada-herramienta-ficha { position: static; justify-self: start; min-height: 44px; margin: -14px 0 2px 12px; }
  .entrada-menu-pie .entrada-enlace { min-height: 44px; }
  .entrada-herramienta:has(> .entrada-herramienta-ficha) .entrada-herramienta-pide { padding-right: 0; }
  .entrada-herramienta-precio { margin-left: 0; text-align: left; }
  .entrada-tipo-corto { display: inline; }
  /* En el celular la fila ya no se desliza (revisión del 10/10/2026: a 375 px
     se veía solo «Imagen», y Sonido, Video y 3D quedaban escondidos detrás
     del borde). Automático va en su renglón, primero, y los cuatro tipos
     debajo, en cuatro columnas iguales con el ícono arriba del nombre: así
     entran enteros a 320 px en castellano, inglés e italiano. */
  .entrada-tipos { flex-direction: column; align-items: flex-start; gap: 8px; }
  .entrada-tipos-pista {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    align-self: stretch; overflow: visible;
  }
  /* El nombre va en una línea y no se parte: «Immagine» no puede quedar «Immagi / ne». */
  .entrada-tipos-pista .entrada-tipo {
    position: relative; flex-direction: column; justify-content: center; gap: 4px;
    min-width: 0; min-height: 56px; padding: 6px 2px; border-radius: 16px;
    font-size: 12px; line-height: 1.15; white-space: nowrap; text-align: center;
  }
  /* El punto rosa de la herramienta elegida va en la esquina: no empuja el ícono. */
  .entrada-tipos-pista .entrada-tipo.con-elegida::before { position: absolute; top: 7px; right: 8px; }
  /* Los mandos (23/10/2026) en el celular: un solo renglón que se desliza de costado, con el rótulo
     de cada uno a la vista (el dueño también tiene que ver qué es cada valor). De a dos por renglón
     eran 246 px y «Seguir» quedaba abajo del borde a 390 × 844. El borde derecho se esfuma: se ve
     que sigue. Cada mando mide 56 px para el dedo. */
  .entrada-mandos-fila {
    display: flex; gap: 0 22px; padding-right: 30px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .entrada-mandos-fila::-webkit-scrollbar { display: none; }
  .entrada-mandos-fila .entrada-mando { flex: none; max-width: 76vw; scroll-snap-align: start; }
  .entrada-mandos-fila .entrada-mando--elegida { grid-column: auto; }
  /* La × va pegada al nombre: si no, quedaba del otro lado del borde y no se veía que la fila sigue. */
  .entrada-mandos-fila .entrada-elegida-nombre { flex: 0 1 auto; }
  .entrada-mandos-fila .entrada-mando-valor, .entrada-mandos-fila .entrada-mando-valor--tenue { white-space: nowrap; }
  .entrada-mando-boton, .entrada-mando--fijo, .entrada-mando--elegida { min-height: 56px; padding: 6px 0 4px; grid-template-rows: auto minmax(30px, auto); }
  .entrada-elegida-nombre, .entrada-mando-boton--version { min-height: 44px; }
  .entrada-mando--elegida { grid-template-rows: auto minmax(44px, auto); }
  .entrada-elegida-quitar { width: 44px; height: 44px; margin-right: 0; }
  .entrada-elegida-quitar::after { inset: 0; }
  /* El precio, en su renglón arriba de «Seguir», a lo ancho: el rótulo y el total en la misma línea. */
  .entrada-barra-accion { flex-basis: 100%; justify-content: flex-start; }
  .entrada-precio-zona { flex-basis: 100%; max-width: none; }
  .entrada-mandos-precio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0 10px; text-align: left; }
  .entrada-menu:modal .entrada-herramienta-elegir { min-height: 56px; }
  .entrada-menu:modal .entrada-lista-opcion { min-height: 52px; }
  .entrada-menu-filtro { min-height: 44px; }
  /* Con la fila de ajustes a la vista, el contador baja a su renglón. */
  .entrada-caja.con-herramienta .entrada-contador { position: static; display: block; margin-top: 8px; text-align: right; }
  .entrada-caja.con-herramienta .entrada-contador:empty { display: none; }
}
/* Los celulares más angostos (320 px): un punto menos y menos aire, para que
   «Immagine» entre entero en su columna. */
@media (max-width: 360px) {
  .entrada-tipos-pista { gap: 4px; }
  .entrada-tipos-pista .entrada-tipo { padding: 6px 0; font-size: 11px; letter-spacing: -.01em; }
}

/* ── Con el dedo, también en la tablet ─────────────────────────────────────
   (revisión del 10/10/2026) Lo de 44 px valía solo hasta 640 px: a 768 con
   el dedo, los filtros medían 36 y «¿Qué hace?» 32. Con un puntero grueso,
   todo lo que se toca mide 44, y «¿Qué hace?» baja debajo de su fila, como
   en el celular, para no tapar el «para qué». */
@media (pointer: coarse) {
  .entrada-menu-filtro { min-height: 44px; }
  .entrada-herramienta-ficha { position: static; justify-self: start; min-height: 44px; margin: -14px 0 2px 12px; }
  .entrada-herramienta:has(> .entrada-herramienta-ficha) .entrada-herramienta-pide { padding-right: 0; }
  .entrada-menu-pie .entrada-enlace { min-height: 44px; }
}

/* Varias fotos por herramienta (tanda A, 10/10/2026): «Hasta 8 fotos · 1 video»
   debajo de la píldora, y en la tarjeta lo que se dice del personaje. */
.entrada-ajuste-topes { flex-basis: 100%; font-size: 13.5px; }
.entrada-personaje-fotos { margin: 0; font-size: 13.5px; color: var(--e-tenue); }
.entrada-adjunto-sin-usar img, .entrada-adjunto-sin-usar svg { opacity: .4; }

/* «+ Personaje» (tanda B, 10/10/2026): el cuarto botón de la fila, con la
   misma forma que los otros. En el celular los cuatro van en dos columnas
   iguales (dos renglones), así entran enteros a 320 px en castellano, inglés
   e italiano sin scroll de costado. */
.entrada-sumar-personaje svg { flex: none; }
/* Sin recuadro (23/10/2026), los cuatro entran en un renglón desde 361 px: así queda lugar para
   «Seguir» a 390 × 844. En los más angostos siguen en dos columnas. */
@media (max-width: 640px) {
  .entrada-sumar { display: flex; flex-wrap: wrap; }
  .entrada-sumar-boton { justify-content: center; min-width: 0; padding: 0 10px; gap: 6px; }
}
@media (max-width: 360px) {
  .entrada-sumar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entrada-sumar-boton { padding: 0 6px; font-size: 12.5px; letter-spacing: 0; }
}

/* ═════════════════════════════════ LA PORTADA: «SEGUIR» A LA VISTA (23/10/2026) ══
   Con la tabla de mandos, la caja de la portada creció 190–260 px y «Seguir»
   quedaba debajo del borde en 1280 × 720, 1366 × 768, 1360 × 860, 1536 × 864 y
   390 × 844 (antes entraba). Además de la tabla compacta y el precio al lado de
   «Seguir» (más arriba), dos cosas de la portada, sin tocar el título:
     · de 1200 a 1599 px, «Objetos 3D» dice «3D» (como en el celular): así las
       cinco pestañas entran en un renglón y no en dos (52 px), también con el
       punto de una herramienta elegida y en italiano;
     · en las pantallas bajas (820 px de alto o menos), la caja sube 36 px (la
       cola de la «J» sigue pasando: le quedan 20 px) y el lugar de escribir mide
       los dos renglones del ejemplo, con 8 px menos de aire (antes, 114 px).
   Las reglas de la portada (portada-grieta.css) llevan el id de la sección; acá
   van con una clase más para ganarles, porque esta hoja se carga antes. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .studio-portada #entrada-portada .entrada-tipos .entrada-tipo-largo { display: none; }
  .studio-portada #entrada-portada .entrada-tipos .entrada-tipo-corto { display: inline; }
}
@media (min-width: 1200px) and (max-height: 820px) {
  .studio-portada #entrada-portada .entrada--portada > .entrada-cuerpo { margin-top: 30px; }
  .studio-portada #entrada-portada .entrada--portada .entrada-caja .entrada-texto { min-height: 84px; padding-top: 16px; padding-bottom: 10px; }
}
/* «Seguir» ya no necesita los 8 px de aire de arriba (portada-grieta.css): va en el renglón del precio. */
@media (min-width: 1200px) {
  .studio-portada #entrada-portada .entrada--portada .entrada-caja .entrada-barra-accion > .entrada-seguir { margin-top: 0; }
}
/* En la tableta y el celular de la portada, «Seguir» va a lo ancho de la caja (portada-grieta.css): el
   precio va en su renglón, justo arriba, y los dos debajo de los «+». */
@media (max-width: 1199px) {
  .studio-portada #entrada-portada .entrada-barra-accion { flex-basis: 100%; justify-content: flex-start; }
  .studio-portada #entrada-portada .entrada-precio-zona { flex-basis: 100%; max-width: none; }
  .studio-portada #entrada-portada .entrada-mandos-precio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0 10px; text-align: left; }
}
/* Void, Nervo y Rabbit conservan su «Seguir» suelto, con el centro en el de la ventana (portada-grieta.css,
   «Seguir: en el centro de la pantalla»): ahí el precio va a la izquierda, después de los «+», para que
   «Seguir» no le caiga encima. */
@media (min-width: 1200px) {
  :root[data-interfaz]:not([data-interfaz="grieta"]) .studio-portada #entrada-portada .entrada-barra-accion { justify-content: flex-start; }
  :root[data-interfaz]:not([data-interfaz="grieta"]) .studio-portada #entrada-portada .entrada-mandos-precio { justify-items: start; text-align: left; }
}