/* bibliomarket.es — portada.
   Hereda la idea de El Tejuelo: el catálogo es un CAJÓN DE FICHAS, el color es
   la tela de encuadernación verde con el rojo del tejuelo, y lo que en una ficha
   de biblioteca iba a máquina va en Courier Prime.
   Lo que añade esta portada: el recuento del sondeo se escribe como el ÍNDICE de
   un libro —renglones con puntos conductores— y no como tarjetas de estadística,
   porque es una lista de cosas contadas, que es justo lo que un índice es. */

:root {
  --tela:      #23402F;
  --tela-alta: #2F5340;
  --papel:     #EFEDE4;
  --cartulina: #FBFAF5;
  --tinta:     #1A1917;
  --lapiz:     #6B6A62;
  --tejuelo:   #9E2B20;
  --raya:      #D9D5C7;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono:  "Courier Prime", "Courier New", ui-monospace, monospace;
  --ancho: 1000px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tejuelo); outline-offset: 3px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lapiz); margin: 0 0 18px;
}

/* --- cabecera ------------------------------------------------------------ */
.barra { background: var(--tela); color: #F2EFE4; }
.barra__fila {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 22px; flex-wrap: wrap; padding-block: 16px;
}
.barra__marca { font-size: 21px; font-weight: 600; text-decoration: none; letter-spacing: -.01em; }
.barra__marca span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #A9BFB0; margin-left: 10px; }
.barra__tel { font-family: var(--mono); font-size: 14px; text-decoration: none;
  border-bottom: 1px solid rgba(242,239,228,.45); padding-bottom: 2px; }

/* --- entrada ------------------------------------------------------------- */
.entrada { padding-block: 56px 44px; }
.entrada h1 {
  font-size: clamp(30px, 6.4vw, 52px);
  line-height: 1.12; font-weight: 600; letter-spacing: -.022em;
  margin: 0 0 22px; max-width: 19ch;
}
.entrada h1 em { font-style: normal; color: var(--tejuelo); }
.entrada__pie { font-size: clamp(17px, 2.2vw, 19px); max-width: 54ch; margin: 0; color: #3A382F; }

/* --- la ficha del buscador: la pieza de firma ---------------------------- */
.ficha {
  position: relative;
  background: var(--cartulina);
  border: 1px solid var(--raya);
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--raya), 0 14px 28px -22px rgba(26,25,23,.5);
  margin-top: 38px;
  padding: 26px 24px 24px;
}
.ficha::before {           /* el tejuelo: la etiqueta del lomo */
  content: attr(data-tejuelo);
  position: absolute; top: -1px; left: 26px;
  background: var(--tejuelo); color: #FBF6EE;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 11px 6px; border-radius: 0 0 2px 2px;
}
.ficha__titulo { font-size: 20px; font-weight: 600; margin: 16px 0 6px; letter-spacing: -.01em; }
.ficha__nota { font-family: var(--mono); font-size: 13px; color: var(--lapiz); margin: 0 0 18px; }

.buscador { display: flex; gap: 10px; flex-wrap: wrap; }
.buscador input {
  flex: 1 1 230px; min-width: 0;
  font-family: var(--serif); font-size: 17px; color: var(--tinta);
  background: #fff; border: 1px solid var(--raya); border-radius: 2px;
  padding: 13px 14px;
}
.buscador input::placeholder { color: #9B9A90; }
.buscador button {
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em;
  background: var(--tela); color: #F2EFE4; border: 0; border-radius: 2px;
  padding: 13px 20px; cursor: pointer;
}
.buscador button:hover { background: var(--tela-alta); }

.resultados { list-style: none; margin: 18px 0 0; padding: 0; }
.resultados li { border-top: 1px solid var(--raya); }
.resultados a {
  display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  padding: 12px 2px; text-decoration: none;
}
.resultados a:hover { background: #F4F1E7; }
.resultados__nombre { font-weight: 600; }
.resultados__donde { font-family: var(--mono); font-size: 13px; color: var(--lapiz); }
.resultados__ir { font-family: var(--mono); font-size: 13px; color: var(--tejuelo); }
.aviso-busqueda { font-family: var(--mono); font-size: 13px; color: var(--lapiz); margin: 16px 0 0; }
.aviso-busqueda a { color: var(--tejuelo); }

/* --- secciones ----------------------------------------------------------- */
.seccion { padding-block: 48px; border-top: 1px solid var(--raya); }
.seccion > .contenedor > h2 {
  font-size: clamp(23px, 3.6vw, 31px); font-weight: 600; letter-spacing: -.018em;
  margin: 0 0 10px; max-width: 24ch;
}
.seccion__intro { max-width: 56ch; margin: 0 0 28px; color: #3A382F; }

/* --- el recuento: un índice, con puntos conductores ---------------------- */
.recuento { margin: 0; font-family: var(--mono); font-size: 15px; }
.recuento div {
  display: flex; align-items: baseline; gap: 6px;
  padding: 9px 0; border-bottom: 1px solid var(--raya);
}
.recuento dt { flex: 0 1 auto; min-width: 0; }
.recuento .puntos { flex: 1 1 14px; border-bottom: 1px dotted #B9B5A6; transform: translateY(-4px); min-width: 14px; }
.recuento dd { margin: 0; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.recuento div[data-malo] dt { color: var(--tejuelo); }
.recuento div[data-malo] dd { color: var(--tejuelo); font-weight: 700; }
.recuento div[data-total] { border-bottom: 2px solid var(--tinta); padding-top: 14px; }
.recuento div[data-total] dt, .recuento div[data-total] dd { font-weight: 700; }
.recuento__nota { font-family: var(--mono); font-size: 12.5px; color: var(--lapiz); margin: 16px 0 0; max-width: 60ch; }

/* --- lo que montamos ----------------------------------------------------- */
.piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Son cuatro piezas: a 2x2 quedan cuadradas y no dejan un hueco impar al final,
   que es lo que pasaba con tres arriba y una sola abajo. */
@media (min-width: 680px) { .piezas { grid-template-columns: 1fr 1fr; } }
.piezas li { background: var(--cartulina); border: 1px solid var(--raya); padding: 20px 19px; }
.piezas h3 { font-size: 17px; margin: 0 0 7px; font-weight: 600; }
.piezas p { margin: 0; font-size: 15.5px; color: #43413A; }
.piezas .sig { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tejuelo); display: block; margin-bottom: 10px; }

/* --- la muestra ---------------------------------------------------------- */
.muestra-caja { background: var(--tela); color: #EFEDE4; padding: 34px 28px; border-radius: 2px; }
.muestra-caja h2 { color: #fff; margin-top: 0; }
.muestra-caja p { max-width: 54ch; color: #D7E0D6; }
.boton {
  display: inline-block; font-family: var(--mono); font-size: 15px; letter-spacing: .03em;
  background: var(--tejuelo); color: #FBF6EE; text-decoration: none;
  padding: 14px 22px; border-radius: 2px; margin-top: 8px;
}
.boton:hover { background: #B23327; }
.boton--claro { background: #F2EFE4; color: var(--tela); }
.boton--claro:hover { background: #fff; }

/* --- precios ------------------------------------------------------------- */
.planes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.plan { background: var(--cartulina); border: 1px solid var(--raya); padding: 26px 24px; border-radius: 2px; position: relative; }
.plan[data-destacado] { border-color: var(--tela); box-shadow: inset 0 0 0 1px var(--tela); }
.plan h3 { font-size: 21px; margin: 0 0 3px; font-weight: 600; }
.plan__pitch { font-size: 15px; color: var(--lapiz); margin: 0 0 16px; }
.plan__precio { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.plan__periodo { font-family: var(--mono); font-size: 13px; color: var(--lapiz); margin-left: 6px; }
.plan ul { list-style: none; margin: 20px 0 0; padding: 0; }
.plan li { padding: 9px 0 9px 20px; border-top: 1px solid var(--raya); font-size: 15.5px; position: relative; }
.plan li::before { content: "·"; position: absolute; left: 5px; color: var(--tejuelo); font-weight: 700; }
.condiciones { font-family: var(--mono); font-size: 13.5px; color: var(--lapiz); margin: 24px 0 0; }
.condiciones strong { color: var(--tinta); }

/* --- lo que no prometemos ------------------------------------------------ */
.nunca { background: var(--cartulina); border: 1px solid var(--raya); border-left: 3px solid var(--tejuelo);
  padding: 22px 22px; margin-top: 28px; }
.nunca h3 { margin: 0 0 10px; font-size: 17px; }
.nunca ul { margin: 0; padding-left: 20px; font-size: 15.5px; color: #43413A; }
.nunca li { margin: 5px 0; }

/* --- pie ----------------------------------------------------------------- */
.pie { background: var(--tinta); color: #C9C5B8; padding-block: 38px 30px; margin-top: 6px; }
.pie__fila { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pie__titulo { font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #8C887C; margin: 0 0 8px; }
.pie p { margin: 0 0 6px; font-size: 15px; }
.pie a { color: #EFEDE4; }
.pie__legal { font-family: var(--mono); font-size: 12px; color: #7E7A70; margin-top: 28px;
  border-top: 1px solid #35332E; padding-top: 16px; }

@media (max-width: 560px) {
  .entrada { padding-block: 40px 32px; }
  .ficha { padding: 24px 18px 20px; }
  .recuento { font-size: 13.5px; }
}

/* --- tasación de bibliotecas --------------------------------------------- */
/* La caja de pegar es el héroe de esa página: lo que se vende es que pegues tu
   inventario y en un segundo sepas cuáles de tus tres mil libros importan. */
.pegar {
  width: 100%; min-height: 190px; resize: vertical;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.55;
  color: var(--tinta); background: #fff;
  border: 1px solid var(--raya); border-radius: 2px; padding: 14px;
}
.pegar::placeholder { color: #9B9A90; }
.tasa__cifra { margin: 16px 0 0; font-size: 17px; }
.tasa__cifra b { font-weight: 600; }
.tasa__cifra--fuerte { font-size: 21px; color: var(--tejuelo); margin-top: 6px; }
.tasa__cifra--fuerte b { font-weight: 700; }
.tasa__titulo { font-size: 21px; font-weight: 600; margin: 34px 0 12px; letter-spacing: -.01em; }

/* Una tabla de precios no cabe en 320 px por mucho que se apriete: se le da su
   propio scroll y la página no se mueve. */
.tabla-envuelta { overflow-x: auto; border: 1px solid var(--raya); background: var(--cartulina); }
table.tasa { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14.5px; }
table.tasa th, table.tasa td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--raya); }
table.tasa th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lapiz); background: #F2EFE5; position: sticky; top: 0;
}
table.tasa td.num, table.tasa th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tasa td.mono { font-family: var(--mono); font-size: 12.5px; color: var(--lapiz); }
table.tasa tbody tr:last-child td { border-bottom: 0; }
.etq {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  background: #E6E2D5; color: #5B594F; padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.etq--alta { background: var(--tejuelo); color: #FBF6EE; }

/* --- resultados por título (listados sin ISBN) ---------------------------- */
.porti { border-top: 1px solid var(--raya); padding: 14px 0 10px; }
.porti__q { font-family: var(--mono); font-size: 13px; color: var(--lapiz); margin: 0 0 8px; }
.porti__nada { margin: 0; font-size: 14.5px; color: #5B594F; }
.porti__lista { list-style: none; margin: 0; padding: 0; }
.porti__lista li {
  display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline;
  padding: 5px 0;
}
.porti__t { flex: 1 1 240px; min-width: 0; font-size: 15.5px; }
.porti__p { font-family: var(--mono); font-size: 15px; color: var(--tejuelo); font-weight: 700; }
.porti__o { font-family: var(--mono); font-size: 12.5px; color: var(--lapiz); }
.porti__i { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--lapiz); margin-top: 1px; }