/* ============================================================
   Enciende y Grafica — hoja de estilo de la guía
   ------------------------------------------------------------
   Dirección visual: apuntes de clase. Fórmulas y gráficas a
   lápiz azul de fondo, y encima el contenido, limpio y sin cajas.
   Todos los valores salen de tokens.css. Si aquí aparece un hex
   o un tamaño a pelo, es un error.
   ============================================================ */

/* ---------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  min-height: 100%;
  background-color: var(--papel);
}

body {
  margin: 0;
  min-height: 100dvh;
  /* columna: el contenido crece y la navegación cae al fondo de la pantalla */
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-md);
  line-height: var(--alto-cuerpo);
  letter-spacing: var(--track-cuerpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-weight: var(--peso-titulo);
  line-height: var(--alto-titulo);
  letter-spacing: var(--track-titulo);
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

a { color: var(--azul); }

/* los controles no heredan la fuente por su cuenta */
button, input, select, textarea { font-family: inherit; }

:focus-visible {
  outline: 2.5px solid var(--azul);
  outline-offset: 3px;
  border-radius: 3px;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------- fondo matemático
   Fórmulas y gráficas a lápiz azul, detrás de todo. La máscara
   abre un claro en el centro para que el texto no compita. */

.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--azul);
  --claro: radial-gradient(ellipse 60% 48% at 50% 40%, transparent 8%, #000 76%);
  -webkit-mask-image: var(--claro);
  mask-image: var(--claro);
}

/* En los pasos el contenido llega mucho más arriba y ocupa casi toda la
   columna, así que el claro del fondo se agranda. La nav inferior visible
   es la señal de que estamos en un paso. */
body:has(.stepnav:not([hidden])) .fondo {
  --claro: radial-gradient(ellipse 74% 72% at 50% 46%, transparent 4%, #000 88%);
}

.fondo-svg { display: block; width: 100%; height: 100%; }
.fondo-trazo { opacity: var(--trazo-op); }
.fondo-formula { opacity: var(--formula-op); }

/* ---------------------------------------------------------- iconos
   Un solo tamaño por contexto, a través de --ico. Heroicons outline
   ya viene con trazo 1.5, así que no se toca en ningún sitio. */

.ico {
  display: block;
  flex: none;
  width: var(--ico, var(--icono-md));
  height: var(--ico, var(--icono-md));
  stroke-width: var(--trazo-icono);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------- barra superior */

.topline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-bottom: 1.2rem;
}

/* las tres rayitas se quedan pegadas a la izquierda aunque no haya X */
.topline .menu-btn { margin-inline-end: auto; }

.topline-right { display: flex; align-items: center; gap: .5rem; }

.round-btn {
  display: grid;
  place-items: center;
  width: var(--alto-control);
  height: var(--alto-control);
  padding: 0;
  color: var(--tinta);
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-linea);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .12s;
}
.round-btn:hover { color: var(--azul); background: var(--vidrio-alto); }
.round-btn:active { transform: scale(.96); }

.lang {
  display: inline-flex;
  gap: .18rem;
  padding: .2rem;
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-linea);
  border-radius: var(--r-full);
}

.lang-btn {
  font-weight: var(--peso-fuerte);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  padding: .42rem .8rem;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.lang-btn:hover { color: var(--tinta); }
.lang-btn.is-on { background: var(--azul); color: var(--sobre-azul); }

/* ---------------------------------------------------------- comprar
   Un enlace discreto bajo los dos botones de la portada, y el diálogo
   con las tiendas. El <dialog> pone el foco y el Escape; aquí solo va
   el aspecto. */

.home-buy { margin-top: 2.6rem; }

.buy-link {
  --ico: var(--icono-sm);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .55rem;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-cuerpo);
  color: var(--azul);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--azul) 34%, transparent);
  transition: text-decoration-color .18s, opacity .18s;
}
.buy-link:hover { text-decoration-color: currentColor; }
.buy-link-ico { display: inline-flex; flex: none; }

.pop {
  width: min(24rem, calc(100vw - 2rem));
  margin: auto;
  padding: 1.5rem 1.5rem 1.6rem;
  color: var(--tinta);
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-2);
  animation: pop-in .26s cubic-bezier(.2,.7,.3,1) both;
}
.pop::backdrop {
  background: color-mix(in srgb, #0E1430 42%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pop-t { font-size: var(--t-xl); }
.pop-x { width: 2.25rem; height: 2.25rem; margin: -.25rem -.35rem 0 0; }
.pop-lede { margin-top: .35rem; font-size: var(--t-sm); color: var(--tinta-suave); }

.pop-list { display: grid; gap: .6rem; margin-top: 1.3rem; }

.tienda {
  --ico: var(--icono-md);
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1rem;
  color: var(--tinta);
  text-decoration: none;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  transition: border-color .18s, background-color .18s, transform .12s;
}
.tienda:hover { border-color: var(--azul); background: var(--azul-tenue); }
.tienda:active { transform: scale(.99); }

.tienda-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--marca, var(--azul));
  background: var(--papel-hundido);
  border-radius: var(--r-sm);
  transition: background-color .18s;
}
.tienda:hover .tienda-ico { background: var(--papel-2); }

/* cada tienda, en el color de su logo */
.tienda[data-shop="amazon"] { --marca: var(--marca-amazon); }
.tienda[data-shop="tiktok"] { --marca: var(--marca-tiktok); }

/* los logotipos van con relleno, no con trazo como los Heroicons */
.marca {
  display: block;
  flex: none;
  width: var(--ico, var(--icono-md));
  height: var(--ico, var(--icono-md));
}

.tienda-txt { display: flex; flex-direction: column; min-width: 0; }
.tienda-n { font-weight: var(--peso-fuerte); font-size: var(--t-md); line-height: 1.3; }
.tienda-s { font-size: var(--t-xs); color: var(--tinta-suave); line-height: 1.35; }

.tienda-go { --ico: var(--icono-sm); display: inline-flex; flex: none; margin-inline-start: auto; color: var(--tinta-suave); }
.tienda:hover .tienda-go { color: var(--azul); }

@media (prefers-reduced-motion: reduce) {
  .pop { animation: none; }
  .tienda, .buy-link { transition: none; }
}

/* ---------------------------------------------------------- pantallas */

#main { width: 100%; max-width: var(--col); margin-inline: auto; padding: 1.6rem 1.15rem 2rem; flex: 1; }

.screen { display: none; }
.screen.is-on { display: block; animation: rise .32s cubic-bezier(.2,.7,.3,1) both; }

@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.display-xl { font-size: var(--t-4xl); }
.display-l  { font-size: clamp(var(--t-2xl), 5.4vw, var(--t-3xl)); }

.lede {
  color: var(--tinta-media);
  margin-top: .9rem;
  max-width: 34ch;
  font-size: var(--t-lg);
  line-height: 1.55;
}

/* ---------------------------------------------------------- portada */

.home { text-align: center; padding-top: clamp(1rem, 7vh, 4rem); }
.home-title { max-width: 15ch; margin-inline: auto; }
.home-lede { margin-inline: auto; }

/* ---------------------------------------------------------- botones */

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  margin-top: 2.4rem;
}

.btn {
  --ico: var(--icono-md);
  font-family: inherit;
  font-weight: var(--peso-fuerte);
  font-size: var(--t-sm);
  letter-spacing: var(--track-cuerpo);
  min-height: var(--alto-control);
  padding: 0 1.4rem;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: transform .12s, background-color .18s, border-color .18s, color .18s;
}
.btn:active { transform: scale(.97); }

.btn-big {
  font-size: var(--t-md);
  min-height: var(--alto-control-lg);
  padding: 0 1.8rem;
}

/* anchos fijos: el secundario, un punto más estrecho que el principal */
.actions .btn-big { min-width: 17rem; max-width: 100%; }
.home .actions .btn-quiet.btn-big { min-width: 15.5rem; }

.btn-primary {
  background: var(--azul);
  color: var(--sobre-azul);
  box-shadow: var(--sombra-azul);
}
.btn-primary:hover { background: var(--azul-hover); }
.btn-primary:active { background: var(--azul-activo); }

.btn-quiet {
  color: var(--tinta);
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border-color: var(--vidrio-linea);
}
.btn-quiet:hover { background: var(--vidrio-alto); border-color: var(--azul-linea); color: var(--azul); }

/* iconos a pelo: ni fondo, ni borde, ni círculo */
.btn-go,
.btn-ico { display: inline-flex; flex: none; }
.btn-go { --ico: var(--icono-sm); }
.btn-go-back { transform: rotate(180deg); }

.quiet-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  margin-top: 1.4rem;
}
.quiet-links .btn {
  display: inline;                 /* si fuese flex, el gap partiría el subrayado */
  min-height: 0;
  padding: .4rem .5rem;
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  color: var(--tinta-suave);
  background: none;
  border: 0;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--tinta-suave) 38%, transparent);
}
.quiet-links .btn:hover { color: var(--azul); text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .btn, .round-btn { transition: none; }
}

/* ---------------------------------------------------------- paso */

.step-title { font-size: clamp(1.6rem, 6.2vw, 2.05rem); line-height: 1.12; }
.step-body { color: var(--tinta-media); margin-top: .8rem; max-width: 36ch; }
.step-body b { font-weight: 600; font-size: .92em; color: var(--tinta); }

/* El truco: anotación al margen, como en un cuaderno */
.tip {
  display: flex;
  gap: .85rem;
  margin-top: 2.1rem;
  padding: .1rem 0;
}
.tip-l {
  font-size: .82rem;
  font-weight: 600;
  color: var(--azul);
  flex: none;
  padding-top: .12rem;
}
.tip-t { font-size: .95rem; color: var(--tinta-media); }

/* ---------------------------------------------------------- acciones del paso
   Los controles que hay que tocar, en orden. Sustituyen a la pantalla. */

.acts {
  display: grid;
  margin-top: 2rem;
}

/* Apuntes sobre la hoja: sin cajas, solo el reglado */
.act {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  align-items: center;
  gap: 1.2rem;
  padding: 1.25rem .2rem;
}

.act-art { display: grid; place-items: center; }

.act-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.act-lab { font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--tinta); }
.act-sub { font-size: .88rem; color: var(--tinta-suave); line-height: 1.4; }

/* Nota al pie de una acción, marcada con asterisco */
.act-note {
  display: flex;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--azul);
}
.act-note::before { content: "*"; flex: none; }

/* Las teclas usan la misma pastilla que el interruptor (.sw),
   con el nombre dentro del pulsador verde. */

/* Interruptor lateral: pastilla alargada con el pulsador abajo, encendido */
.sw {
  width: 2.7rem;
  height: 1.45rem;
  padding: .18rem;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;    /* pulsador a la derecha: encendido */
}

/* variante vertical: el interruptor del lateral, con la pestaña abajo */
.sw.vert {
  width: 1.45rem;
  height: 2.7rem;
  flex-direction: column;
}

.sw i {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--azul);
}

/* ---------------------------------------------------------- cierre */

/* ---------------------------------------------------------- reseña */

.hint-card {
  margin-top: 1.6rem;
  padding: 1.25rem 1.35rem;
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-linea);
  border-radius: var(--r-xl);
}
.hint-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: .75rem;
}
.hint-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.hint-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .94rem;
  line-height: 1.45;
  color: var(--tinta-media);
}
/* viñeta propia: un punto del verde de la marca, alineado con la primera línea */
.hint-list li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .58em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--azul);
}

.fineprint { font-size: .82rem; color: var(--tinta-suave); margin-top: .9rem; line-height: 1.5; }

.form { display: grid; gap: .9rem; margin-top: 1.4rem; }
.field { display: grid; gap: .32rem; }
.field-l { font-size: .88rem; font-weight: 600; color: var(--tinta); }
.opt { font-weight: 400; color: var(--tinta-suave); }
.field select, .field input, .field textarea {
  font: inherit;
  font-size: 16px;
  padding: .65rem .75rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-xs);
  background: var(--papel-2);
  color: var(--tinta);
  width: 100%;
  resize: vertical;
}
.field select:focus, .field input:focus, .field textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-tenue); }
.field textarea::placeholder, .field input::placeholder { color: var(--tinta-suave); opacity: .75; }

.sent-note {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: var(--r-sm);
  background: var(--azul-tenue);
  border: 1px solid var(--azul-linea);
  font-size: .95rem;
  color: var(--tinta-media);
}

/* ---------------------------------------------------------- nav inferior */

.stepnav {
  position: sticky;
  bottom: 0;
  width: 100%;
  max-width: var(--col);
  margin: auto auto 0;              /* empujada al fondo de la pantalla */
  padding: 1.15rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--papel) 74%, transparent);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  border-top: 1px solid var(--linea);
}
.stepnav[hidden] { display: none; }

.nav-btn {
  font-weight: 600;
  font-size: .95rem;
  padding: .6rem .1rem;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: color .18s;
}
.nav-btn:hover:not(:disabled) { color: var(--tinta); }
.nav-btn:disabled { opacity: .3; cursor: default; }

.nav-btn-primary {
  background: var(--azul);
  color: var(--sobre-azul);
  padding: .7rem 1.35rem;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .04), 0 10px 24px -12px color-mix(in srgb, var(--azul) 70%, transparent);
}
.nav-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--azul) 88%, #000); color: var(--sobre-azul); }

.nav-count { font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.nav-sep { opacity: .5; margin-inline: .12em; }

/* ---------------------------------------------------------- responsive */

@media (min-width: 46rem) {
  #main { padding-top: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------- pantalla y teclas */


/* Tecla: misma receta que el botón Siguiente */
.ky {
  display: inline-grid;
  place-items: center;
  min-width: 2.15rem;
  padding: .42rem .7rem;
  background: var(--azul);
  color: var(--sobre-azul);
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
}

/* Secuencia de teclas */
.seq { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.seq-l {
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta);
  margin: 1.8rem 0 .7rem;
}


/* ---------------------------------------------------------- menú lateral
   El mismo material que el resto: papel translúcido sobre el fondo de
   fórmulas, que se sigue viendo por debajo. Nada de cajas ni iconos en
   la lista: tipografía y filetes, como los apuntes. */

.drawer-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--tinta) 26%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: veil-in .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed;
  z-index: 41;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(21rem, 88vw);
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
  background: var(--papel);
  border-inline-end: 1px solid var(--linea);
  box-shadow: var(--sombra-2);
  animation: drawer-in .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }

/* la X cae justo donde estaban las tres rayitas que abrieron el menú */
.drawer-top { display: flex; }
.drawer-x { margin-inline-start: -.1rem; }

/* los dos destinos: texto a secas, en el azul de la marca */
.drawer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 2.4rem;
}

.drawer-link {
  padding: 0;
  font-family: inherit;
  font-weight: var(--peso-fuerte);
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: var(--track-titulo);
  color: var(--azul);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity .18s;
}
.drawer-link:hover { opacity: .62; }

/* el mismo dibujo del fondo, en pequeño, llenando el hueco de la lista */
.drawer-art {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  padding: 2.2rem 0;
  color: var(--azul);
}
.drawer-art-svg { width: min(100%, 15rem); height: auto; }
/* aquí no es textura de fondo sino una ilustración: se ve algo más */
.drawer-art .fondo-trazo { opacity: .22; }
.drawer-art .fondo-formula { opacity: .3; }

.drawer-foot {
  --ico: var(--icono-sm);
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 1.05rem 0 0;
  font-family: inherit;
  font-weight: var(--peso-medio);
  font-size: var(--t-xs);
  letter-spacing: var(--track-cuerpo);
  color: var(--tinta-suave);
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--linea);
  cursor: pointer;
  transition: color .18s;
}
.drawer-foot-ico { display: inline-flex; flex: none; }
.drawer-foot:hover { color: var(--azul); }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-veil { animation: none; }
}

/* ---------------------------------------------------------- tacto de app */

/* nada de seleccionar texto al tocar un control */
.btn,
.round-btn,
.nav-btn,
.lang-btn,
.drawer-link,
.drawer-foot { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .btn, .round-btn { transition: none; }
}

/* Pareja de teclas: las flechas van de dos en dos */
.kys { display: inline-flex; gap: .25rem; }
.kys .ky { min-width: 1.75rem; padding: .42rem .4rem; font-size: .82rem; }

/* ---------------------------------------------------------- pantalla
   El marco que comparten el paso 3 (cambio de modo) y el paso 4
   (elegir la app). Iconos de Lucide, monocromos. */

.appscr {
  --scr-sel: #58A8FF;   /* azul de selección dentro de la pantalla */
  position: relative;
  width: 100%;
  max-width: 18.5rem;
  margin: 1.5rem auto 0;
  aspect-ratio: 3 / 2;
  background: #0B0D10;
  border-radius: 11px;
  padding: .5rem .55rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-1);
}

.appscr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .55rem;
  color: #7E8994;
}
.appscr-bar .bat {
  position: relative;
  width: .95rem; height: .5rem;
  border: 1px solid #6B7580;
  border-radius: 2px;
  padding: 1px;
}
.appscr-bar .bat::before {
  content: "";
  display: block;
  width: 78%;
  height: 100%;
  background: #B6C0CA;
  border-radius: 1px;
}
.appscr-bar .bat::after {
  content: "";
  position: absolute; right: -3px; top: 50%; translate: 0 -50%;
  width: 2px; height: .22rem;
  background: #6B7580;
  border-radius: 0 1px 1px 0;
}

.appscr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: center;
  gap: .4rem .1rem;
  height: 100%;
}

.appi { display: grid; justify-items: center; gap: .22rem; }

.appi-ico {
  width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center;
  border-radius: 8px;
  color: #AEB8C2;
  transition: color .25s, background-color .25s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.appi-ico svg { width: 1.05rem; height: 1.05rem; }

.appi-n { font-size: .48rem; color: #79838E; transition: color .25s; }

.appi.is-sel .appi-ico { color: var(--scr-sel); transform: scale(1.1); }
.appi.is-sel .appi-n { color: var(--scr-sel); }

.appi.is-open .appi-ico { animation: appOpen 1.1s cubic-bezier(.3,.7,.3,1) both; }
@keyframes appOpen {
  0%   { transform: scale(1.07); }
  30%  { transform: scale(.92); }
  100% { transform: scale(1.9); opacity: 0; }
}

/* --- paso 3: las dos caras de la pantalla */
.scr-stack { position: relative; flex: 1; }
.scr-face {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  /* la cara que sale se va antes de que entre la otra: nunca se cruzan */
  transition: opacity .26s ease, visibility 0s linear .26s;
  pointer-events: none;
}
.scr-face.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease .16s, visibility 0s;
}

.scr-face[data-face="calc"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 .3rem;
  color: #DCE3EA;
}
.scr-expr { font-size: 1.02rem; letter-spacing: .04em; color: #8B959F; }
.scr-res { font-size: 2.45rem; line-height: 1.05; text-align: right; font-variant-numeric: tabular-nums; }

/* la tecla que provoca el cambio */
.scr-key {
  position: absolute;
  right: .55rem; bottom: .5rem;
  display: grid; place-items: center;
  min-width: 1.5rem;
  padding: .2rem .45rem;
  background: var(--azul);
  color: var(--sobre-azul);
  border-radius: 999px;
  font-weight: 600;
  font-size: .66rem;
  animation: keyIn .25s ease both;
}
.scr-key[data-hold="1"]::after {
  content: "";
  position: absolute;
  left: .32rem; right: .32rem; bottom: -.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--azul);
  transform-origin: left center;
  animation: keyFill 1s ease-out both;
}
@keyframes keyIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes keyFill { from { transform: scaleX(0); opacity: .95; } to { transform: scaleX(1); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .appi-ico, .scr-face { transition: none; }
  .appi.is-open .appi-ico, .scr-key, .scr-key[data-hold="1"]::after { animation: none; }
}

/* --- paso 5: la lista de fotos */

.appscr-bar .scr-back { display: grid; place-items: center; color: #C3CBD4; }
.appscr-bar .scr-back svg { width: .7rem; height: .7rem; }
.appscr-bar .scr-time { margin-right: auto; margin-left: .3rem; }

.filelist {
  flex: 1;
  margin-top: .35rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.filerow {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .35rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  transition: background-color .22s ease;
}

.filethumb {
  position: relative;
  flex: none;
  width: 1.55rem;
  height: 1.15rem;
  border-radius: 2px;
  border: 1.5px solid #C9D2DB;
  transition: border-color .22s ease;
}
/* la hojita de atrás: en la pantalla real la miniatura es una pila */
.filethumb::after {
  content: "";
  position: absolute;
  right: -3px; bottom: -3px;
  width: 100%; height: 100%;
  border: 1.5px solid rgba(201, 210, 219, .45);
  border-radius: 2px;
  z-index: -1;
}
.th-a { background: linear-gradient(#7EC8F0 55%, #14507E); }
.th-b { background: linear-gradient(#9AD7F5 45%, #1E6FA8); }
.th-c { background: linear-gradient(#C3E05A 55%, #4E8C2A); }

.filename {
  font-size: .62rem;
  color: #E4EAF0;
  letter-spacing: .01em;
}

.filerow.is-sel { background: var(--scr-sel); }
.filerow.is-sel .filethumb { border-color: #FFFFFF; }
.filerow.is-sel .filename { color: #fff; }

@media (prefers-reduced-motion: reduce) { .filerow { transition: none; } }

/* ---------------------------------------------------------- pasos de la tarjeta */

/* icono ilustrativo junto a una acción */
.ico-b {
  display: grid;
  place-items: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 999px;
  background: var(--azul-tenue);
  border: 1px solid var(--azul-linea);
  color: var(--azul);
}
.ico-b svg { width: 1.15rem; height: 1.15rem; }

/* escena: la tarjeta entrando en la ranura de la calculadora.
   La tarjeta va POR DETRÁS del cuerpo: al entrar desaparece tras él. */
.slot {
  position: relative;
  width: 100%;
  max-width: 18.5rem;
  margin: 1.6rem auto 0;
  height: 7.6rem;
  display: grid;
  place-items: center;
}

.slot-body {
  position: relative;
  z-index: 2;                      /* por delante de la tarjeta */
  width: 8.4rem; height: 5.8rem;
  border-radius: 13px;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
  display: grid;
  place-items: center;
}

/* la ranura del lateral derecho */
.slot-mouth {
  position: absolute;
  right: -2px; top: 50%; translate: 0 -50%;
  width: 4px; height: 1.5rem;
  background: var(--papel-hundido);
  border: 1px solid var(--linea);
  border-radius: 2px;
}

/* la pantalla de la calculadora */
.slot-scr {
  width: 6.4rem; height: 3.9rem;
  border-radius: 6px;
  background: #0B0D10;
}

/* la tarjeta, detrás del cuerpo */
.slot-card {
  position: absolute;
  z-index: 1;
  top: 50%;
  translate: 0 -50%;
  width: 2.7rem; height: 1.35rem;
  border-radius: 3px 2px 2px 3px;
  background: var(--azul);
  box-shadow: 0 1px 3px rgba(16, 24, 32, .18);
  transition: left .75s cubic-bezier(.3, .7, .3, 1);
  left: calc(50% + 6.6rem);
}
.slot-card.is-in   { left: calc(50% + 4.2rem); }
.slot-card.is-deep { left: calc(50% + 1.8rem); transition-duration: .34s; }
.slot-card.is-back { left: calc(50% + 2.5rem); transition-duration: .22s; }

/* la marca de encajada, sobre el borde del cuerpo */
.slot-done {
  position: absolute;
  z-index: 3;
  top: .35rem; left: 50%;
  translate: -50% 0;
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 999px;
  background: var(--azul);
  color: var(--sobre-azul);
  opacity: 0;
  scale: .7;
  transition: opacity .22s, scale .22s cubic-bezier(.2,.8,.3,1.2);
}
.slot-done svg { width: .9rem; height: .9rem; }
.slot-done.is-on { opacity: 1; scale: 1; }

/* el número de orden de una acción */
.num-b {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 999px;
  background: var(--azul);
  color: var(--sobre-azul);
  font-weight: 600;
  font-size: .95rem;
}

/* botón que abre el editor */
.step-cta { margin-top: 1.6rem; display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .slot-card, .slot-done { transition: none; }
}

/* ---------------------------------------------------------- editor embebido */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  animation: sheetUp .28s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes sheetUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.sheet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;
  border-bottom: 1px solid var(--linea);
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
}
.sheet-t { font-weight: 600; font-size: .95rem; }

.sheet-frame {
  flex: 1;
  width: 100%;
  border: 0;
  display: block;
}

body.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }

/* ---------------------------------------------------------- página de compra
   comprar.html: la que se enlaza desde las redes. Una pantalla y nada más
   —título, tiendas y ayuda—, así que reutiliza el fondo y las filas del
   diálogo «Comprar» de la guía. */

.lp-hero { text-align: center; padding-top: clamp(1rem, 7vh, 4rem); }
.lp-title { max-width: 16ch; margin-inline: auto; }

.lp-tiendas {
  max-width: 26rem;
  margin-top: 2.6rem;
  margin-inline: auto;
  text-align: start;   /* el texto de la fila, a la izquierda */
}

/* Aquí la marca va suelta: sin pastilla gris detrás y un punto más grande.
   En el diálogo de la guía la fila es pequeña y la pastilla la sujeta; en
   esta página, que solo tiene dos filas, sobra todo lo que no sea el logo. */
.lp-tiendas .tienda { --ico: var(--icono-lg); padding: 1rem; gap: 1rem; }
.lp-tiendas .tienda-ico,
.lp-tiendas .tienda:hover .tienda-ico {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

/* La ayuda, debajo de las tiendas y separada por una línea: quien llega a
   leerla es porque no ha comprado todavía. */
.lp-ayuda {
  max-width: 26rem;
  margin: 2.6rem auto 0;
  padding-top: 1.7rem;
  border-top: 1px solid var(--linea);
}
.lp-ayuda-t { font-size: var(--t-sm); font-weight: var(--peso-fuerte); }
.lp-ayuda-s { margin-top: .3rem; font-size: var(--t-sm); color: var(--tinta-suave); }