/* =========================================================================
   sniper.cards — interfaz
   =========================================================================

   Los colores son los de `design/tokens.css`, sacados de la ilustración de
   Mega Charizard X, y su semántica manda sobre cualquier decisión estética:

     ÁMBAR = OPORTUNIDAD. El dinero. El "actúa ya".
     CIAN  = EVIDENCIA.   La confianza, el porqué, la traza.

   REGLA QUE GOBIERNA TODA ESTA HOJA: el ámbar se reserva CASI EN EXCLUSIVA
   para las oportunidades. Si el ámbar está también en los botones, en los
   enlaces y en los bordes de foco, deja de significar "chollo" y pasa a
   significar "interfaz".

   Por eso las MEJORES OFERTAS no llevan ni una gota de ámbar. Son inventario,
   no aviso, y tienen que verse distintas de un vistazo y sin leer.
   ========================================================================= */

:root {
  --bg:            oklch(0.14 0.012 265);
  --surface:       oklch(0.185 0.018 260);
  --surface-2:     oklch(0.225 0.020 258);
  --border:        oklch(0.30 0.020 258);
  --border-strong: oklch(0.40 0.022 255);

  --text:   oklch(0.96 0.006 250);
  --muted:  oklch(0.72 0.012 252);
  --faint:  oklch(0.55 0.014 254);

  --amber:        oklch(0.74 0.17 55);
  --amber-bright: oklch(0.85 0.15 78);
  --amber-wash:   oklch(0.26 0.055 55);

  --cyan:        oklch(0.75 0.13 225);
  --cyan-bright: oklch(0.88 0.11 208);
  --cyan-wash:   oklch(0.24 0.045 232);

  --danger:  oklch(0.64 0.18 28);
  --success: oklch(0.72 0.15 150);

  --conf-HIGH:         oklch(0.88 0.11 208);
  --conf-MEDIUM:       oklch(0.70 0.10 225);
  --conf-LOW:          oklch(0.52 0.07 232);
  --conf-INSUFFICIENT: oklch(0.45 0.015 255);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--cyan-bright); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { width: min(100% - 2rem, 64rem); margin-inline: auto; }
.oculto { display: none !important; }

/* --- Cabecera ----------------------------------------------------------- */
header.top {
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(10px);
}
header.top .wrap {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 0;
}
.marca {
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  letter-spacing: -0.02em;
}
.marca span { color: var(--amber); }

nav.pestanas { display: flex; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
nav.pestanas button {
  background: none; border: none; cursor: pointer;
  color: var(--faint);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase;
  padding: .5rem .7rem; border-radius: 4px;
}
nav.pestanas button:hover { color: var(--text); background: var(--surface); }
nav.pestanas button[aria-current="page"] { color: var(--text); background: var(--surface-2); }
nav.pestanas .cuenta {
  font-size: .68rem; margin-left: .3rem;
  color: var(--faint);
}
nav.pestanas button[aria-current="page"] .cuenta { color: var(--cyan); }

.salir {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--faint); cursor: pointer;
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; padding: .4rem .6rem;
}
.salir:hover { color: var(--text); border-color: var(--border-strong); }

main { padding: 2rem 0 5rem; }
section.vista { display: flex; flex-direction: column; gap: 1.25rem; }

.titulo-vista { display: flex; flex-direction: column; gap: .35rem; }
.titulo-vista h2 { font-size: 1.4rem; }
.titulo-vista p { color: var(--muted); max-width: 44rem; }

/* --- Entrar ------------------------------------------------------------- */
.entrar {
  width: min(100% - 2rem, 24rem); margin: 4rem auto;
  display: flex; flex-direction: column; gap: 1rem;
}
.entrar h1 { font-size: 1.8rem; }
.entrar h1 span { color: var(--amber); }
.entrar p.lema { color: var(--muted); }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
input[type="email"], input[type="password"], input[type="search"], select {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: .6rem .7rem; font: inherit; font-size: .95rem; width: 100%;
}
input::placeholder { color: var(--faint); }

.boton {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: .6rem .9rem; cursor: pointer; font-weight: 600; font-size: .92rem;
}
.boton:hover { background: color-mix(in oklch, var(--surface-2) 70%, var(--border)); }
.boton[disabled] { opacity: .5; cursor: default; }
.boton.secundario {
  background: none; font-weight: 500; color: var(--muted);
  border-color: var(--border);
}

.aviso {
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: .6rem .75rem; font-size: .88rem; color: var(--muted);
  background: var(--surface);
}
.aviso.malo { border-color: color-mix(in oklch, var(--danger) 55%, transparent); color: var(--danger); }
.aviso.bueno { border-color: color-mix(in oklch, var(--success) 45%, transparent); color: var(--success); }

/* --- Tarjeta de OPORTUNIDAD --------------------------------------------
   Ámbar, y es lo único que lo lleva. */
.oportunidad {
  border: 1px solid color-mix(in oklch, var(--amber) 35%, var(--border));
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(100deg, var(--amber-wash) 0%, var(--surface) 45%);
  padding: 1.1rem 1.25rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem;
}
@media (max-width: 44rem) { .oportunidad { grid-template-columns: 1fr; } }

.oportunidad .titulo { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.oportunidad .carta { font-family: var(--mono); font-size: .74rem; color: var(--muted); margin-top: .2rem; }
.oportunidad .cifra { text-align: right; }
.oportunidad .cifra b {
  font-family: var(--mono); font-size: 2.1rem; font-weight: 700;
  color: var(--amber-bright); line-height: 1; display: block;
}
.oportunidad .cifra span {
  font-family: var(--mono); font-size: .7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
}

/* --- Tarjeta de MEJOR OFERTA -------------------------------------------
   Ni una gota de ámbar. Tiene que verse distinta sin leerla. */
.oferta {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  padding: 1rem 1.15rem;
  display: grid; grid-template-columns: 1fr auto; gap: .8rem 1.5rem;
}
@media (max-width: 44rem) { .oferta { grid-template-columns: 1fr; } }
.oferta .titulo { font-size: .93rem; font-weight: 600; line-height: 1.35; }
.oferta .carta { font-family: var(--mono); font-size: .72rem; color: var(--faint); margin-top: .2rem; }
.oferta .cifra { text-align: right; }
.oferta .cifra b {
  font-family: var(--mono); font-size: 1.4rem; font-weight: 700;
  color: var(--text); line-height: 1; display: block;
}
.oferta .cifra span {
  font-family: var(--mono); font-size: .66rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: .07em;
}
.no-es-oportunidad {
  grid-column: 1 / -1;
  font-size: .82rem; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: .6rem;
}
.no-es-oportunidad b { color: var(--text); }

/* --- Desglose común ----------------------------------------------------- */
.desglose {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border); padding-top: .75rem;
  display: grid; gap: .1rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.linea { display: flex; justify-content: space-between; gap: .6rem; font-size: .84rem; }
.linea dt { color: var(--faint); }
.linea dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.linea.total dt, .linea.total dd { font-weight: 700; color: var(--text); }
.linea.estimado dd { color: var(--muted); }

.acciones { grid-column: 1 / -1; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.acciones a.ir {
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: .45rem .8rem; text-decoration: none; font-size: .88rem; font-weight: 600;
}
.oportunidad .acciones a.ir {
  border-color: color-mix(in oklch, var(--amber) 50%, transparent);
  color: var(--amber-bright);
}

.pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 3px;
  border: 1px solid var(--border-strong); color: var(--muted);
}
.pill.conf { border-color: color-mix(in oklch, var(--c) 45%, transparent); color: var(--c); }

details.porque { grid-column: 1 / -1; }
details.porque summary {
  cursor: pointer; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--cyan);
  padding: .3rem 0;
}
details.porque ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .86rem; }
details.porque li { margin-bottom: .2rem; }

/* --- Mi lista ----------------------------------------------------------- */
.buscador { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.buscador .campo { flex: 1 1 16rem; }

.resultados { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.carta-mini {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: .7rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); padding: .6rem; align-items: center;
}
.carta-mini img {
  width: 100%; border-radius: 3px; display: block;
  aspect-ratio: 245/342; object-fit: cover; background: var(--surface-2);
}
.carta-mini .nom { font-size: .86rem; font-weight: 600; line-height: 1.25; }
.carta-mini .sub { font-family: var(--mono); font-size: .66rem; color: var(--faint); margin-top: .1rem; }
.carta-mini .fila { display: flex; gap: .35rem; margin-top: .45rem; align-items: center; }
.carta-mini select { padding: .25rem .35rem; font-size: .75rem; flex: 1; }
.carta-mini button {
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); border-radius: 4px; cursor: pointer;
  font-size: .75rem; padding: .25rem .5rem;
}

.vigiladas { display: flex; flex-direction: column; gap: .4rem; }
.vigilada {
  display: flex; flex-direction: column; gap: .7rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); padding: .7rem .75rem;
}
/* La ficha pasó de ser una línea a tener dos alturas —la carta arriba, tu
   límite abajo— así que la fila de arriba se maqueta aparte. Se CAMBIA esta
   regla en vez de añadir otra al final: dos `.vigilada` con la misma
   especificidad peleándose por `display` es justo el tipo de colisión que se
   ve un mes después y ya nadie sabe cuál manda. */
.vigilada .cabecera {
  align-items: flex-start; display: flex; gap: .75rem; justify-content: space-between;
}
.vigilada .nom { font-size: .9rem; font-weight: 600; }
.vigilada .sub { font-family: var(--mono); font-size: .68rem; color: var(--faint); }
.vigilada .quitar {
  flex-shrink: 0; background: none; border: 1px solid var(--border);
  color: var(--faint); border-radius: 4px; cursor: pointer;
  font-size: .72rem; padding: .25rem .5rem;
}
.vigilada .quitar:hover { color: var(--danger); border-color: var(--danger); }

/* --- Estado vacío -------------------------------------------------------
   No es un cajón triste: dice qué está pasando y qué falta. */
.vacio {
  border: 1px dashed var(--border-strong); border-radius: 8px;
  padding: 1.5rem 1.35rem; color: var(--muted);
  display: flex; flex-direction: column; gap: .5rem;
}
.vacio b { color: var(--text); font-weight: 600; }
.vacio .mono { color: var(--cyan); }

.cargando { color: var(--faint); font-family: var(--mono); font-size: .8rem; }

footer.pie {
  border-top: 1px solid var(--border); margin-top: 3rem;
  padding: 1.5rem 0; color: var(--faint); font-size: .78rem;
}
footer.pie a { color: var(--faint); }

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

/* -------------------------------------------------------------------------
   EL MODO: colecciono / revendo
   -------------------------------------------------------------------------
   Sin ámbar. El ámbar significa «chollo» y esto es un ajuste, no un aviso:
   pintarlo de ámbar diluiría lo único que el ámbar tiene que decir. El
   seleccionado se marca con cian, que es el color de la evidencia, porque eso
   es exactamente lo que hace: decir contra qué se están midiendo las cifras
   que hay debajo. */

.modo {
  display: inline-flex; border: 1px solid var(--border); border-radius: 5px;
  overflow: hidden; margin-left: auto;
}
.modo button {
  background: none; border: 0; cursor: pointer;
  color: var(--faint); font-family: var(--mono); font-size: .68rem;
  letter-spacing: .07em; padding: .4rem .7rem; text-transform: uppercase;
}
.modo button + button { border-left: 1px solid var(--border); }
.modo button:hover { color: var(--text); }
.modo button[aria-pressed="true"] {
  background: var(--cyan-wash); color: var(--cyan-bright);
}

/* La frase que dice contra qué se compara. Sin ella el porcentaje cambia al
   pulsar el botón y parece un error. */
.explica-modo {
  color: var(--faint); font-size: .78rem;
  padding: 0 0 .7rem; margin: -.3rem 0 0;
}
.explica-modo:empty { display: none; }

/* Lo que el revendedor no vería. No se oculta sin más: se cuenta, porque
   «han desaparecido tres» es exactamente la información que explica el modo. */
.ocultas-por-modo {
  border: 1px dashed var(--border); border-radius: 6px;
  color: var(--muted); font-size: .85rem; padding: .8rem 1rem;
}

/* -------------------------------------------------------------------------
   POR DÓNDE EMPEZAR
   -------------------------------------------------------------------------
   Lo que ve alguien con la lista vacía.

   Cian, no ámbar. Esto NO es una oportunidad ni una recomendación de compra:
   es «de estas cartas sabemos el precio y hay mercado». Pintarlo de ámbar
   diría lo contrario de lo que el texto dice, y el color gana siempre a la
   letra pequeña. */

.propuesta { display: flex; flex-direction: column; gap: 1rem; }

.bandas { display: flex; flex-wrap: wrap; gap: .4rem; }
.bandas button {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); cursor: pointer;
  font-size: .78rem; padding: .35rem .8rem;
}
.bandas button:hover { border-color: var(--border-strong); color: var(--text); }
.bandas button[aria-pressed="true"] {
  background: var(--cyan-wash); border-color: var(--cyan); color: var(--cyan-bright);
}

.sugerencias { display: flex; flex-direction: column; gap: .5rem; }

.sugerencia {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto auto;
  padding: .8rem 1rem;
}
.sugerencia .nom { font-weight: 600; }
.sugerencia .sub { color: var(--faint); font-size: .78rem; }

.sugerencia .cifras { text-align: right; }
.sugerencia .fmv {
  font-family: var(--mono); font-size: 1rem; font-variant-numeric: tabular-nums;
}
/* Las cifras que sostienen la propuesta. Van juntas al precio a propósito:
   son lo que permite juzgarla en vez de creérsela. */
.sugerencia .porque { color: var(--faint); font-size: .72rem; }

.sugerencia .vigilar-sug {
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 5px; color: var(--text); cursor: pointer;
  font-size: .8rem; padding: .4rem .9rem; white-space: nowrap;
}
.sugerencia .vigilar-sug:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.sugerencia .vigilar-sug:disabled { color: var(--faint); cursor: default; }

@media (max-width: 640px) {
  /* Una columna, no dos.
   *
   * Con `1fr auto` el nombre de la carta se quedaba en 106px y las cifras
   * se llevaban 202: al revés de lo que importa. La frase «25 ventas detrás ·
   * 67 anuncios ahora» no se encoge, así que aplasta a lo que tiene al lado.
   */
  .sugerencia {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .sugerencia .cifras { text-align: left; }
  .sugerencia .fmv { font-size: 1.05rem; }
}

/* -------------------------------------------------------------------------
   EN UN MÓVIL
   -------------------------------------------------------------------------
   Medido a 390px, que es un iPhone normal. La cabecera estaba pensada para
   una sola fila y en móvil se rompía de tres maneras a la vez:

     · el selector de modo quedaba aplastado a 19px de ancho — ilegible, y es
       el control que decide contra qué se compara TODO lo de debajo;
     · la cabecera ocupaba 218px de 844, un cuarto de la pantalla;
     · los botones medían 30-34px de alto, por debajo de los 44 que hace falta
       para acertar con un dedo.

   La solución no es encoger: es apilar en filas con un orden que signifique
   algo. Marca y salir arriba, pestañas debajo, y el modo en su propia fila
   ocupando el ancho, porque es lo que más se toca y lo que peor se leía. */

@media (max-width: 640px) {
  header.top .wrap {
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .6rem 0;
  }

  .marca { flex: 1 1 auto; }
  .salir { flex: 0 0 auto; }

  /* Las pestañas, en su fila y a lo ancho. Con scroll propio por si algún día
     hay una cuarta: la página entera no se puede mover de lado. */
  nav.pestanas {
    flex: 1 0 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  nav.pestanas::-webkit-scrollbar { display: none; }
  nav.pestanas button { flex: 1 0 auto; min-height: 44px; }

  /* El modo, fila propia y ancho completo. Era lo que peor estaba. */
  .modo {
    flex: 1 0 100%;
    margin-left: 0;
  }
  .modo button {
    flex: 1 1 50%;
    min-height: 44px;
    font-size: .72rem;
  }

  .salir { min-height: 44px; }

  /* En móvil la cabecera NO se queda pegada arriba.
   *
   * Apilada en tres filas mide 263px de los 844 de un iPhone: casi un
   * tercio de la pantalla robado de forma permanente a lo que la persona ha
   * venido a leer. En un escritorio de 1100px cabe en una fila y quedarse
   * fija sale gratis; aquí no.
   */
  header.top { position: static; }

  .explica-modo { padding-bottom: .5rem; }

  /* Área táctil en el resto de controles que se pulsan de verdad. */
  .bandas button,
  a.ir,
  .sugerencia .vigilar-sug,
  .vigilada .quitar,
  .resultados button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------
   TU LÍMITE, CARTA A CARTA
   -------------------------------------------------------------------------
   La barra que decide qué es una oportunidad PARA TI.

   El precio de referencia sale de ventas cerradas: ya es lo que la gente paga.
   Pedirle además un descuento fijo a todo el mundo era decidir por el usuario
   algo que solo él sabe — cuánto vale esa carta concreta para él.

   En cian, no en ámbar. El ámbar es la oportunidad; esto es el ajuste que
   define cuál lo es. */

.liston { display: flex; flex-direction: column; gap: .35rem; }
.liston .referencia { color: var(--muted); font-size: .8rem; }
.liston .referencia b { color: var(--text); font-family: var(--mono); }
.liston .sin-precio { color: var(--faint); font-style: italic; }

/* La frase que dice qué significa la barra, en euros. Un «-20%» abstracto
   obliga a calcular; «te aviso por debajo de 195,20 €» se lee y ya está. */
.liston .avisame {
  color: var(--cyan-bright);
  font-size: .82rem;
  min-height: 1.2em;
}

/* La altura es del CONTROL, no de la línea: el `track` de 6px sería un blanco
   de 6px para el ratón y de 6px para un dedo. Aquí la línea sigue siendo fina
   y lo que se puede agarrar mide 26. */
input.barra {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  cursor: pointer;
  display: block;
  height: 26px;
  margin: 0;
  max-width: 34rem;
  width: 100%;
}
input.barra::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--cyan-wash), var(--surface-2) 50%, var(--amber-wash));
  border-radius: 3px; height: 6px;
}
input.barra::-moz-range-track {
  background: linear-gradient(90deg, var(--cyan-wash), var(--surface-2) 50%, var(--amber-wash));
  border-radius: 3px; height: 6px;
}
input.barra::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  background: var(--cyan-bright);
  border: 2px solid var(--bg);
  border-radius: 50%;
  height: 20px; width: 20px;
  margin-top: -7px;
}
input.barra::-moz-range-thumb {
  background: var(--cyan-bright);
  border: 2px solid var(--bg);
  border-radius: 50%;
  height: 20px; width: 20px;
}
input.barra:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* La leyenda del control, una sola vez encima de la lista. */
.explica-liston {
  color: var(--muted);
  font-size: .8rem;
  margin: 0 0 .8rem;
  max-width: 62ch;
}
.explica-liston b { color: var(--text); font-weight: 600; }

/* En un móvil lo que se agarra tiene que caber en un dedo, no en un ratón.
   Se sube la ALTURA, no el `padding`: con `box-sizing: border-box` el padding
   se comería los 26px en vez de sumarse. */
@media (max-width: 640px) {
  input.barra { height: 44px; max-width: none; }
  input.barra::-webkit-slider-thumb { height: 26px; width: 26px; margin-top: -10px; }
  input.barra::-moz-range-thumb { height: 26px; width: 26px; }
}

/* Guardado, guardando, o no se ha podido. Una barra que vuelve a su sitio al
   recargar sin haber dicho nada es la peor forma de enterarse. */
.liston.guardando input.barra { opacity: .6; }
.liston.guardado .avisame::after { color: var(--cyan-bright); content: " ✓"; }
.liston.fallo .avisame::after {
  color: var(--danger);
  content: " · no se ha podido guardar";
}

/* Lo que la búsqueda tiene que decir antes de la lista: cuántas se pueden
   vigilar de verdad, o qué parte de lo que escribiste no existe. Sin esta
   línea, «ninguna tiene precio» parece un fallo y es una carencia de datos. */
.aviso-busqueda {
  color: var(--muted);
  font-size: .8rem;
  margin: 0 0 .5rem;
  max-width: 62ch;
}
.aviso-busqueda b { color: var(--text); font-weight: 600; }

/* Las que no se pueden vigilar todavía van detrás Y se ven distintas, para que
   la diferencia se note sin leer. */
.carta-mini.sin-precio { opacity: .62; }

/* --- La foto de la carta ------------------------------------------------
   Se reserva el hueco SIEMPRE, con foto o sin ella: si el elemento apareciera
   solo cuando hay imagen, las fichas sin foto tendrían otra anchura y la lista
   se vería como un peine. El 0,6% del catálogo sin foto no puede desmaquetar
   al 99,4% que sí la tiene.

   `aspect-ratio` es el de una carta de verdad (63×88 mm). Con la proporción
   declarada, el navegador reserva el sitio antes de que la imagen llegue y la
   lista no pega el salto de recolocarse entera cuando cargan. */
.foto {
  aspect-ratio: 245 / 342;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: block;
  object-fit: cover;
  width: 3rem;
}
.foto.vacia { opacity: .5; }

/* En la ficha de una carta vigilada: foto, nombre, y el botón al fondo. */
.vigilada .cabecera { align-items: center; }
.vigilada .cabecera .quien { flex: 1; min-width: 0; }
.vigilada .cabecera .foto { flex-shrink: 0; }

/* En la sugerencia hay una columna más: foto · nombre · cifras · botón. */
.sugerencia { grid-template-columns: 3rem 1fr auto auto; }

@media (max-width: 640px) {
  /* En el móvil la sugerencia se apila, y la foto se pone al lado del nombre
     en vez de encima: una carta encima de su propio nombre ocupa media
     pantalla para decir lo mismo. */
  .sugerencia {
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      "foto quien"
      "cifras cifras"
      "boton boton";
  }
  .sugerencia .foto { grid-area: foto; }
  .sugerencia .quien { grid-area: quien; min-width: 0; }
  .sugerencia .cifras { grid-area: cifras; text-align: left; }
  .sugerencia .vigilar-sug { grid-area: boton; }
}

/* =========================================================================
   LA PORTADA
   =========================================================================

   Extiende el lenguaje que ya existe, no inventa otro: ÁMBAR = OPORTUNIDAD,
   CIAN = EVIDENCIA. Por eso el único ámbar de toda la página está en la
   llamada a la acción y en el ahorro del aviso de ejemplo —las dos cosas que
   son «dinero»— y las cifras que sostienen el argumento van en cian.

   El aviso de ejemplo va arriba del todo y a tamaño real. Es lo único de esta
   página que se entiende sin leer, y es exactamente el producto: no una
   promesa de chollos, sino un desglose con el coste puesto en casa.
   ========================================================================= */

.portada {
  margin: 0 auto;
  max-width: 62rem;
  padding: 1.25rem 1.25rem 4rem;
}

.portada-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 3.5rem;
}
.portada-top .marca { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.portada-top .marca span { color: var(--amber); }
.portada-top .salta {
  border: 1px solid var(--border-strong); border-radius: 5px;
  color: var(--text); font-size: .85rem; padding: .4rem .8rem; text-decoration: none;
}
.portada-top .salta:hover { background: var(--surface-2); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  align-items: start;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.15fr .85fr;
  margin-bottom: 5rem;
}
.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: 1.1rem;
}
/* La frase que lleva el peso del argumento. En ámbar porque es el dinero. */
.hero h1 em { color: var(--amber-bright); font-style: normal; }
.hero .lema {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.6rem;
  max-width: 34rem;
}
.hero .lema b { color: var(--text); font-weight: 600; }

.cta {
  background: var(--amber);
  border-radius: 7px;
  color: oklch(0.16 0.02 60);
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  padding: .8rem 1.5rem;
  text-decoration: none;
}
.cta:hover { background: var(--amber-bright); color: oklch(0.16 0.02 60); }

.letra-chica { color: var(--faint); font-size: .8rem; margin-top: .7rem; }
.letra-chica a { color: var(--cyan); }

/* --- El aviso de ejemplo ------------------------------------------------ */
.muestra {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.muestra-top {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--faint);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .09em;
  padding: .5rem .9rem;
  text-transform: uppercase;
}
.aviso-demo { display: flex; flex-direction: column; gap: .55rem; padding: 1rem .9rem; }
.ad-carta { font-size: .92rem; }
.ad-ahorro { color: var(--muted); font-size: .84rem; }
.ad-ahorro b { color: var(--amber-bright); }
/* La barra de bloques es la misma que va en Telegram. */
.ad-barra { color: var(--amber); font-family: var(--mono); font-size: .95rem; letter-spacing: .1em; }
.ad-desglose {
  background: var(--bg);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
  overflow-x: auto;
  padding: .7rem .8rem;
}
.ad-pie { color: var(--cyan-bright); font-size: .76rem; }

/* --- Secciones ---------------------------------------------------------- */
.portada section > h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -.02em;
  margin-bottom: 1.2rem;
}
/* El «no» de «Lo que no hacemos» NO va en ámbar, y es la regla de toda la
   hoja: el ámbar significa oportunidad, dinero, «actúa ya». Usarlo para negar
   lo vacía de significado, y entonces el ámbar de un chollo de verdad deja de
   distinguirse del ámbar de cualquier otra cosa. Se enfatiza con cursiva, que
   es lo que hace la tipografía cuando no hay color que gastar. */
.portada section > h2 em { color: var(--text); font-style: italic; }

.pasos, .pruebas, .honesto { margin-bottom: 4.5rem; }

/* Los pasos van NUMERADOS porque son una secuencia de verdad: no se puede
   poner el límite antes de elegir la carta. Numerar lo que no es una
   secuencia es decoración disfrazada de información. */
.pasos ol { display: flex; flex-direction: column; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.pasos li {
  border-left: 2px solid var(--border-strong);
  color: var(--muted);
  line-height: 1.6;
  padding: .1rem 0 .1rem 2.6rem;
  position: relative;
}
.pasos li b { color: var(--text); display: block; font-weight: 600; }
.pasos .n {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .85rem;
  left: 1rem;
  position: absolute;
  top: .1rem;
}

.pruebas-lema { color: var(--muted); line-height: 1.65; margin-bottom: 1.6rem; max-width: 46rem; }
.pruebas-lema b { color: var(--text); font-weight: 600; }

.cifras-grid { display: grid; gap: .75rem; grid-template-columns: repeat(4, 1fr); }
.cifras-grid > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 1rem;
}
.cifras-grid b {
  color: var(--cyan-bright);
  display: block;
  font-family: var(--mono);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.cifras-grid span { color: var(--faint); font-size: .78rem; }

.honesto ul { display: flex; flex-direction: column; gap: .9rem; list-style: none; margin: 0; padding: 0; }
.honesto li { color: var(--muted); line-height: 1.65; max-width: 48rem; }
.honesto li b { color: var(--text); font-weight: 600; }

/* --- Entrar ------------------------------------------------------------- */
.acceso {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0 auto;
  max-width: 26rem;
  padding: 1.75rem;
  scroll-margin-top: 2rem;
}
.acceso h2 { margin-bottom: 1.1rem; }
.acceso form { display: flex; flex-direction: column; gap: .8rem; }
.acceso-botones { display: flex; gap: .5rem; }
.acceso-botones .boton { flex: 1; }
.boton.principal { background: var(--amber); border-color: var(--amber); color: oklch(0.16 0.02 60); }
.boton.principal:hover { background: var(--amber-bright); border-color: var(--amber-bright); }
.acceso .aviso { margin-top: .9rem; }

@media (max-width: 780px) {
  .hero { gap: 2rem; grid-template-columns: 1fr; margin-bottom: 3.5rem; }
  .portada-top { margin-bottom: 2.5rem; }
  .cifras-grid { grid-template-columns: repeat(2, 1fr); }
  .pasos, .pruebas, .honesto { margin-bottom: 3rem; }
  /* Un pulgar necesita 44px, aquí también. */
  .cta, .portada-top .salta { display: inline-flex; align-items: center; min-height: 44px; }
  .acceso { padding: 1.25rem; }
}