/* Pasta Studio LAB — manual de preparación (extiende lab.css) */

/* El índice pegajoso se suma al header: el destino de cada ancla tiene que
   caer debajo de los dos, no debajo del header solo. */
html { scroll-padding-top: 5.5rem; }
@media (min-width: 961px) { html { scroll-padding-top: 9.5rem; } }

/* Sin store.js no hay .is-scrolled: acá la separación es permanente. */
.header { border-bottom-color: var(--linea); }

/* ---------- Hero del manual ---------- */
.manual-hero {
  position: relative;
  background: var(--notte);
  color: var(--crema);
  overflow: hidden;
  display: grid; align-items: end;
  min-height: min(72svh, 40rem);
}
.manual-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
}
/* Velo azul sobre la foto: el texto va sobre el borde izquierdo, que es donde
   el degradado carga más. A la derecha se abre para que la pasta se vea. */
.manual-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(0, 26, 48, 0.94) 0%,
    rgba(0, 26, 48, 0.88) 42%,
    rgba(0, 26, 48, 0.60) 74%,
    rgba(0, 26, 48, 0.72) 100%);
}
.manual-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--max-w); margin: 0 auto;
  padding: clamp(3.5rem, 2.5rem + 5vw, 7rem) var(--gutter) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 1.5rem var(--space-block);
  align-items: end;
}
.manual-kicker {
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.75rem; color: var(--cielo); margin: 0 0 1.2rem;
}
.manual-title {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  text-transform: uppercase; font-size: var(--text-hero);
  letter-spacing: -0.022em; display: grid;
}
.manual-title span:last-child { color: var(--salsa); }

/* Entrada del hero, una vez al cargar. @starting-style en vez de JS para la
   copy: si el navegador no lo soporta o el script no corre, el contenido
   simplemente aparece ya en su estado final — nunca queda invisible. El
   título usa @keyframes aparte porque cada línea abre con su propio wipe. */
@media (prefers-reduced-motion: no-preference) {
  .manual-hero-copy, .manual-meta {
    transition: opacity var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
  }
  .manual-meta { transition-delay: 260ms; }
  @starting-style {
    .manual-hero-copy, .manual-meta { opacity: 0; transform: translateY(10px); }
  }

  .manual-hero-bg { animation: manual-hero-zoom 1.8s var(--ease-out) both; }
  .manual-title span {
    animation: manual-hero-linea 760ms var(--ease-out) both;
  }
  .manual-title span:nth-child(1) { animation-delay: 60ms; }
  .manual-title span:nth-child(2) { animation-delay: 180ms; }
}
@keyframes manual-hero-zoom {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}
@keyframes manual-hero-linea {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.manual-sub {
  margin: 1.3rem 0 0; max-width: 34rem;
  font-size: var(--text-lg); color: rgba(243, 236, 219, 0.9);
}
/* Ficha técnica al pie del hero: da el tono de manual antes de leer una línea */
.manual-meta {
  margin: 0; display: grid; gap: 0.85rem;
  border-top: 1px solid rgba(243, 236, 219, 0.28);
  padding-top: 1.1rem;
}
.manual-meta div { display: grid; gap: 0.1rem; }
.manual-meta dt {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cielo);
}
.manual-meta dd { margin: 0; font-size: 0.95rem; color: rgba(243, 236, 219, 0.9); }

/* ---------- Índice ---------- */
.manual-indice {
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  z-index: 90;
}
@media (min-width: 961px) { .manual-indice { position: sticky; top: 4.1rem; } }
.manual-indice-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0.7rem var(--gutter);
  display: flex; gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.manual-indice-inner::-webkit-scrollbar { display: none; }
.manual-indice a {
  flex: none;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radius-chip);
  font-size: 0.85rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.manual-indice a:hover { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.manual-indice a.is-active {
  border-color: var(--salsa); color: var(--salsa-oscura);
  background: rgba(204, 71, 13, 0.08);
}

/* ---------- Bloques ---------- */
.manual-lead {
  font-size: var(--text-lg); color: var(--olivo);
  max-width: 42rem; margin: 0 0 var(--space-block);
}

/* Reglas: fichas temáticas, sin numerar. La numeración las hacía leer como una
   secuencia de pasos y no lo son: valen todas a la vez. */
.reglas-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.regla {
  position: relative;
  padding-top: 1.1rem;
}
/* Barra superior como pseudo-elemento (no border-top): así el trazo se anima
   con transform y no dispara layout. Sin JS/reduced-motion queda a scaleX(1)
   fija, igual que el border-top que reemplaza. */
.regla::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--salsa);
}
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal-ready .regla::before {
    transform: scaleX(0); transform-origin: left;
    transition: transform 500ms var(--ease-out) 120ms;
  }
  html.js-reveal-ready .regla.is-visible::before { transform: scaleX(1); }
}
.regla-tema {
  margin: 0 0 0.5rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--olivo);
}
.regla h3 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.regla p { margin: 0; font-size: 0.93rem; color: var(--olivo); }

/* ---------- Tabla de tiempos ---------- */
.tabla-wrap { overflow-x: auto; border: var(--border-marca); background: var(--superficie); }
.tabla-tiempos {
  width: 100%; min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.tabla-tiempos caption {
  text-align: left; padding: 1rem 1.2rem 0;
  font-size: 0.85rem; color: var(--olivo);
}
.tabla-tiempos th, .tabla-tiempos td {
  text-align: left; padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.tabla-tiempos thead th {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--crema);
  background: var(--olivo);
  border-bottom: none;
}
.tabla-tiempos tbody tr:last-child th,
.tabla-tiempos tbody tr:last-child td { border-bottom: none; }
.tabla-tiempos tbody th { font-weight: 600; white-space: nowrap; }
.tabla-tiempos .celda-tiempo {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 1.05rem; color: var(--salsa-oscura); white-space: nowrap;
}
.tabla-tiempos tbody tr:nth-child(even) { background: rgba(226, 209, 176, 0.28); }

/* ---------- Receta (pasta o salsa) ---------- */
.recetas { display: grid; gap: var(--space-block); }
.receta {
  border: var(--border-marca);
  background: var(--superficie);
  display: grid;
  grid-template-columns: 15rem 1fr;
  align-items: stretch;
  box-shadow: var(--sombra-1);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.receta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.receta-foto { margin: 0; position: relative; overflow: hidden; border-right: var(--border-marca); }
.receta-foto img {
  width: 100%; height: 100%; object-fit: cover; min-height: 15rem;
  transition: transform var(--duration-normal) var(--ease-out);
}
.receta:hover .receta-foto img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .receta:hover { transform: none; }
  .receta:hover .receta-foto img { transform: none; }
}
.receta-cuerpo { padding: 1.6rem 1.8rem 1.8rem; display: grid; align-content: start; gap: 0.9rem; }
.receta-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.receta-nombre { font-family: var(--font-display); font-style: italic; font-weight: 900;
  text-transform: uppercase; font-size: var(--text-h3); letter-spacing: -0.01em; }
.receta-tiempo {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--tinta); color: var(--crema);
  padding: 0.35rem 0.85rem; border-radius: var(--radius-chip); white-space: nowrap;
}
.receta-intro { margin: 0; max-width: 38rem; color: var(--olivo); font-size: 0.95rem; }

/* Ancho de lectura acotado: sin esto una línea de paso llega a ~100 caracteres
   en pantallas anchas, muy por encima del máximo legible (60-75). */
.pasos { margin: 0; padding: 0; max-width: 38rem; list-style: none; counter-reset: paso; display: grid; gap: 0.75rem; }
/* La numeración va absoluta y no como columna de grid: con grid, cada <strong>
   del paso se convierte en un ítem más y el texto se parte en columnas. */
.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.6rem;
  font-size: 0.96rem;
}
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 0.05rem;
  font-weight: 600; font-size: 0.82rem;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-content: center;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radius-chip);
  color: var(--salsa-oscura);
}
.pasos strong { font-weight: 600; }

/* Callouts: el punto justo (verde) y el error que arruina el plato (naranja) */
.nota {
  margin: 0; max-width: 38rem; padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  border-left: 3px solid var(--olivo);
  background: rgba(189, 204, 219, 0.35);
}
.nota strong { display: block; font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--olivo); margin-bottom: 0.25rem; }
.nota-alerta { border-left-color: var(--salsa); background: rgba(204, 71, 13, 0.09); }
.nota-alerta strong { color: var(--salsa-oscura); }

/* ---------- Mantecatura (bloque técnica) ---------- */
.tecnica {
  margin-top: var(--space-section);
  background: linear-gradient(rgba(36, 63, 43, 0.95), rgba(36, 63, 43, 0.95)),
              url('../assets/img/textures/ladrillo.webp') center / cover;
  color: var(--crema);
}
.tecnica-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--space-block) var(--gutter);
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: 1.5rem var(--space-block);
  align-items: start;
}
.tecnica-kicker {
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.72rem; color: var(--cielo); margin: 0 0 0.7rem;
}
.tecnica-title {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  text-transform: uppercase; font-size: var(--text-h2);
  letter-spacing: -0.015em; line-height: 1.02; margin: 0 0 0.9rem;
}
.tecnica-copy { margin: 0; font-size: var(--text-lg); color: rgba(243, 236, 219, 0.9); }
.tecnica .pasos li::before { border-color: rgba(243, 236, 219, 0.45); color: var(--cielo); }
.tecnica .pasos { gap: 1rem; }
.tecnica .pasos li { font-size: 1rem; }

/* ---------- Maridajes ---------- */
.maridaje-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.maridaje {
  border: var(--border-marca); background: var(--superficie);
  padding: 1.5rem 1.6rem;
  display: grid; gap: 0.55rem; align-content: start;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
.maridaje:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--linea-fuerte); }
@media (prefers-reduced-motion: reduce) {
  .maridaje:hover { transform: none; }
}
.maridaje h3 { font-size: 1.12rem; }
.maridaje-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.93rem; }
.maridaje-lista li { position: relative; padding-left: 1.1rem; }
.maridaje-lista li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--salsa);
}
.maridaje-nota { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--olivo); }

/* ---------- Conservación + errores ---------- */
.dos-columnas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-block); align-items: start; }
.lista-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; }
.lista-check li {
  position: relative; padding-left: 1.7rem;
  font-size: 0.96rem;
}
.lista-check li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  font-weight: 600; color: var(--olivo); font-size: 0.95rem;
}
.lista-errores li::before { content: '✕'; color: var(--salsa); }

/* ---------- Revelado al scroll (js/reveal.js) ----------
   El estado oculto solo existe bajo html.js-reveal-ready, clase que pone el
   propio script. Si reveal.js no corre (bloqueado, error, sin soporte de
   IntersectionObserver) esa clase nunca aparece y .reveal no oculta nada:
   el manual entero se lee igual, sin depender de que el script funcione. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal-ready .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
  }
  html.js-reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

  /* Cascada interna: dentro de una tarjeta ya visible, los pasos, las filas
     de la tabla y los ítems de lista entran uno a uno en vez de aparecer
     todos junto con el borde de la tarjeta. El ::before de cada li (número,
     check, punto) viaja con el mismo opacity/transform del li, sin reglas
     aparte. */
  html.js-reveal-ready .pasos li,
  html.js-reveal-ready .maridaje-lista li,
  html.js-reveal-ready .lista-check li {
    opacity: 0; transform: translateX(-8px);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  }
  html.js-reveal-ready .is-visible .pasos li,
  html.js-reveal-ready .is-visible .maridaje-lista li,
  html.js-reveal-ready .is-visible .lista-check li {
    opacity: 1; transform: none;
  }
  html.js-reveal-ready .tabla-tiempos tbody tr {
    opacity: 0; transform: translateY(6px);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  }
  html.js-reveal-ready .is-visible .tabla-tiempos tbody tr { opacity: 1; transform: none; }

  html.js-reveal-ready .pasos li:nth-child(1),
  html.js-reveal-ready .maridaje-lista li:nth-child(1),
  html.js-reveal-ready .lista-check li:nth-child(1),
  html.js-reveal-ready .tabla-tiempos tbody tr:nth-child(1) { transition-delay: 60ms; }
  html.js-reveal-ready .pasos li:nth-child(2),
  html.js-reveal-ready .maridaje-lista li:nth-child(2),
  html.js-reveal-ready .lista-check li:nth-child(2),
  html.js-reveal-ready .tabla-tiempos tbody tr:nth-child(2) { transition-delay: 110ms; }
  html.js-reveal-ready .pasos li:nth-child(3),
  html.js-reveal-ready .maridaje-lista li:nth-child(3),
  html.js-reveal-ready .lista-check li:nth-child(3),
  html.js-reveal-ready .tabla-tiempos tbody tr:nth-child(3) { transition-delay: 160ms; }
  html.js-reveal-ready .pasos li:nth-child(4),
  html.js-reveal-ready .lista-check li:nth-child(4),
  html.js-reveal-ready .tabla-tiempos tbody tr:nth-child(4) { transition-delay: 210ms; }
  html.js-reveal-ready .pasos li:nth-child(5),
  html.js-reveal-ready .lista-check li:nth-child(5),
  html.js-reveal-ready .tabla-tiempos tbody tr:nth-child(5) { transition-delay: 260ms; }
  html.js-reveal-ready .pasos li:nth-child(n+6),
  html.js-reveal-ready .lista-check li:nth-child(n+6) { transition-delay: 310ms; }

  /* Una vez revelada, `.reveal.is-visible { transform: none }` le gana en
     especificidad al translateY del hover — esto lo destraba sin tocar el
     resto de la cascada de reveal. */
  html.js-reveal-ready .reveal.is-visible.receta:hover {
    transform: translateY(-3px);
  }
  html.js-reveal-ready .reveal.is-visible.maridaje:hover {
    transform: translateY(-3px);
  }
}

/* ---------- Cierre ---------- */
.manual-cierre {
  margin-top: var(--space-section);
  background: var(--notte); color: var(--crema);
  text-align: center;
  padding: var(--space-block) var(--gutter);
}
.manual-cierre h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  text-transform: uppercase; font-size: var(--text-h2); letter-spacing: -0.015em;
  margin-bottom: 0.8rem;
}
.manual-cierre p { margin: 0 auto 1.6rem; max-width: 34rem; color: rgba(243, 236, 219, 0.9); font-size: var(--text-lg); }
.manual-cierre .btn-ghost { color: var(--crema); border-color: rgba(243, 236, 219, 0.55); }
.manual-cierre .btn-ghost:hover { border-color: var(--crema); background: rgba(243, 236, 219, 0.12); }
.manual-cierre-acciones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .manual-hero-inner { grid-template-columns: 1fr; }
  .reglas-grid { grid-template-columns: repeat(2, 1fr); }
  .receta { grid-template-columns: 1fr; }
  .receta-foto { border-right: none; border-bottom: var(--border-marca); }
  .receta-foto img { min-height: 0; aspect-ratio: 16 / 9; }
  .tecnica-inner { grid-template-columns: 1fr; }
  .dos-columnas { gap: var(--space-block); }
}
@media (max-width: 640px) {
  .reglas-grid { grid-template-columns: 1fr; }
  .maridaje-grid { grid-template-columns: 1fr; }
  .dos-columnas { grid-template-columns: 1fr; }
  .receta-cuerpo { padding: 1.3rem 1.3rem 1.5rem; }
  .manual-cierre-acciones .btn { width: 100%; text-align: center; }
}