@import url('fuentes.css');
@import url('componentes.css');

/* ============================================================
   BookAI
   --g1 y --g2 estan MEDIDOS del PNG del logo, no elegidos a ojo, y
   quedan SOLO para el wordmark. El resto sale medido del mockup.
   Dark-only a proposito: el diseño es oscuro y mantener dos
   paletas para una herramienta personal es costo sin beneficio.
   ============================================================ */
:root{
  color-scheme:dark;

  /* superficies, de la mas honda a la mas alta */
  --bg:#0A0C13;          /* pagina */
  --sunk:#0C0F17;        /* campos hundidos: buscador, textarea, ficha */
  --surf:#0F121B;        /* tarjetas */
  --surf-alta:#11141F;   /* pastilla de saldo, cuenta, circulos, dialogos */
  --surf2:#151926;       /* mosaicos: personas, chips */
  --surf3:#1A1F2C;       /* botones secundarios */

  /* bordes */
  --divisor:#1C2130;     /* la linea bajo la barra */
  --line:#1E2332;        /* tarjetas */
  --line-campo:#232838;  /* campos, mosaicos, chips */
  --line2:#2A3042;       /* controles: selects, botones, pastillas */
  --line3:#282E40;       /* el punteado de la zona de suelta (2px: ver .suelta) */
  --line-hover:#3A4157;

  /* texto */
  --ink:#E8EAF0; --ink2:#C5CAD6; --mut:#8A93A8; --faint:#6B7385;

  /* marca: solo el wordmark */
  --g1:#7D3CFA;  --g2:#4A89FA;

  /* acento */
  --acc:#6E5CFF;
  --acc-txt:#B9AEFF;               /* texto lila sobre superficies teñidas */
  --acc-10:rgba(110,92,255,.10);
  --acc-soft:rgba(110,92,255,.16);
  --acc-line:rgba(110,92,255,.35);
  /* Un poco mas claro que --acc: alrededor de un boton violeta el anillo
     violeta pleno se pierde. */
  --anillo:#8C7DFF;
  /* Azul-violeta parejo, NO el violeta-a-azul de la marca. */
  --grad-btn:linear-gradient(90deg,#5B5BF6,#7C5CFA);

  --ok:#22C55E;  --ok-soft:rgba(34,197,94,.13);
  --alerta:#E8A33D; --alerta-soft:rgba(232,163,61,.13);
  --mal:#FF6B5E; --mal-soft:rgba(255,107,94,.12);

  /* radios: controles / cajas internas / tarjetas */
  --r-sm:8px; --r:10px; --r-lg:14px; --r-pill:999px;
  /* alturas de control: chico / campo / barra de arriba / el CTA */
  --h-sm:32px; --h-campo:36px; --h-bar:38px; --h-cta:54px;

  --sombra-tarjeta:inset 0 1px 0 rgba(255,255,255,.03),0 1px 2px rgba(0,0,0,.35),0 12px 32px -14px rgba(0,0,0,.6);
  --sombra-flota:0 18px 50px -10px rgba(0,0,0,.7);
  --glow-acc:0 8px 24px rgba(110,92,255,.35);
  --t:150ms ease;

  /* El chevron de los selects. data: URI porque la CSP no deja traer
     nada de afuera (img-src admite data:). */
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
/* Cualquier regla con display gana sobre el atributo hidden. Sin esto,
   un .btn (inline-flex) marcado hidden se sigue viendo. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;color:var(--ink);
  /* Un resplandor apenas visible en las esquinas de arriba, al 5-6 %:
     da profundidad sin bajarle el contraste a ningun texto. */
  background:
    radial-gradient(1100px 620px at -6% -12%,rgba(110,92,255,.065),transparent 62%),
    radial-gradient(1000px 580px at 106% -12%,rgba(74,110,250,.05),transparent 62%),
    var(--bg);
  font-family:var(--sans);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
a{color:var(--acc-txt)}
/* Sin border-radius aca: el outline ya sigue la forma de cada cosa, y
   forzar 4px le cuadraba el anillo a la pastilla y a los circulos. */
:focus-visible{outline:2px solid var(--anillo);outline-offset:2px}
/* Los campos marcan el foco con el borde y un halo, no con un anillo
   aparte. Especificidad (0,1,0), la misma del anillo general, y va
   despues: le gana a ese, y cualquier regla de zona le gana a esta. */
:where(input,textarea,select):focus-visible{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(110,92,255,.22);
}

/* Barras de scroll finas y oscuras. Chrome y Safari van con los
   ::-webkit-scrollbar. scrollbar-color y scrollbar-width quedan SOLO para
   Firefox: en Chrome 121+ cualquiera de los dos apaga los
   ::-webkit-scrollbar y vuelve la barra de Windows, con sus flechitas. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-thumb{background:#262B3B;border:3px solid transparent;border-radius:99px;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:#353C52}
@supports (-moz-appearance:none){
  :root{scrollbar-color:#2A3042 transparent}
  .centro,.pasos{scrollbar-width:thin}
}

/* ============================================================
   ARMAZON

   Areas nombradas y no numeros de linea: la barra de accion abarca
   centro+derecha pero no la izquierda, y la izquierda ocupa dos
   filas. Con areas eso se lee de un vistazo, y toda la reescritura
   movil es redeclarar grid-template-areas, sin tocar los hijos.
   ============================================================ */
.app{
  height:100dvh;display:grid;
  /* Medido del mockup a 1536: izquierda 234, derecha 528, gap 16. El
     centro se queda con el resto (~710, de los que ~10 son el gutter
     del scroll: la tarjeta queda en los 700 del mockup). */
  grid-template-columns:234px minmax(420px,1fr) minmax(380px,528px);
  grid-template-rows:64px minmax(0,1fr) auto;
  grid-template-areas:
    "bar    bar     bar"
    "pasos  centro  previa"
    "pasos  accion  accion";
  gap:16px;padding:0 16px 16px;max-width:1600px;margin-inline:auto;
}

/* min-height:0 -> en un item de grid el default es auto, que significa
   "no me achico por debajo de mi contenido": sin esto el contenido
   estira la fila, .app pasa de 100dvh y vuelve el scroll de pagina.
   min-width:0 -> el gemelo que se olvida. El carrusel lleva
   overflow-x y los nombres de archivo son largos; sin esto empujan
   la columna mas ancha que su track y rompen el layout entero. */
.pasos,.centro,.previa,.accion{min-height:0;min-width:0}
.pasos{grid-area:pasos}
.previa{grid-area:previa}
.accion{grid-area:accion}

/* La UNICA zona que scrollea.
   position:relative: los .solo-lector (absolutos) de adentro se miden
   contra el scroller y no contra la ventana. Sin esto escapan del
   recorte, estiran el documento y scrollIntoView corre la pagina entera
   (body tiene overflow:hidden: no habia forma de volver). */
.centro{
  grid-area:centro;position:relative;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;
  display:flex;flex-direction:column;gap:14px;padding-right:2px;
}

/* ---------- barra superior ---------- */
/* El divisor es un ::after de 100vw y no un border-bottom: el borde
   mediria lo que .app (max-width) y en pantallas anchas la linea se
   cortaria en el aire. left:50% alcanza porque .app esta centrada con
   padding simetrico: el centro de la barra es el de la ventana. */
.bar{
  grid-area:bar;display:flex;align-items:center;gap:14px;min-height:0;min-width:0;
  height:64px;position:relative;
}
.bar::after{
  content:"";position:absolute;left:50%;bottom:0;width:100vw;margin-left:-50vw;
  height:1px;background:var(--divisor);pointer-events:none;
}
.marca{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:inherit;border-radius:var(--r-sm)}
.marca img{width:32px;height:32px;display:block}
.wordmark{font-weight:700;font-size:22px;line-height:1;letter-spacing:-.02em;white-space:nowrap}
/* En el logo real "Book" es blanco y solo "AI" lleva gradiente, y va
   de azul a violeta, al reves que la marca. */
.wordmark i{font-style:normal;color:#8FA8FF}
@supports (background-clip:text) or (-webkit-background-clip:text){
  /* El @supports no es adorno: color:transparent sin el clip deja el
     texto invisible. */
  .wordmark i{
    background:linear-gradient(90deg,var(--g2),var(--g1));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.tagline{
  margin:0 0 0 10px;min-width:0;color:var(--mut);font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- saldo ----------
   Comprar esta siempre a un clic, no escondido detras de quedarse sin
   saldo: la pastilla entera es el boton de cargar, tambien para el que
   quiere cargar de antemano. El "Cargar" escrito aparece recien con
   poco saldo, que es cuando hace falta que se vea. */
.creditos{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 14px 0 12px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--surf-alta);border:1px solid var(--line2);color:var(--mut);
  font:inherit;font-size:13px;line-height:1;white-space:nowrap;
  transition:border-color var(--t),background-color var(--t);
}
.creditos:hover{border-color:var(--acc-line);background:#141828}
.creditos-rayo{font-size:16px;color:var(--acc)}
.creditos b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
/* margin negativo: la pastilla de adentro queda a 6px del borde, igual
   al costado que arriba. */
.creditos .cargar{
  display:none;align-items:center;height:22px;padding:0 9px;margin-right:-8px;
  border-radius:var(--r-pill);font-size:11px;font-weight:600;
  background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc-txt);
}
.creditos.poco .cargar,.creditos.vacio .cargar{display:inline-flex}
.creditos.poco{border-color:rgba(232,163,61,.45)}
.creditos.poco b{color:var(--alerta)}
.creditos.vacio{border-color:rgba(255,107,94,.5)}
.creditos.vacio b{color:var(--mal)}
.creditos.vacio .cargar{background:var(--grad-btn);border-color:transparent;color:#fff}

/* ---------- la cuenta ---------- */
.cuenta{position:relative;display:flex;align-items:center;flex:none}
/* El cuadro de modo local y el avatar tienen la forma del mockup:
   38x38, radio 10. */
.cuenta-local,.cuenta-avatar{
  width:var(--h-bar);height:var(--h-bar);flex:none;border-radius:var(--r);
  display:grid;place-items:center;overflow:hidden;
  background:var(--surf-alta);border:1px solid var(--line2);color:var(--mut);
}
.cuenta-local{font-size:18px}
.cuenta-avatar{padding:0;font:inherit;cursor:pointer;transition:border-color var(--t),box-shadow var(--t)}
.cuenta-avatar:hover,.cuenta-avatar[aria-expanded="true"]{
  border-color:var(--acc-line);box-shadow:0 0 0 3px rgba(110,92,255,.14);
}
.cuenta .avatar{
  width:100%;height:100%;display:grid;place-items:center;
  background:var(--grad-btn) center/cover no-repeat;
  color:#fff;font-size:14px;font-weight:700;
}
.cuenta-entrar{--alto:var(--h-bar);padding:0 14px 0 12px}
.cuenta-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  width:max-content;min-width:220px;max-width:280px;
  display:flex;flex-direction:column;gap:2px;padding:12px;
  background:var(--surf-alta);border:1px solid var(--line2);border-radius:12px;
  box-shadow:var(--sombra-flota);
}
.cuenta-nombre,.cuenta-mail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuenta-nombre{font-size:13.5px;font-weight:600;color:var(--ink)}
.cuenta-mail{font-size:12px;color:var(--mut)}
/* Margen negativo: el texto de Salir alinea con el nombre y el hover
   igual tiene aire a los costados. Dos clases para ganarle a .btn.chico. */
.cuenta-menu .cuenta-salir{margin:10px -6px 0;padding:0 6px;justify-content:flex-start}
.cuenta .corto{display:none}
@media (max-width:480px){ .cuenta .largo{display:none} .cuenta .corto{display:inline} }

/* ---------- ver / armar ----------
   Solo existe en angosto (lo prende la media de 860): ahi armar y ver son
   pantallas aparte. Por encima la vista previa esta siempre a la vista.
   La forma es la del cuadro de la cuenta, que va al lado. */
.bar-vista{
  display:none;width:var(--h-bar);height:var(--h-bar);flex:none;padding:0;border-radius:var(--r);
  place-items:center;font:inherit;font-size:18px;cursor:pointer;
  background:var(--surf-alta);border:1px solid var(--line2);color:var(--mut);
  transition:border-color var(--t),background-color var(--t),color var(--t);
}
.bar-vista:hover{border-color:var(--acc-line);background:#141828;color:var(--ink)}
/* Un icono por vista, ya pintados en el markup: irA() solo cambia el
   rotulo y nunca toca los svg. */
.bar-vista .vista-armar,body[data-vista="ver"] .bar-vista .vista-ver{display:none}
body[data-vista="ver"] .bar-vista .vista-armar{display:inline-block}

/* ---------- stepper ---------- */
/* Panel con borde y sin fondo, como en el mockup. */
.pasos{
  display:flex;flex-direction:column;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px;
}
/* Sin fondo en hover ni en el activo: el progreso lo cuentan los
   circulos y la linea, y un bloque que se prende al pasar el mouse
   compite con eso. min-height 105: los centros de los circulos quedan a
   la distancia del mockup y el conector se estira hasta el siguiente. */
.paso{
  display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;
  min-height:105px;padding:0;border:0;background:none;cursor:pointer;text-align:left;
  border-radius:var(--r);color:inherit;font:inherit;position:relative;
}
.paso:last-child{min-height:0}
.paso:focus-visible{outline-offset:4px}
.paso .n{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;line-height:1;
  background:var(--surf-alta);border:1px solid var(--line2);color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t);
}
.paso:hover .n{border-color:var(--line-hover)}
.paso[data-listo="true"] .n{
  background:var(--grad-btn);border-color:transparent;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
/* El activo (scroll-spy) gana solo un anillo violeta suave. */
.paso[data-activo="true"] .n{box-shadow:0 0 0 4px rgba(110,92,255,.2)}
.paso[data-activo="true"][data-listo="true"] .n{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 4px rgba(110,92,255,.24)}
/* padding-top 8: la fila del titulo (20px) queda centrada con el circulo (36). */
.paso-txt{display:flex;flex-direction:column;gap:5px;padding-top:8px;min-width:0}
.paso .fila1{display:flex;align-items:center;gap:8px;min-height:20px}
.paso-tit{font-size:13px;font-weight:600;line-height:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.paso-desc{font-size:12.5px;line-height:1.35;color:var(--mut)}
.paso .marca-ok{margin-left:auto;display:inline-flex;font-size:16px;color:var(--mut)}
.paso-cuenta{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--mut)}
/* El conector: centrado bajo el circulo, hasta 8px antes del siguiente.
   Violeta cuando el paso de arriba esta hecho. */
.paso::before{
  content:'';position:absolute;left:17px;top:44px;bottom:8px;width:2px;
  background:var(--line2);border-radius:2px;transition:background-color var(--t);
}
.paso:last-child::before{display:none}
.paso[data-listo="true"]::before{background:var(--acc)}

/* ---------- tarjetas ---------- */
/* La cascara compartida: tarjetas del centro, vista previa y barra de
   accion. Borde de un pelo, una luz de 1px arriba y una sombra suave. */
.tarjeta,.previa,.accion{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sombra-tarjeta);
}
.tarjeta{padding:18px;flex:none}
.tarjeta > header{display:flex;align-items:center;gap:12px;margin-bottom:16px;min-height:26px}
/* El numero va en un rectangulo con borde, no relleno. El borde de 1.5px
   es un box-shadow inset: un border de 1.5px Chrome lo redondea a 1px en
   pantallas comunes (medido: borderTopWidth 1px). */
.tarjeta > header .n{
  min-width:30px;height:26px;padding:0 4px;flex:none;border-radius:7px;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;line-height:1;
  box-shadow:inset 0 0 0 1.5px #C9CDD8;color:#fff;
}
.tarjeta > header h2{margin:0;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:.16em;text-transform:uppercase}
/* La tarjeta completa se marca con este tilde verde y no con un borde:
   un borde verde peleaba con el violeta de la seleccion. El -4px compensa
   el tracking que el h2 deja despues de la ultima letra. */
.tarjeta-ok{display:none;font-size:16px;color:var(--ok);margin-left:-4px}
.tarjeta.listo .tarjeta-ok{display:inline-flex}
.tarjeta > header .der{margin-left:auto;display:flex;align-items:center;gap:9px}
.cuenta-mini{font-variant-numeric:tabular-nums;font-size:13px;color:var(--mut)}

/* ---------- vista previa ---------- */
/* Tres filas con la del medio en minmax(0,1fr) mas min-height:0 en el
   marco: eso es lo que hace que la imagen se achique con la ventana en
   vez de empujar el carrusel fuera de pantalla. */
.previa{
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  /* La columna explicita NO es opcional: sin ella la implicita es auto =
     max-content, y la toma del ancho natural de la imagen generada (896px),
     desbordando la columna de 560 y sacando scroll horizontal a la pagina.
     Es el mismo min-width:0 de afuera, que en el grid anidado se olvida. */
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  /* fondo, borde y sombra vienen de la cascara compartida de .tarjeta */
  padding:18px;
}
.previa > *{min-width:0}
/* min-height 32: con o sin botones el encabezado mide lo mismo, y el
   marco no salta cuando aparece la primera imagen. */
.previa > header{display:flex;align-items:center;gap:10px;min-height:32px}
.previa > header h2{margin:0;font-size:17px;font-weight:600;line-height:1.2;white-space:nowrap}
.previa > header .der{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
/* -7px: el ultimo icono queda alineado con el borde del contenido, no
   con el borde del boton de 32. */
.previa-botones{display:flex;align-items:center;gap:2px;margin-right:-7px}
/* A 375 px no entran titulo, pastilla y tres botones: se va la pastilla,
   que es lo unico que no hace falta. */
@media (max-width:480px){ .previa .pastilla-estado{display:none} }
.marco{
  min-height:0;position:relative;display:grid;place-items:center;
  /* Contencion de tamaño: el marco mide lo que le da la fila 1fr y nunca
     lo que trae adentro, y la silueta de carga se mide contra el con
     cqw/cqh. Depende de que .app mida 100dvh: si algun dia la pagina
     scrollea, la fila deja de tener alto y esto hay que revisarlo. */
  container-type:size;
  /* Sin fondo propio: la foto se apoya en la tarjeta. clip con margen y
     no hidden, para que la sombra de la foto no se corte en el borde;
     donde no hay overflow-clip-margin (Safari) se corta, sin drama. */
  overflow:hidden;overflow:clip;overflow-clip-margin:24px;
}
/* Absoluta contra el marco relativo, y no height:100% a secas.
   Dentro de un grid con place-items:center el alto del area queda
   ambiguo para porcentajes: medido, height:100% resolvia a 710px
   dentro de un marco de 555. Con inset:0 siempre resuelve.
   Sin franjas negras: con width/height auto y los max al 100%, la caja
   del <img> mide lo mismo que la foto (contain sin letterbox: nunca se
   recorta) y margin:auto la centra. Asi el radio y la sombra caen sobre
   la foto y no sobre un rectangulo vacio alrededor. */
.marco img{
  position:absolute;inset:0;margin:auto;display:block;
  width:auto;height:auto;max-width:100%;max-height:100%;
  border-radius:var(--r);cursor:zoom-in;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 12px 24px -12px rgba(0,0,0,.7);
}
/* Mientras carga todavia no tiene tamaño propio (seria 0x0): ocupa el
   marco entero para que se vea el brillo. app.js le saca la clase en el
   load y ahi toma el tamaño de la foto. */
.marco img.brillo{width:100%;height:100%;object-fit:contain}

/* ---------- barra de accion ---------- */
/* Un contenedor: la grilla de adentro (.accion-grilla, componentes.css)
   se arma segun el ancho de la BARRA y no el de la ventana, que no dice
   si entran las celdas (la barra mide casi lo mismo a 1280 con tres
   columnas que a 1000 con dos). Sin padding: lo pone la grilla, que lo
   achica con ella; un contenedor no puede consultarse a si mismo. */
.accion{container:accion / inline-size}

/* ---------- utilitarios ---------- */
/* Los estados del marco sin foto (vacio, error). Llena el marco con un
   punteado suave: se lee como "aca va la imagen" y no como una caja
   negra. Lo arma esqueleto() en app.js; el de index.html es el mismo. */
.esqueleto{
  align-self:stretch;justify-self:stretch;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:24px;text-align:center;color:var(--mut);font-size:12.5px;line-height:1.45;
  border:1px dashed var(--line-campo);border-radius:var(--r);
  background:radial-gradient(60% 45% at 50% 42%,rgba(110,92,255,.06),transparent 72%);
}
.esqueleto-ico{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;
  background:var(--surf2);border:1px solid var(--line-campo);color:var(--mut);
}
.esqueleto b{color:var(--ink2);font-size:14px;font-weight:600}
.esqueleto > span:last-child{max-width:34ch}
.esqueleto.mal .esqueleto-ico{background:var(--mal-soft);border-color:rgba(255,107,94,.3);color:var(--mal)}
/* Para lectores de pantalla: fuera de la vista pero NO display:none,
   que tambien lo esconde del lector. */
.solo-lector{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* Brillo de carga para <img>: va de fondo, asi la foto lo tapa sola al
   llegar, y app.js le saca la clase en el load para que la animacion no
   siga corriendo detras de una foto ya pintada. */
.brillo{
  background:linear-gradient(100deg,var(--surf2) 30%,#1F2536 50%,var(--surf2) 70%) var(--surf2);
  background-size:220% 100%;animation:brillo 1.3s linear infinite;
}
@keyframes brillo{from{background-position:100% 0}to{background-position:0 0}}

/* ============================================================
   ANGOSTO
   Solo se redeclaran las areas y las columnas. Ninguna regla de los
   hijos cambia: para eso estaba el grid con areas nombradas.
   ============================================================ */
@media (max-width:1180px){
  .app{
    grid-template-columns:minmax(380px,1fr) minmax(340px,460px);
    grid-template-areas:
      "bar     bar"
      "pasos   pasos"
      "centro  previa"
      "accion  accion";
    grid-template-rows:auto auto minmax(0,1fr) auto;
  }
  /* El stepper vertical no entra: pasa a tira horizontal de 3 chips,
     conservando progreso y navegacion sin comerse 250px de ancho. */
  .pasos{flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding:0;border:0;border-radius:0}
  .paso{
    flex:1 0 auto;min-height:0;grid-template-columns:28px auto;gap:10px;align-items:center;
    padding:6px 14px 6px 6px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-pill);
  }
  .paso .n{width:28px;height:28px;font-size:12px}
  /* El anillo va adentro de la pastilla: los chips llenan la tira, que
     recorta (overflow-x), y con offset positivo quedaban dos rayitas. */
  .paso:focus-visible{outline-offset:-3px}
  .paso-txt{padding-top:0}
  .paso-desc{display:none}
  .paso::before{display:none}
}

@media (max-width:860px){
  .app{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"bar" "pasos" "centro" "accion";
    grid-template-rows:auto auto minmax(0,1fr) auto;
    padding:0 12px;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  .bar{height:56px;gap:10px}
  .bar-vista{display:grid}
  body[data-vista="ver"] .app{grid-template-areas:"bar" "pasos" "previa" "accion"}
  body[data-vista="armar"] .previa{display:none}
  body[data-vista="ver"] .centro{display:none}
  .tagline{display:none}
  /* .accion no va aca: se reacomoda con @container, segun su propio ancho. */
}

@media (max-width:480px){
  .marca img{width:28px;height:28px}
  .wordmark{font-size:19px}
  /* "NazzCoin:" queda solo para el lector: a 375 px no entra junto al
     "Cargar" y la cuenta, y el rayo ya dice que es el saldo. */
  .creditos-et{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .creditos{padding:0 12px 0 10px}
  /* Los tres chips del stepper entran en 350: menos tracking y menos aire,
     y sin el tilde ni la cuenta, que igual estan en cada tarjeta. Del
     tilde se esconde el svg y no su caja: el "listo" sigue para el lector.
     gap 0 en la fila: la caja vacia sumaba el hueco igual. */
  .pasos{gap:5px}
  .paso{padding:5px 9px 5px 5px;gap:7px}
  .paso .fila1{gap:0}
  .paso-tit{letter-spacing:.05em;font-size:11.5px}
  .paso .marca-ok .ico,.paso-cuenta{display:none}
}

/* iteration-count:1 ademas de la duracion: con solo la duracion en .01ms
   una animacion infinita (el brillo, el spinner) seguia dando vueltas a
   toda velocidad en vez de quedarse quieta. Los pseudo van aparte: *
   no los alcanza, y el arco de la silueta de carga es un ::after. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:hover,.btn:active{transform:none!important}
}