/* El Tejuelo — muestra de web para librería de viejo.
   La idea: el catálogo es un CAJÓN DE FICHAS. Cada libro es una ficha de
   cartulina con su tejuelo, que es la etiqueta que el librero pega en el lomo.
   De ahí salen el color (tela de encuadernación verde + tejuelo rojo, el par
   de las encuadernaciones antiguas) y las dos tipografías (Literata, hecha
   para leer libros, y Courier Prime para lo que en una ficha va a máquina). */

: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: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

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

/* --- aviso de que esto es una muestra ------------------------------------ */
.aviso {
  background: var(--tinta);
  color: #C9C5B8;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  padding-block: 7px;
}

/* --- cabecera ------------------------------------------------------------ */
.cabecera { background: var(--tela); color: #F2EFE4; }
.cabecera__fila {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
  padding-block: 18px;
}
.marca { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; text-decoration: none; min-width: 0; }
.marca__nombre { font-size: clamp(23px, 6.2vw, 30px); font-weight: 600; letter-spacing: -.01em; }
.marca__rotulo {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; color: #A9BFB0;
}
.cabecera__acciones { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; min-width: 0; }
.tel {
  font-family: var(--mono); font-size: 15px; text-decoration: none;
  border-bottom: 1px solid rgba(242,239,228,.45); padding-bottom: 2px;
}
.tel:hover { border-bottom-color: #F2EFE4; }
.cesta-enlace {
  font-family: var(--mono); font-size: 13px; text-decoration: none;
  background: #F2EFE4; color: var(--tela); padding: 8px 13px; border-radius: 2px;
}
.cesta-enlace[data-vacia="si"] { background: transparent; color: #F2EFE4; box-shadow: inset 0 0 0 1px rgba(242,239,228,.5); }

/* --- portada del sitio --------------------------------------------------- */
.entrada { padding-block: 54px 40px; border-bottom: 1px solid var(--raya); }
.entrada__titular {
  font-size: clamp(30px, 6vw, 46px); line-height: 1.12; margin: 0 0 18px;
  font-weight: 600; letter-spacing: -.02em; max-width: 20ch;
}
.entrada__texto { max-width: 56ch; margin: 0 0 22px; color: #34332E; }
.datos-tienda { font-family: var(--mono); font-size: 13.5px; color: var(--lapiz); line-height: 1.85; }
.datos-tienda strong { color: var(--tinta); font-weight: 400; }

/* --- secciones ----------------------------------------------------------- */
.seccion { padding-block: 40px 8px; }
.seccion__cabeza { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.seccion__nombre { font-size: 24px; margin: 0; font-weight: 600; }
.seccion__cuenta { font-family: var(--mono); font-size: 12px; color: var(--lapiz); }
.seccion__nota { color: var(--lapiz); font-size: 15px; margin: 0 0 22px; max-width: 52ch; }

.cajon { display: grid; gap: 16px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }

/* --- la ficha ------------------------------------------------------------ */
.ficha {
  background: var(--cartulina);
  border: 1px solid var(--raya);
  border-radius: 2px;
  padding: 14px;
  display: flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}
.ficha:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,25,23,.11); }
/* La zona de arriba crece y empuja el pie al fondo: así el precio y el botón
   quedan a la misma altura en toda la fila, aunque un título ocupe dos líneas. */
.ficha__zona {
  text-decoration: none; color: inherit;
  display: grid; grid-template-columns: 104px 1fr; gap: 16px;
  flex: 1;
}

.cubierta { position: relative; align-self: start; }
.cubierta img { width: 100%; border-radius: 1px; box-shadow: 0 2px 7px rgba(26,25,23,.22); }
.cubierta__falta {
  aspect-ratio: 2/3; background: #E4E0D2; border-radius: 1px;
  display: grid; place-items: center; text-align: center; padding: 8px;
  font-family: var(--mono); font-size: 10px; color: var(--lapiz);
}
/* El tejuelo: la etiqueta que el librero pega en el lomo. Es la firma visual
   de la casa y el único sitio donde entra el rojo. */
.tejuelo {
  position: absolute; left: 6px; bottom: 8px;
  background: var(--cartulina); color: var(--tejuelo);
  border: 1px solid var(--tejuelo);
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  padding: 2px 5px; border-radius: 1px;
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 3px rgba(26,25,23,.2);
}

.ficha__cuerpo { min-width: 0; }
.ficha__titulo { font-size: 19px; margin: 0 0 3px; font-weight: 600; line-height: 1.25; }
.ficha__autor { margin: 0 0 10px; color: #3C3B35; font-size: 16px; }
.ficha__datos {
  font-family: var(--mono); font-size: 12.5px; color: var(--lapiz);
  margin: 0 0 10px; line-height: 1.7;
}
.ficha__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--raya);
}
.precio { font-family: var(--mono); font-size: 19px; color: var(--tejuelo); }

.boton {
  font-family: var(--mono); font-size: 13px;
  background: var(--tela); color: #F2EFE4; border: 0; border-radius: 2px;
  padding: 10px 14px; cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .16s ease;
}
.boton:hover { background: var(--tela-alta); }
.boton--puesto { background: var(--lapiz); }
.boton--claro { background: transparent; color: var(--tela); box-shadow: inset 0 0 0 1px var(--tela); }
.boton--claro:hover { background: rgba(35,64,47,.07); }

/* --- página de un libro -------------------------------------------------- */
.libro { padding-block: 34px 10px; display: grid; gap: 30px; grid-template-columns: 1fr; }
.libro__cubierta { max-width: 250px; }
.libro__titulo { font-size: clamp(26px, 5vw, 36px); margin: 0 0 6px; font-weight: 600; letter-spacing: -.015em; }
.libro__autor { font-size: 20px; margin: 0 0 22px; color: #3C3B35; }
.tabla-ficha { width: 100%; max-width: 520px; border-collapse: collapse; font-family: var(--mono); font-size: 13.5px; margin-bottom: 20px; }
.tabla-ficha th, .tabla-ficha td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--raya); vertical-align: top; }
.tabla-ficha th { font-weight: 400; color: var(--lapiz); width: 38%; }
.nota-ejemplar {
  max-width: 54ch;
  background: var(--cartulina); border-left: 3px solid var(--tejuelo);
  padding: 12px 14px; margin: 0 0 22px; font-size: 15.5px;
}
.nota-ejemplar__rotulo { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--lapiz); display: block; margin-bottom: 4px; }
.comprar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.comprar .precio { font-size: 27px; }
.como-llevarselo { border-top: 1px solid var(--raya); padding-top: 18px; font-size: 15.5px; color: #34332E; max-width: 54ch; }

/* --- cesta --------------------------------------------------------------- */
.cesta { padding-block: 34px 20px; }
.cesta__titulo { font-size: clamp(26px, 5vw, 34px); margin: 0 0 6px; font-weight: 600; }
.cesta__intro { color: var(--lapiz); margin: 0 0 26px; max-width: 56ch; }
.cesta__lista { list-style: none; padding: 0; margin: 0 0 22px; }
.renglon {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--raya);
}
/* Cuando el ejemplar no tiene cubierta, el hueco de la cesta lleva la signatura: la
   misma solución que la ficha del catálogo, para que la fila no se descoloque. */
.renglon__sincubierta {
  display: grid; place-items: center; aspect-ratio: 2/3; background: #E4E0D2;
  border-radius: 1px; font-family: var(--mono); font-size: 9px; color: var(--lapiz);
  text-align: center; padding: 2px;
}
.renglon__titulo { overflow-wrap: anywhere; font-size: 17px; margin: 0; font-weight: 600; }
.renglon__autor { font-family: var(--mono); font-size: 12.5px; color: var(--lapiz); margin: 2px 0 0; }
.quitar { background: none; border: 0; font-family: var(--mono); font-size: 12px; color: var(--lapiz); cursor: pointer; text-decoration: underline; padding: 4px; }
.quitar:hover { color: var(--tejuelo); }
.total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 20px; padding: 6px 0 26px; }
.total__cifra { color: var(--tejuelo); font-size: 25px; }
.cierre { background: var(--cartulina); border: 1px solid var(--raya); border-radius: 2px; padding: 22px; }
.cierre__titulo { font-size: 20px; margin: 0 0 6px; font-weight: 600; }
.cierre__texto { color: var(--lapiz); margin: 0 0 18px; font-size: 15.5px; max-width: 52ch; }
.cierre__vias { display: flex; gap: 12px; flex-wrap: wrap; }
.vacia { font-size: 17px; color: var(--lapiz); }

/* --- pie ----------------------------------------------------------------- */
.pie { background: var(--tela); color: #C9D6CB; margin-top: 54px; padding-block: 34px; font-size: 15px; }
.pie__fila { display: grid; gap: 22px; grid-template-columns: 1fr; }
.pie__titulo { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: #8FA895; margin: 0 0 8px; }
.pie a { color: #F2EFE4; }
.pie__legal { border-top: 1px solid rgba(242,239,228,.16); margin-top: 26px; padding-top: 16px; font-family: var(--mono); font-size: 11.5px; color: #8FA895; }

:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--tejuelo); outline-offset: 3px; }

@media (min-width: 700px) {
  .cajon { grid-template-columns: 1fr 1fr; gap: 18px; }
  .libro { grid-template-columns: 250px 1fr; gap: 44px; }
  .pie__fila { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 1000px) {
  .cajon { grid-template-columns: 1fr 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- buscar dentro del catálogo ------------------------------------------- */
.buscador-tienda { padding-block: 26px 6px; }
.buscar {
  width: 100%; font-family: var(--serif); font-size: 17px; color: var(--tinta);
  background: #fff; border: 1px solid var(--raya); border-radius: 2px; padding: 14px 16px;
}
.buscar::placeholder { color: #9B9A90; }
.buscar:focus { outline: 2px solid var(--tejuelo); outline-offset: 2px; }
.buscar__cuenta { font-family: var(--mono); font-size: 13px; color: var(--lapiz); margin: 10px 2px 0; }

/* --- la foto de la tienda ------------------------------------------------- */
/* Va ENCIMA del titular y a lo ancho: una fachada con el rótulo dice de una librería
   más que tres párrafos, y es lo primero que quiere ver quien no ha estado nunca. */
.fachada { margin: 0 0 26px; }
.fachada img {
  width: 100%; max-height: 340px; object-fit: cover;
  border: 1px solid var(--raya); border-radius: 2px;
}
@media (max-width: 560px) { .fachada img { max-height: 210px; } }

/* --- cómo llegar ---------------------------------------------------------- */
/* Un ENLACE y no un mapa incrustado: un iframe de mapa trae scripts de un tercero,
   cookies y espera. La web promete no hacer nada de eso. */
.comollegar {
  font-family: var(--mono); font-size: 13px; text-decoration: none;
  border-bottom: 1px solid rgba(201,197,184,.5); padding-bottom: 2px;
}
.comollegar:hover { border-bottom-color: #C9C5B8; }