/* Jai Five — layout de cada noche (#portada … #prendido). Dueño: agente página.
   Mobile-first: base = celular; @media (min-width: 760px) tablet; (min-width: 1024px) escritorio.
   Las tarjetas (.tarjeta, .ficha), el carrito, la januquiá y el sevivón los estilizan otros módulos. */

/* Regla general: ningún hijo de grid empuja el ancho (evita scroll horizontal a 390 px) */
.noche .wrap > * { min-width: 0; }

/* Bandas claras enmarcadas: mismo sistema de marco que la portada, el cielo asoma por los bordes */
.noche.banda-clara { margin-inline: var(--frame); border-radius: var(--r-panel); box-shadow: var(--sh-top); }

/* ============================================================
   Noche 1 · Portada enmarcada
   ============================================================ */
#portada { padding: var(--frame) var(--frame) 0; }
.portada-marco {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--g-noche);
  box-shadow: var(--sh-hair), var(--sh-top);
  min-height: calc(100vh - var(--frame));
  min-height: calc(100svh - var(--frame));
  display: grid; grid-template-rows: 1fr auto;
  padding-top: calc(var(--nav-h) + 14px + env(safe-area-inset-top, 0px) + clamp(32px, 6vw, 72px));
}
/* Resplandores: oro arriba a la derecha, azul eléctrico abajo a la izquierda, respirando lento */
.portada-marco::before, .portada-marco::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  animation: pag-respirar 16s var(--ease-in-out) infinite alternate;
}
.portada-marco::before {
  width: 80vmax; height: 80vmax; right: -34vmax; top: -40vmax;
  background: radial-gradient(circle, rgb(var(--rgb-oro) / .34) 0%, rgb(var(--rgb-oro) / .08) 32%, transparent 62%);
}
.portada-marco::after {
  width: 70vmax; height: 70vmax; left: -36vmax; bottom: -38vmax;
  background: radial-gradient(circle, rgb(var(--rgb-azul) / .5) 0%, rgb(var(--rgb-azul) / .12) 34%, transparent 64%);
  animation-delay: -8s; animation-duration: 19s;
}
#chispas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.portada-grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(32px, 6vw, 56px); align-content: center;
  padding-bottom: clamp(32px, 6vw, 64px);
}
.portada-grid > * { min-width: 0; }
.portada-texto { display: grid; gap: var(--s-3); justify-items: start; }
.portada-texto h1 { max-width: 9ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-prueba { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-2); color: var(--fg-2); }
.hero-prueba::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-oro); box-shadow: 0 0 10px var(--c-oro); flex: none; }

/* Arte: en celular va primero, con los chips apilados debajo */
.portada-arte {
  position: relative; order: -1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.portada-arte img {
  flex: 0 0 100%; width: min(100%, 440px); margin: 0 auto 10px;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6));
  animation: pag-flotar 6.5s var(--ease-in-out) infinite alternate;
}
/* Pie de la portada: línea fina de borde a borde del panel */
.portada-pie {
  position: relative; z-index: 1; max-width: none;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 18px; border-top: 1px solid var(--hair);
  color: var(--fg-2);
}

@media (min-width: 760px) {
  .portada-arte img { width: min(100%, 480px); }
}
@media (min-width: 1024px) {
  .portada-grid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: var(--s-6); }
  .portada-arte { order: 0; display: block; }
  .portada-arte img { width: min(100%, 560px); margin: 0 auto; }
  .portada-texto h1 { max-width: 10ch; }
}

/* ============================================================
   Noche 2 · El original: ficha + capas de significado
   ============================================================ */
.original-grid { display: grid; gap: var(--s-4); }
.original-grid > * { min-width: 0; }
.capas { display: grid; align-content: start; }
.capa { display: grid; gap: 12px; padding-block: var(--s-4); border-top: 1px solid var(--hair); min-width: 0; }
.capa:last-child { border-bottom: 1px solid var(--hair); }
.capa dt {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; line-height: 1; letter-spacing: -.02em;
  font-variation-settings: var(--wdth-tight);
}
.capa-num { color: var(--c-oro); font-weight: 600; translate: 0 -.35em; }
.capa dt [lang="he"] { font-weight: 900; color: var(--c-oro); font-size: 1.1em; line-height: 1; }
.capa dd { color: var(--fg-2); max-width: 46ch; font-size: 16px; text-wrap: pretty; }
@media (min-width: 1024px) {
  .original-grid { grid-template-columns: 1.1fr .9fr; gap: var(--s-6); align-items: start; }
  .capa { padding-block: var(--s-5); }
}

/* ============================================================
   Noche 3 · La colección (banda clara): filtros y nota
   ============================================================ */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-5); }
#coleccion .nota { margin-top: var(--s-5); color: var(--fg-2); }

/* ============================================================
   Noche 4 · Materiales: 4 columnas, letra hebrea en contorno que se rellena
   ============================================================ */
.materiales-grid { display: grid; gap: 14px; }
.materiales-grid > * { min-width: 0; }
.material .nucleo { height: 100%; grid-template-rows: 1fr auto auto; align-content: stretch; gap: 10px; }
.material-glifo {
  display: block; align-self: start; justify-self: start;
  margin: -.1em 0 var(--s-3) -.04em;
  font-size: clamp(112px, 11vw, 168px);
  color: transparent; -webkit-text-stroke: 1.5px var(--c-oro);
  transition: color var(--d-slow) var(--ease-out), text-shadow var(--d-slow) var(--ease-out);
}
.material:hover .material-glifo, .material:focus-within .material-glifo { color: var(--c-oro); text-shadow: 0 0 40px rgb(var(--rgb-oro) / .45); }
.material h3 { font-size: 22px; }
.material p { font-size: 15px; }
@media (min-width: 760px) { .materiales-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .materiales-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================
   Noche 5 · Regalos (banda clara): tres ofertas + panel del sevivón
   ============================================================ */
.regalos-grid { display: grid; gap: 14px; }
.regalos-grid > * { min-width: 0; }
.ofertas { display: grid; gap: 14px; }
.ofertas > * { min-width: 0; }
.oferta .nucleo { height: 100%; grid-template-rows: auto auto 1fr auto; gap: 14px; }
.oferta .badge { justify-self: start; }
.oferta h3 { font-size: clamp(22px, 2vw, 26px); }
.oferta .btn { justify-self: start; align-self: end; margin-top: 6px; }
.sevivon-panel .nucleo { place-items: center; text-align: center; gap: 18px; perspective: 900px; }
.sevivon-panel .eyebrow { justify-self: center; }
.sevivon-panel .sevivon-escenario { width: 100%; min-height: 220px; display: grid; place-items: center; }
.sevivon-panel .sevivon-resultado { color: var(--fg); font-weight: 700; font-size: 18px; max-width: 24ch; text-wrap: balance; }
@media (min-width: 760px) {
  .ofertas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oferta:last-child { grid-column: 1 / -1; }
  .oferta:last-child .nucleo { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: var(--s-4); }
  .oferta:last-child .btn { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}
@media (min-width: 1024px) {
  .regalos-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 25%); align-items: stretch; }
  .ofertas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oferta:last-child { grid-column: auto; }
  .oferta:last-child .nucleo { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .oferta:last-child .btn { grid-column: auto; grid-row: auto; align-self: end; }
  .oferta .nucleo { padding: 24px; }
  .oferta h3 { font-size: 22px; }
  .oferta p { font-size: 15px; }
}

/* ============================================================
   Noche 6 · Nuestro humor: tres principios con números mono dorados
   ============================================================ */
.principios { display: grid; border-top: 1px solid var(--hair); }
.principio {
  display: grid; gap: 16px; align-content: start; min-width: 0;
  padding: var(--s-5) 0; border-bottom: 1px solid var(--hair);
}
.principio-num { font-size: clamp(44px, 5vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--c-oro); }
.principio h3 { font-size: clamp(22px, 2.2vw, 26px); max-width: 14ch; }
.principio p { color: var(--fg-2); font-size: 16px; max-width: 36ch; text-wrap: pretty; }
@media (min-width: 760px) {
  .principios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principio { padding: var(--s-6) var(--s-4) var(--s-6) 0; }
  .principio + .principio { border-left: 1px solid var(--hair); padding-left: var(--s-4); }
}

/* ============================================================
   Noche 7 · Preguntas (banda clara): cabecera pegajosa + FAQ
   ============================================================ */
.preguntas-grid { display: grid; gap: var(--s-5); }
.preguntas-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .preguntas-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s-7); align-items: start; }
  .preguntas-grid .cabecera { position: sticky; top: calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px)); margin-bottom: 0; }
}

/* ============================================================
   Noche 8 · Mantente prendido: bandeja ancha con resplandor dorado
   ============================================================ */
.prendido-grid { position: relative; }
.prendido-grid .nucleo { isolation: isolate; padding: clamp(28px, 6vw, 80px); row-gap: var(--s-3); justify-items: start; }
.prendido-grid .nucleo::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -30% -20% auto auto; width: 90%; height: 130%; border-radius: 50%;
  background: radial-gradient(circle at 70% 20%, rgb(var(--rgb-oro) / .32) 0%, rgb(var(--rgb-oro) / .08) 38%, transparent 66%);
}
.prendido-grid h2 { max-width: 10ch; }
.prendido-grid .lede { max-width: 44ch; }
.prendido-grid .nl { margin-top: var(--s-2); }
@media (min-width: 1024px) {
  .prendido-grid .nucleo {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas: "etiqueta formulario" "titulo formulario" "bajada contacto";
    column-gap: var(--s-7); align-items: start;
  }
  .prendido-grid .eyebrow { grid-area: etiqueta; }
  .prendido-grid h2 { grid-area: titulo; }
  .prendido-grid .lede { grid-area: bajada; }
  .prendido-grid .nl { grid-area: formulario; align-self: center; margin-top: 0; width: 100%; max-width: none; }
  .prendido-grid .nl-contacto { grid-area: contacto; align-self: start; }
}

/* ============================================================
   Reducir movimiento: sin flotación ni resplandores animados
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .portada-arte img, .portada-marco::before, .portada-marco::after { animation: none; }
  .material-glifo { transition: none; }
}

/* ---- Ajustes de integración (Claude, 13-oct-2026) ---- */
/* Portada: el sticker deja aire a los lados para que los chips no tapen el texto del troquel */
@media (min-width: 1024px) {
  .portada-arte img { width: 80%; margin-inline: auto; }
  .chip-1 { top: 8%; left: -2%; }
  .chip-2 { top: 44%; right: -3%; }
  .chip-3 { bottom: 14%; left: -3%; }
}
/* Regalos: entre 1024 y 1199 px las ofertas van 2 + 1 (3 columnas solo desde 1200) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .ofertas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oferta:last-child { grid-column: 1 / -1; }
}
.oferta .btn { white-space: normal; text-align: left; line-height: 1.15; }
.oferta .btn-simple { padding-block: 11px; }