/* ============================================================
   NEYMUK® — ESTILOS DE LAS PÁGINAS NUEVAS
   ------------------------------------------------------------
   Archivo NUEVO e independiente. Existe para no tener que tocar
   styles.css, que se queda exactamente como está publicado.
   Solo lo cargan /peak-brain/, /ingredientes/, /nootropicos/ y
   /sobre-neymuk/. La home no lo carga y no le afecta en nada.
   ============================================================ */


/* ============================================================
   PÁGINAS INTERIORES  ·  /peak-brain/ /nootropicos/
                          /ingredientes/ /sobre-neymuk/
   ------------------------------------------------------------
   Bloque AÑADIDO (nada de lo de arriba se ha tocado). La home
   es la pieza comercial: hero a pantalla completa, scrollytelling,
   carrusel. Estas páginas son otra cosa — documentación de marca
   y de producto — así que necesitan lo contrario: una columna de
   lectura estrecha, mucho aire y cero espectáculo. Reutilizan
   todo lo que ya existía (.nav, .footer, .card, .btn, .faq__*,
   .section-header, .section-title, .reveal) y solo añaden lo
   que la home no tenía.
   ============================================================ */

/* ---------- Cabecera de página interior ----------
   No es el hero de la home (100svh, halo, bote). Es una entradilla
   sobria: migas, antetítulo, H1 y una frase de resumen. El padding
   superior deja sitio a la nav fija. */
.subhero {
  padding: clamp(7rem, 14vw, 10.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  position: relative;
  border-bottom: 1px solid var(--divider);
}
/* Halo azul muy tenue arriba: el guiño al hero sin robarle protagonismo. */
.subhero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 420px;
  background: radial-gradient(ellipse 70% 100% at 50% 0%,
              rgba(59,117,154,0.11), transparent 70%);
  pointer-events: none; z-index: 0;
}
.subhero > * { position: relative; z-index: 1; }
.subhero__inner { max-width: 820px; }
.subhero__title {
  font-size: clamp(2rem, 5.4vw, 3.5rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.03em;
  margin-bottom: 1.4rem;
}
.subhero__title small {
  display: block; font-size: 0.42em; font-weight: 600;
  letter-spacing: 0.02em; color: var(--text-2); margin-top: 0.7rem;
}
.subhero__lead {
  font-size: clamp(1.02rem, 1.8vw, 1.25rem);
  line-height: 1.6; color: var(--text-2); max-width: 62ch;
}
.subhero__lead strong { color: var(--text-strong); font-weight: 600; }
.subhero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }

/* ---------- Migas de pan ----------
   Sirven al lector y sirven al buscador (van dobladas en BreadcrumbList
   dentro del JSON-LD de cada página). */
.breadcrumb { font-size: 0.78rem; color: var(--muted); margin-bottom: 1.6rem; letter-spacing: 0.02em; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before { content: "/"; color: var(--divider-2); }
.breadcrumb a { color: var(--text-2); transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--muted); }

/* ---------- Índice de la página ----------
   Un sumario con anclas. Para el lector, orientación; para un motor
   generativo, el mapa de lo que contesta la página. */
.toc {
  border: 1px solid var(--divider); border-radius: 6px;
  background: var(--bg-elevated);
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  max-width: 820px;
}
.toc__title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--text-2); margin-bottom: 1rem;
}
.toc ol { list-style: none; padding: 0; display: grid; gap: 0.15rem; counter-reset: toc; }
@media (min-width: 720px) { .toc ol { grid-template-columns: 1fr 1fr; gap: 0.15rem 2rem; } }
.toc li { counter-increment: toc; }
.toc a {
  display: block; padding: 0.42rem 0;
  font-size: 0.92rem; color: var(--text-2);
  transition: color 0.2s var(--ease);
}
.toc a:hover { color: var(--accent); }
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--accent); font-size: 0.72rem; font-weight: 700;
  margin-right: 0.7rem; letter-spacing: 0.06em;
}

/* ---------- Cuerpo de lectura ----------
   68ch es el ancho al que un párrafo se lee sin que el ojo se pierda
   al volver al principio de la línea. Mismo tamaño y color que el
   cuerpo de la home (.section-lead, .nootropico__p) para que no haya
   dos "tamaños de párrafo" distintos entre páginas. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose p, .prose li {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.72; color: var(--text-2);
}
.prose h3 {
  font-size: clamp(1.12rem, 2.1vw, 1.35rem);
  font-weight: 700; letter-spacing: -0.02em; color: var(--text);
  margin-top: 2.6rem; line-height: 1.3;
}
.prose h4 {
  font-size: 1rem; font-weight: 700; color: var(--text);
  margin-top: 2rem; letter-spacing: -0.01em;
}
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--accent); }
.prose a {
  color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.prose a:hover { color: var(--accent); }
.prose strong { color: var(--text-strong); font-weight: 600; }
.prose em { color: var(--text-strong); }

/* Definición destacada: la frase que un motor generativo debe poder
   citar tal cual, sin contexto alrededor. */
.definicion {
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin: 2rem 0;
  max-width: 66ch;
}
.definicion p {
  font-size: clamp(1.08rem, 2.1vw, 1.32rem);
  line-height: 1.5; color: var(--text); font-weight: 500;
  letter-spacing: -0.015em;
}

/* ---------- Ficha de datos (dosis, formato, fabricación) ----------
   Rejilla etiqueta/valor. En móvil se apila; en escritorio va a dos
   columnas con la etiqueta a la izquierda. */
.datos { border-top: 1px solid var(--divider); max-width: 820px; }
.datos__fila {
  display: grid; gap: 0.2rem 2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--divider);
}
@media (min-width: 640px) { .datos__fila { grid-template-columns: 15rem 1fr; align-items: baseline; } }
.datos__k {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--text-2); font-weight: 600;
}
.datos__v { font-size: clamp(0.98rem, 1.6vw, 1.06rem); color: var(--text); line-height: 1.55; }
.datos__v small { display: block; font-size: 0.85rem; color: var(--text-2); margin-top: 0.25rem; line-height: 1.6; }
.datos__v a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.datos__v a:hover { color: var(--accent); }

/* ---------- Rejilla de tarjetas (hub de ingredientes) ---------- */
.hub-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2rem;
}
.hub-card { display: flex; flex-direction: column; }
.hub-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
}
.hub-card__head h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.hub-card__head h3 small { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-2); margin-top: 0.25rem; letter-spacing: 0; }
.hub-card__dose {
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 700;
  color: var(--accent); white-space: nowrap; letter-spacing: -0.01em;
}
.hub-card p { font-size: 0.95rem; line-height: 1.68; color: var(--text-2); }
.hub-card p + p { margin-top: 0.75rem; }
.hub-card__foot {
  margin-top: auto; padding-top: 1.2rem;
  font-size: 0.82rem; color: var(--text-2);
}
.hub-card__foot span { color: var(--muted); }
/* Sin esto el enlace del pie de tarjeta heredaba el gris del texto y no
   parecía pulsable: son los enlaces que reparten autoridad hacia las
   páginas de ingrediente, tienen que verse. */
.hub-card__foot a {
  color: var(--accent); font-weight: 600;
  transition: color 0.2s var(--ease);
}
.hub-card__foot a:hover { color: #6EB4D6; }

/* ---------- Aviso de cumplimiento / nota legal en el cuerpo ----------
   Los avisos obligatorios (complemento alimenticio, cafeína, claims
   EFSA) tienen que LEERSE. Van sobre el gris de cuerpo, no escondidos
   en el gris mínimo. */
.aviso {
  border: 1px solid var(--divider-2); border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0; background: var(--bg-elevated);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  max-width: 820px; margin-top: 2rem;
}
.aviso p { font-size: 0.88rem; line-height: 1.7; color: var(--text-2); }
.aviso p + p { margin-top: 0.7rem; }
.aviso strong { color: var(--text-strong); }

/* ---------- Bloque de enlaces internos del final ----------
   La regla de enlazado del plan: cada página apunta hacia arriba
   (ingrediente -> hub -> PEAK BRAIN -> Amazon). Este bloque es donde
   se cumple. */
.siguiente { border-top: 1px solid var(--divider); padding-top: 2.5rem; margin-top: 1rem; }
.siguiente__grid {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 1.4rem;
}
.siguiente__item {
  display: block; padding: 1.25rem 1.4rem;
  border: 1px solid var(--divider); border-radius: 6px;
  background: var(--bg-elevated);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.siguiente__item:hover { border-color: var(--accent); transform: translateY(-3px); }
.siguiente__item strong { display: block; font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; }
.siguiente__item span { font-size: 0.86rem; color: var(--text-2); line-height: 1.6; }

/* ---------- CTA compacto dentro de una página interior ----------
   El de la home (.cta-amazon) ocupa una pantalla entera. Aquí basta
   una franja. */
.cta-slim {
  border: 1px solid var(--accent-line); border-radius: 8px;
  background: linear-gradient(160deg, var(--accent-bg) 0%, var(--bg-elevated) 100%);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.6rem;
  max-width: 820px;
}
.cta-slim__text { max-width: 46ch; }
.cta-slim h2 { font-size: clamp(1.25rem, 2.6vw, 1.65rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
.cta-slim p { font-size: 0.94rem; color: var(--text-2); margin-top: 0.5rem; line-height: 1.65; }

/* Separación entre bloques de una página interior sin duplicar
   el padding gigante de .section de la home. */
.bloque { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: 0; }
.bloque:last-of-type { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.bloque .section-title { margin-bottom: 1.8rem; }

/* ---------- El pie NO se toca ----------
   Aquí hubo un pie en tres columnas (.footer__nav / .footer__col). Se ha
   retirado por decisión de la dueña: el pie de la web se queda exactamente
   como está, en una sola fila (.footer__links), y las páginas nuevas se
   añaden como cuatro enlaces más dentro de esa misma fila. Se retiró
   también su media query, porque cambiaba la disposición del pie de la
   home en móvil. Ni una regla del pie original está modificada. */

/* ---------- Enlace dentro de un párrafo ----------
   La home no tenía enlaces en medio del texto (todo eran botones y
   anclas de nav), así que un <a> heredaba el color y no se veía.
   Ahora los párrafos de la home apuntan a las páginas nuevas: el
   subrayado azul los distingue sin romper la lectura. */
.link {
  color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.link:hover { color: var(--accent); }

/* En páginas interiores la nav ya no vive sobre un hero negro a
   pantalla completa: se le da fondo desde el primer píxel para que
   los enlaces no floten sobre el texto al cargar. */
.nav--interior {
  background: rgba(9,9,9,0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--divider);
}

/* Diagrama de dato. Pieza dibujada con guion, 2400x1350, sobre el mismo
   #090909 del fondo: por eso no lleva caja ni fondo propio, solo un filete
   que define el borde, y el dibujo se funde con la pagina. El width/height
   va en el <img> para que el navegador reserve el hueco y el texto no de un
   salto cuando la imagen entra. */
.diagrama { margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.diagrama img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--divider); border-radius: 3px;
}
.diagrama figcaption {
  margin-top: 0.95rem; color: var(--text-2);
  font-size: 0.85rem; line-height: 1.6; max-width: 62ch;
}