/* Herramientas — hub de marca personal (grid de herramientas propias) */
.tools-page {
  --tools-lime: var(--personal-lime, #d9ef67);
  --tools-ink: var(--personal-ink, #111111);
  --tools-muted: #56564f;
  --tools-border: #dadbd0;
  --tools-surface: #f3ffb2;
  background: #fff;
  overflow-x: hidden;
}

/* ---------------- Cabecera del hub ---------------- */
.tools-hub {
  padding: clamp(48px, 6vw, 96px) 0 clamp(60px, 8vw, 112px);
}

.tools-hub-head {
  width: min(100%, 1120px);
  margin: 0 auto clamp(38px, 5vw, 60px);
  padding: clamp(24px, 3vw, 42px) 0 clamp(34px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tools-hub-head h1 {
  max-width: 18ch;
  margin: 0 auto;
  color: var(--tools-ink);
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--hero-title-size);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
}

.tools-hub-intro {
  max-width: 58ch;
  margin: 22px auto 0;
  color: var(--tools-muted);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.6;
}

/* ---------------- Franja de tarjetas a sangre (PDF) ---------------- */
.tools-grid {
  list-style: none;
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--tools-border);
  border-block: 1px solid var(--tools-border);
  /* Ocupa todo el ancho de la ventana, saliéndose del contenedor centrado. */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media (min-width: 620px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .tools-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------- Tarjeta ---------------- */
.tool-card { display: flex; min-width: 0; }

.tool-card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  min-height: clamp(380px, 34vw, 470px);
  padding: clamp(30px, 3vw, 46px) clamp(22px, 2.2vw, 34px) clamp(26px, 2.4vw, 38px);
  background: #fff;
  color: var(--tools-ink);
  text-decoration: none;
  transition: filter .24s ease;
}

a.tool-card-link:hover { filter: saturate(1.08) brightness(1.015); }

a.tool-card-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tools-ink) 60%, transparent);
  outline-offset: -4px;
}

/* Fondos degradados por herramienta (PDF pág. Herramientas). */
.tool-card--plusart .tool-card-link { background: linear-gradient(168deg, #f4effc 26%, #dccff5 100%); }
.tool-card--qr .tool-card-link { background: linear-gradient(168deg, #ffffff 45%, #f1f1f4 100%); }
.tool-card--plusnote .tool-card-link { background: linear-gradient(168deg, #fdf5ef 24%, #f6d2bb 100%); }
.tool-card--plusvid .tool-card-link { background: linear-gradient(168deg, #f1e8fb 20%, #c9a6ec 100%); }

/* Zona del logo: grande y centrado, en la parte superior. */
.tool-media {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(150px, 15vw, 205px);
  margin-bottom: clamp(12px, 1.6vw, 20px);
}

.tool-logo {
  width: clamp(100px, 9.5vw, 138px);
  height: auto;
  flex-shrink: 0;
}

.tool-logo--qr {
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(17, 17, 17, .14);
}

.tool-logo--plusart {
  transform: scale(1.12);
  filter: drop-shadow(6px -2px 18px rgba(128, 100, 232, .28));
}

/* Placeholder mientras Jayro añade el logo real de Plusnote. */
.tool-logo-placeholder {
  display: grid;
  place-items: center;
  width: clamp(100px, 9.5vw, 130px);
  height: clamp(100px, 9.5vw, 130px);
  border-radius: 26px;
  background: rgba(17, 17, 17, .05);
  border: 1.5px dashed rgba(17, 17, 17, .28);
  font-family: var(--font-heading);
  font-size: 3.6rem;
  font-weight: 800;
  color: rgba(17, 17, 17, .4);
  line-height: 1;
}

/* Nombre (serif) y descripción, centrados. */
.tool-name {
  margin: 0;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.55rem, 2.1vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--tools-ink);
}

.tool-desc {
  margin: 12px 0 0;
  max-width: 32ch;
  color: #4a4750;
  font-size: var(--body-size, 1rem);
  line-height: 1.55;
}

/* Botón "Abrir" negro anclado abajo; invierte a blanco al pasar el ratón. */
.tool-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 34px;
  border-radius: 12px;
  background: var(--tools-ink, #111);
  color: #fff;
  border: 1.5px solid var(--tools-ink, #111);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  transition: background .16s ease, color .16s ease;
}

a.tool-card-link:hover .tool-cta {
  background: #fff;
  color: var(--tools-ink, #111);
}

@media (max-width: 1039px) {
  .tool-card-link { min-height: clamp(340px, 46vw, 430px); }
}

@media (max-width: 619px) {
  .tool-card-link { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  a.tool-card-link { transition: none; }
}

/* Tarjetas dinámicas (gestionadas desde el panel): el gradiente se deriva del
   color de acento del logo (--tool-accent), sin definir una clase por tarjeta. */
.tool-card--dynamic .tool-card-link {
  background: linear-gradient(168deg,
    color-mix(in srgb, var(--tool-accent, #d9ef67) 10%, #ffffff) 26%,
    color-mix(in srgb, var(--tool-accent, #d9ef67) 52%, #ffffff) 100%);
}