/* La capa de carácter de la cuenta del suscriptor (/c/<token> y /c/<token>/micuenta), de /entrar y de las páginas de una
   columna (el alta, la baja, las ideas y la que no existe). Se carga después de app.css: sin este archivo todo funciona
   igual, es únicamente cómo se ve. La portada tiene su propia hoja (landing.css).
   Un solo motivo, el cuadro vertical del video: con las esquinas marcadas es lo que viene (dónde se sube, dónde va a
   aparecer el video); lleno, lo que ya está. El azul queda para lo que está en marcha. Un solo objeto con relieve: el
   lugar donde se suben los videos. Lo demás sigue siendo líneas, no tarjetas.
   Dos formatos: en el celular, una columna; en una pantalla ancha, subir a la izquierda y el mes y los videos a la derecha. */
:root {
  --blanco: #fff;
  --relieve: 0 1px 2px rgba(24, 24, 27, 0.05), 0 18px 38px -24px rgba(24, 24, 27, 0.3);
}
/* La distancia de las esquinas al borde: registrada como medida para que el cambio se pueda animar. */
@property --m { syntax: '<length>'; inherits: false; initial-value: 14px; }

/* ---------- las esquinas: el visor ---------- */
.cuenta .drop, .cuenta .vacio-marco, .visor {
  --m: 14px; --largo: 18px; --trazo: 2px; --marca: var(--ink);
  border: 0;
  background:
    linear-gradient(var(--marca), var(--marca)) left var(--m) top var(--m) / var(--largo) var(--trazo) no-repeat,
    linear-gradient(var(--marca), var(--marca)) left var(--m) top var(--m) / var(--trazo) var(--largo) no-repeat,
    linear-gradient(var(--marca), var(--marca)) right var(--m) top var(--m) / var(--largo) var(--trazo) no-repeat,
    linear-gradient(var(--marca), var(--marca)) right var(--m) top var(--m) / var(--trazo) var(--largo) no-repeat,
    linear-gradient(var(--marca), var(--marca)) left var(--m) bottom var(--m) / var(--largo) var(--trazo) no-repeat,
    linear-gradient(var(--marca), var(--marca)) left var(--m) bottom var(--m) / var(--trazo) var(--largo) no-repeat,
    linear-gradient(var(--marca), var(--marca)) right var(--m) bottom var(--m) / var(--largo) var(--trazo) no-repeat,
    linear-gradient(var(--marca), var(--marca)) right var(--m) bottom var(--m) / var(--trazo) var(--largo) no-repeat,
    var(--blanco);
}

/* ---------- la barra de arriba ---------- */
.top--cuenta { max-width: 600px; padding-block: 12px; }
.top--cuenta .cuenta-nav { align-items: center; justify-content: flex-end; gap: 0 2px; }
.top--cuenta .cuenta-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: 999px;
  font-weight: 500; text-decoration: none; color: var(--ink-2);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.top--cuenta .cuenta-nav a:active { background: rgba(24, 24, 27, 0.08); }
@media (hover: hover) { .top--cuenta .cuenta-nav a:hover { background: rgba(24, 24, 27, 0.06); color: var(--ink); } }
/* "Mi cuenta" lleva la inicial de quien entró: es la misma que abre su página. */
#ir-a-micuenta[data-inicial] { gap: 8px; padding-left: 6px; margin-left: 4px; color: var(--ink); }
#ir-a-micuenta[data-inicial]::before, .cuenta #titulo[data-inicial]::before {
  content: attr(data-inicial); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font: 600 0.8125rem/1 var(--sans); letter-spacing: 0;
}
/* Con los cuatro atajos (cuando subir no es el título) en un celular no entran con la inicial: va sin ella. */
@media (max-width: 430px) {
  .top--cuenta .cuenta-nav:has(a:nth-child(4)) a, .top--cuenta .cuenta-nav:has(a:nth-child(4)) #ir-a-micuenta[data-inicial] { padding-inline: 7px; margin-left: 0; }
  .cuenta-nav:has(a:nth-child(4)) #ir-a-micuenta::before { display: none; }
}
.top--micuenta .cuenta-nav a { padding-left: 0; }
@media (hover: hover) { .top--micuenta .cuenta-nav a:hover { background: none; } }

/* ---------- subir: el título y el visor ---------- */
.cuenta .subir--principal > .h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); margin-bottom: 10px; }
.cuenta .subir--principal > .flow-l > p.muted:first-child { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.cuenta .drop {
  justify-items: center; align-content: center; gap: 14px; min-height: 196px; padding: 44px 24px;
  border-radius: 22px; cursor: pointer; box-shadow: 0 0 0 1px var(--line), var(--relieve);
  transition: --m 0.4s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s var(--ease), min-height 0.3s var(--ease), padding 0.3s var(--ease);
}
.cuenta .drop .btn { min-width: min(100%, 220px); }
.cuenta .drop:active { --m: 19px; }
@media (hover: hover) { .cuenta .drop:hover { --m: 19px; box-shadow: 0 0 0 1px var(--line-2), var(--relieve); } }
.cuenta .drop.is-over { --m: 24px; --marca: var(--accent); background-color: #f1f4fc; box-shadow: 0 0 0 2px var(--accent), var(--relieve); }
/* Con videos ya elegidos, el visor se achica: lo que importa pasa a ser la lista que sube. */
.cuenta .drop:has(~ .files > li) { min-height: 0; padding-block: 30px; }
.cuenta .files .bar { height: 5px; border-radius: 3px; }
.cuenta .files .bar > i { background: var(--accent); }
.cuenta .files .is-ok .bar > i { background: var(--ink); }
.cuenta .files .is-err .bar > i { background: var(--danger); }

/* ---------- el pago ---------- */
/* En el paso de pago todavía no hay visor: el objeto con relieve es la caja donde se paga. */
.cuenta .pago-caja { gap: 16px; padding: 26px 22px 24px; border: 0; border-radius: 22px; background: var(--blanco); box-shadow: 0 0 0 1px var(--line), var(--relieve); }
.cuenta .pago-caja .monto { font-size: 1.5rem; letter-spacing: -0.03em; }
/* Con solo el aviso del pago adentro (ya pagó), la caja sobra: queda el aviso. */
.cuenta .pago-caja:has(> #aviso-pago:only-child) { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.cuenta .venta-video { box-shadow: var(--relieve); }
.cuenta .mejora { border-style: solid; border-color: var(--line); border-radius: 16px; }
/* El plan que sigue, adentro de la caja del pago: una fila para marcar, lo único con color de la caja. Los videos van
   dibujados con la tira de «Uso del mes»: llenos, los del plan con el que entró; en azul y vacíos, los que suma el plan
   mayor, que se llenan al marcar la casilla. Tiene que notarse sin competir con el botón de pagar, que sigue siendo lo
   más oscuro. La fila se arma de nuevo después de cada cambio (cuenta.js › mejora): la entrada de los cuadros es esa. */
.cuenta .mejora--pago {
  gap: 12px 14px; padding: 16px; border: 1px solid rgba(51, 88, 196, 0.3); border-radius: 16px; background: #f3f6fd; color: var(--ink-2);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), opacity 0.15s;
}
.cuenta .mejora--pago input { accent-color: var(--accent); cursor: pointer; }
.cuenta .mejora--pago .mejora-titulo { font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.cuenta .mejora--pago .mejora-accion { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cuenta .mejora--pago .tira { display: flex; gap: 5px; margin-top: 2px; }
.cuenta .mejora--pago .tira > i { flex: 0 1 20px; min-width: 0; border-radius: 4px; }
.cuenta .mejora--pago .tira--fina { gap: 3px; }
.cuenta .mejora--pago .tira--fina > i { border-radius: 2.5px; }
.cuenta .mejora--pago .tira > .is-hecho + .is-extra { margin-left: 7px; }
.cuenta .mejora--pago .tira > .is-extra { background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--accent); }
@media (hover: hover) { .cuenta .mejora--pago:hover { border-color: var(--accent); } }
.cuenta .mejora--pago:has(input:checked) { border-color: var(--accent); background: #e9eefb; }
.cuenta .mejora--pago:has(input:checked) .tira > .is-extra { background: var(--accent); box-shadow: none; }
.cuenta .mejora--pago:has(input:disabled) { opacity: 0.6; cursor: progress; }
.cuenta .mejora--pago:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
/* En una pantalla angosta la fila va más apretada (menos aire, renglones más juntos, la tira más baja): arriba del botón
   de pagar cada renglón cuenta. No se pierde ningún texto. */
@media (max-width: 480px) {
  .cuenta .mejora--pago { gap: 8px 12px; padding: 12px 14px; }
  .cuenta .mejora--pago .mejora-txt { gap: 2px; line-height: 1.45; }
  .cuenta .mejora--pago .tira { gap: 4px; margin-top: 0; }
  .cuenta .mejora--pago .tira > i { flex-basis: 15px; border-radius: 3px; }
  .cuenta .mejora--pago .tira > .is-hecho + .is-extra { margin-left: 6px; }
}

/* En una columna, debajo de las indicaciones ya viene la línea de la parte que sigue: no hacen falta dos. */
.cuenta #mas { border-bottom: 0; }

/* ---------- mis videos terminados ---------- */
.cuenta .vacio-marco { --m: 10px; --largo: 12px; --marca: var(--line-2); border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.cuenta .videos video { box-shadow: var(--relieve); }
/* Los pedidos en curso van entre el título y la línea de la parte que sigue: sin líneas propias arriba y abajo. */
.cuenta .en-curso > li:first-child { border-top: 0; padding-top: 2px; }
.cuenta .en-curso > li:last-child { border-bottom: 0; padding-bottom: 0; }
.cuenta .en-curso + .entrega { padding-top: 24px; border-top: 1px solid var(--line); }
.cuenta .en-curso-marco.skel { background: linear-gradient(90deg, rgba(51, 88, 196, 0.16) 25%, rgba(51, 88, 196, 0.34) 40%, rgba(51, 88, 196, 0.16) 60%); background-size: 300% 100%; }

/* ---------- ¿ya publicaste tus videos? ---------- */
/* Debajo de cada pedido entregado, la invitación a dejar el link de lo que ya publicó (cuenta.js › publicado). Va en su
   propia caja, blanca y sin relieve, para que no se confunda con «¿Querés cambiar algo?», que tiene arriba: aquello es un
   pedido con plazo; esto, una invitación. Cada link guardado lleva el cuadro lleno de la tira: es un video que ya salió.
   En el celular el campo y el botón van uno abajo del otro; con más ancho, en un renglón. */
.cuenta .publicado { gap: 12px; margin-top: 8px; padding: 18px 18px 16px; border-radius: 16px; background: var(--blanco); box-shadow: 0 0 0 1px var(--line); }
.cuenta .publicado-titulo { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; color: var(--ink); }
.cuenta .publicado-ayuda { margin-top: -6px; font-size: 0.875rem; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.cuenta .publicado-lista { gap: 0; }
.cuenta .publicado-lista > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 10px; }
.cuenta .publicado-lista > li + li { border-top: 1px solid var(--line); }
.cuenta .publicado-lista > li::before { content: ''; width: 9px; aspect-ratio: 9 / 16; border-radius: 2px; background: var(--ink); }
.cuenta .publicado-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 0.9375rem; color: var(--ink); text-underline-offset: 3px; }
.cuenta .publicado-quitar { margin-right: -6px; padding: 12px 6px; font-size: 0.875rem; color: var(--muted); }          /* el toque: 44 px de alto */
.cuenta .publicado-enviar { justify-self: stretch; }
/* El gracias no es un aviso con su franja: un renglón con su tilde, como los de «Tu primer video aparece acá». */
.cuenta .publicado-gracias { position: relative; padding: 0 0 0 22px; border: 0; background: none; font-size: 0.875rem; color: var(--ink-2); }
.cuenta .publicado-gracias::before { content: ''; position: absolute; left: 1px; top: 0.42em; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (min-width: 480px) {
  .cuenta .publicado { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .cuenta .publicado > * { grid-column: 1 / -1; }
  .cuenta .publicado > .field { grid-column: 1; }
  .cuenta .publicado > .publicado-enviar { grid-column: 2; align-self: start; min-height: 48px; }
}

/* ---------- uso del mes: la tira ---------- */
/* Un cuadro por video del período: lleno, entregado; azul, en edición; con el borde solo, sin usar. */
.tira { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 30px)); gap: 6px; }
.tira > i { display: block; aspect-ratio: 9 / 16; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tira--fina { gap: 4px; }
.tira--fina > i { border-radius: 3px; }
.tira > .is-hecho, .tira-ley .is-hecho { background: var(--ink); box-shadow: none; }
.tira > .is-marcha, .tira-ley .is-marcha { background: var(--accent); box-shadow: none; }
.tira-ley { display: flex; flex-wrap: wrap; gap: 4px 16px; max-width: none; }
.tira-ley > span { display: inline-flex; align-items: center; gap: 7px; }
.tira-ley i { display: block; width: 7px; aspect-ratio: 9 / 16; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); }
.uso .tira + .resta, .uso .tira-ley + .resta { margin-top: 18px; }

/* ---------- "Mi cuenta" ---------- */
.cuenta #titulo[data-inicial] { display: flex; align-items: center; gap: 14px; }
.cuenta #titulo[data-inicial]::before { width: 52px; height: 52px; font-size: 1.25rem; }
/* Cada parte, con su línea arriba; adentro, el título, el contenido y lo que se puede hacer. */
.top--micuenta ~ main .pie-cuenta { gap: 0; font-size: 1rem; color: var(--ink-2); }
.top--micuenta ~ main .pie-cuenta > .ficha, .top--micuenta ~ main .pie-cuenta > #referencias { display: grid; gap: 14px; padding-block: 26px; border-top: 1px solid var(--line); }
.top--micuenta ~ main .pie-cuenta > #referencias > * + * { margin-top: 0; }
.top--micuenta ~ main .pie-cuenta > .note { margin-bottom: 24px; }
.top--micuenta ~ main .pie-cuenta .kv { row-gap: 10px; }
.top--micuenta ~ main #plan-actual { font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.top--micuenta ~ main #como-entrar { padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }
.top--micuenta ~ main #como-entrar .textlink { padding-block: 0; }
/* Lo que se puede hacer en cada parte es un botón, no un renglón subrayado. Cancelar queda aparte y sin peso. */
.top--micuenta ~ main .pie-acciones { align-items: center; gap: 10px; }
.top--micuenta ~ main .pie-acciones > .textlink {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: transform 0.15s ease-out, border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.top--micuenta ~ main .pie-acciones > .textlink:active { transform: scale(0.97); }
@media (hover: hover) { .top--micuenta ~ main .pie-acciones > .textlink:hover { border-color: var(--ink); background: var(--blanco); } }
.top--micuenta ~ main .pie-acciones > #baja { margin-left: auto; padding-inline: 4px; border-color: transparent; background: none; color: var(--muted); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .top--micuenta ~ main .pie-acciones > #baja:hover { border-color: transparent; background: none; color: var(--danger); } }

/* ---------- la entrada de cada parte, una sola vez, al abrir ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cuenta > section, .cuenta > .cuenta-cab, .cuenta-lado > section { animation: entrar 0.55s var(--ease) backwards; }
  .cuenta > #subir { animation-delay: 0.04s; }
  .cuenta-lado > #terminados { animation-delay: 0.1s; }
  .cuenta-lado > #uso { animation-delay: 0.16s; }
  /* Los cuadros de la tira entran de a uno la primera vez (cuenta.js le pone tira--entra solo ahí); los que están en edición laten siempre. */
  .tira > .is-marcha { animation: latir 1.8s ease-in-out infinite; }
  .tira--entra > i { animation: cuadro 0.45s var(--ease) backwards; animation-delay: calc(0.2s + var(--i, 0) * 30ms); }
  .tira--entra > .is-marcha { animation: cuadro 0.45s var(--ease) backwards, latir 1.8s ease-in-out infinite; animation-delay: calc(0.2s + var(--i, 0) * 30ms), 0.9s; }
}
/* Recién marcada, los videos que sumó entran de a uno (hasta ocho; de ahí en más, juntos). */
@media (prefers-reduced-motion: no-preference) {
  .mejora--pago:has(input:checked) .tira > .is-extra { animation: cuadro 0.4s var(--ease) backwards; }
  .mejora--pago:has(input:checked) .tira > .is-hecho + .is-extra + .is-extra { animation-delay: 0.06s; }
  .mejora--pago:has(input:checked) .tira > .is-hecho + .is-extra + .is-extra + .is-extra { animation-delay: 0.12s; }
  .mejora--pago:has(input:checked) .tira > .is-hecho + .is-extra + .is-extra + .is-extra + .is-extra { animation-delay: 0.18s; }
  .mejora--pago:has(input:checked) .tira > .is-hecho + .is-extra + .is-extra + .is-extra + .is-extra + .is-extra ~ .is-extra { animation-delay: 0.24s; }
}
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
@keyframes cuadro { from { opacity: 0; transform: translateY(5px) scale(0.86); } }
@keyframes latir { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .cuenta .drop { transition: none; } }

/* ---------- los dos formatos ---------- */
/* Celular y pantallas medianas: una columna. "Mis videos" y "Uso" van uno abajo del otro, como si el contenedor no estuviera. */
.cuenta-lado { display: contents; }

/* Pantalla ancha, con la cuenta en uso: subir a la izquierda; a la derecha, el mes arriba y los videos abajo. */
@media (min-width: 960px) {
  body[data-vista="doble"] .top--cuenta { max-width: 1080px; }
  body[data-vista="doble"] .wrap.alta.cuenta {
    max-width: 1080px; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: 88px; row-gap: 32px; align-items: start; padding-top: 28px;
  }
  body[data-vista="doble"] .cuenta > * { grid-column: 1 / -1; }
  body[data-vista="doble"] .cuenta > #subir { grid-column: 1; }
  body[data-vista="doble"] .cuenta > .cuenta-lado { display: grid; gap: 36px; grid-column: 2; align-content: start; min-width: 0; }
  body[data-vista="doble"] .cuenta-lado > * { min-width: 0; }
  body[data-vista="doble"] .cuenta-lado > #uso { order: -1; border-top: 0; padding-top: 12px; }
  body[data-vista="doble"] .cuenta #mas { border-bottom: 1px solid var(--line); }
  body[data-vista="doble"] .cuenta .drop { min-height: 260px; }
  body[data-vista="doble"] .cuenta .drop:has(~ .files > li) { min-height: 0; }
  body[data-vista="doble"] .cuenta-lado .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  body[data-vista="doble"] .cuenta-lado .tira { grid-template-columns: repeat(var(--n, 8), minmax(0, 34px)); }
}
/* El paso de pago en el celular (y en toda pantalla de una columna): primero qué paga y el botón; el apoyo (la bajada, el
   video y lo que incluye) va debajo. Quien llega acá ya eligió su plan: eso le da confianza, no lo hace decidir, y con
   la caja abajo el botón de pagar quedaba en la segunda pantalla. El orden del documento no cambia (titular, bajada,
   video, pago): cambia solo dónde se ve cada cosa. La cabecera deja de ser una caja para que sus tres partes se puedan
   ubicar por separado. */
@media (max-width: 959px) {
  body[data-vista="pago"] .wrap.alta.cuenta { gap: 22px; }
  body[data-vista="pago"] .cuenta > .cuenta-cab--venta { display: contents; }
  body[data-vista="pago"] .cuenta > .cuenta-cab--venta > .lead { order: 1; margin-top: 6px; padding-top: 28px; border-top: 1px solid var(--line); max-width: none; }
  body[data-vista="pago"] .cuenta > .cuenta-cab--venta > .venta { order: 2; margin-top: 0; }
  body[data-vista="pago"] .cuenta > #pie { border-top: 0; padding-top: 0; }
  body[data-vista="pago"] .cuenta .pago-caja { gap: 14px; padding-top: 20px; }
  body[data-vista="pago"] .cuenta .pago-caja .monto { margin-top: -6px; }
}

/* El paso de pago en una pantalla ancha: a la izquierda, a qué viene y cómo queda un video; a la derecha, la caja del pago. */
@media (min-width: 960px) {
  body[data-vista="pago"] .wrap.alta.cuenta {
    max-width: 1080px; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-rows: auto 1fr; column-gap: 96px; align-items: start; padding-top: 40px;
  }
  body[data-vista="pago"] .cuenta > * { grid-column: 2; }
  body[data-vista="pago"] .cuenta > #cabecera { grid-column: 1; grid-row: 1 / span 2; padding-top: 12px; }
  body[data-vista="pago"] .cuenta .venta { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 32px; margin-top: 16px; }
  body[data-vista="pago"] .cuenta .venta-lista { font-size: 1rem; gap: 18px; }
}

/* ---------- el alta, la baja y las ideas: una columna ---------- */
/* La cabecera y el pie, del mismo ancho que la columna (antes quedaban más anchos que el formulario). */
header.top:has(~ main.alta:not(.cuenta, .entrar)), main.alta:not(.cuenta, .entrar) ~ footer.foot { max-width: 600px; }
/* El plan elegido, en el alta y en «Cambiar de plan»: la misma superficie blanca del visor. */
.op { transition: border-color 0.15s var(--ease), box-shadow 0.2s var(--ease), background-color 0.15s var(--ease); }
.op:has(input:checked) { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--ink), var(--relieve); }

/* La cuenta en una sola columna (vencida, de baja, o si el link no existe): la cabecera y el pie, del ancho de la columna. */
body:not([data-vista="doble"], [data-vista="pago"], [data-vista="micuenta"]) header.top:has(~ main.cuenta),
body:not([data-vista="doble"], [data-vista="pago"], [data-vista="micuenta"]) main.cuenta ~ footer.foot,
body[data-vista="micuenta"] main.cuenta ~ footer.foot { max-width: 600px; }
@media (min-width: 860px) { body[data-vista="micuenta"] main.cuenta ~ footer.foot { max-width: 860px; } }

/* ---------- la página que no existe: el visor, vacío ---------- */
.visor { display: block; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), var(--relieve); }
.visor--vacio { --m: 10px; --largo: 12px; --marca: var(--line-2); width: 84px; aspect-ratio: 9 / 16; margin-bottom: 12px; }

/* ---------- /entrar ---------- */
/* El formulario para entrar (y el de «olvidé mi contraseña») va en la misma superficie blanca con relieve que el visor. */
.top--entrar, .wrap.alta.entrar, .entrar ~ .foot { max-width: 520px; }
.entrar > form { margin-top: 10px; padding: 26px 22px 24px; border-radius: 22px; background: var(--blanco); box-shadow: 0 0 0 1px var(--line), var(--relieve); }
@media (min-width: 560px) { .entrar > form { padding: 34px 32px 30px; } .wrap.alta.entrar { padding-top: 24px; } }
@media (prefers-reduced-motion: no-preference) { .entrar > * { animation: entrar 0.55s var(--ease) backwards; } .entrar > form { animation-delay: 0.06s; } }

/* "Mi cuenta" en una pantalla ancha: el título de cada parte a la izquierda y su contenido a la derecha. */
@media (min-width: 860px) {
  body[data-vista="micuenta"] .top--cuenta, body[data-vista="micuenta"] .wrap.alta.cuenta { max-width: 860px; }
  body[data-vista="micuenta"] .pie-cuenta > .ficha, body[data-vista="micuenta"] .pie-cuenta > #referencias { grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; }
  body[data-vista="micuenta"] .pie-cuenta > .ficha > h3, body[data-vista="micuenta"] .pie-cuenta > #referencias > h3 { grid-column: 1; grid-row: 1; }
  body[data-vista="micuenta"] .pie-cuenta > .ficha > :not(h3), body[data-vista="micuenta"] .pie-cuenta > #referencias > :not(h3) { grid-column: 2; }
  body[data-vista="micuenta"] .pie-cuenta > .ficha, body[data-vista="micuenta"] .pie-cuenta > #referencias { padding-block: 32px; }
}