/* Nocturna en las landings (tarea 2 del prompt de la Portada v17, Javier,
   6/11/2026: «todo al nuevo diseño»).

   Las landings conservan su HTML, su contenido y sus scripts (el hero B1,
   la pausa y los goblins, que viven en toda la web pública desde el
   24/09/2026). Esta hoja solo cambia el aspecto, y todo lo que no es la
   cabecera va bajo body[data-estilo="nocturna"]: se carga la última, después
   de estilos.css, estudio-b1.css y b1-goblins.css, y el prefijo `html body[…]`
   (0,2,2) gana a las reglas `body[data-theme="fusion"] .x` (0,2,1).

   Tokens: los de diseno/portada-v17/PROMPT.md, sin inventar otros. Dos
   colores de fondo por página: tinta en el hero y el cierre, papel en el
   resto. Los bloques secundarios van en cuadros de diálogo navy con marco
   dorado y placa, como el menú de la portada.

   La cabecera repite la de laboratorio/v17/v17.css («Cabecera») con clases
   propias: la portada carga v17.css entero y las landings no lo necesitan.
   Si cambia una, cambia la otra. La placa es copia de
   laboratorio/v17/sprites/jm-placa-x.png en css/sprites/: el sitio real no
   tiene por qué servir el laboratorio. */

/* ── Cabecera ── */
.noc-cabecera { position: sticky; top: 0; z-index: 30; background: rgba(241, 236, 224, .97); border-bottom: 2px solid #15130f; color: #15130f; font-family: Inter, Arial, sans-serif; }
.noc-cabecera-dentro { max-width: 1320px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 12px 24px; }
.noc-marca { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; text-decoration: none; color: #15130f; }
.noc-loseta { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border: 2px solid #15130f; box-shadow: 3px 3px 0 #15130f; }
.noc-loseta img { width: 32px; height: 32px; object-fit: contain; }
.noc-marca-txt { display: flex; flex-direction: column; gap: 3px; }
.noc-marca-nombre { font: 600 17px/1 'Shippori Mincho', Georgia, serif; }
.noc-marca-sub { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #4a463c; }
.noc-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 22px; }
.noc-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #15130f; font: 700 11px/1.3 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.noc-nav a:hover { color: #ad2914; text-decoration: underline; text-underline-offset: 5px; }
.noc-nav a[data-analytics-event="begin_quote"] { padding: 0 12px; background: #2b3685; color: #fff; border: 2px solid #15130f; box-shadow: 3px 3px 0 #ad2914; transition: translate .14s steps(2, end), box-shadow .14s steps(2, end); }
.noc-nav a[data-analytics-event="begin_quote"]:hover { color: #fff; text-decoration: none; translate: -2px -2px; box-shadow: 5px 5px 0 #ad2914; }
.noc-wa { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: #25d366; border: 2px solid #15130f; box-shadow: 3px 3px 0 #ad2914; transition: translate .14s steps(2, end), box-shadow .14s steps(2, end); }
.noc-wa:hover { translate: -3px -3px; box-shadow: 6px 6px 0 #ad2914; }
.noc-wa svg { width: 26px; height: 26px; fill: #fff; shape-rendering: crispEdges; filter: drop-shadow(1px 1px 0 #15130f); }

/* Migas: «Inicio → Wargames → Kill Team». La flecha es decoración (texto
   alternativo vacío); el orden lo da la lista. */
.noc-migas { border-top: 1px solid rgba(21, 19, 15, .18); }
.noc-migas ol { max-width: 1320px; margin: 0 auto; padding: 0 20px; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font: 700 10.5px/1.3 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #4a463c; }
.noc-migas li { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.noc-migas li + li::before { content: '→' / ''; color: #ad2914; }
.noc-migas a { display: inline-flex; align-items: center; min-height: 34px; color: #2b3685; text-decoration: underline; text-underline-offset: 4px; }
.noc-migas a:hover { color: #ad2914; }
.noc-migas [aria-current="page"] { color: #15130f; }

.noc-cabecera :is(a, button):focus-visible { outline: 3px solid #15130f; outline-offset: 3px; box-shadow: 0 0 0 3px #f2c200 !important; }

@media (max-width: 760px) {
  .noc-cabecera { position: relative; }
  .noc-cabecera-dentro { flex-wrap: wrap; padding: 8px 16px; }
  .noc-marca { order: 1; }
  .noc-wa { order: 2; }
  .noc-nav { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 0 18px; }
  .noc-nav a { font-size: 10px; letter-spacing: .1em; }
  .noc-migas ol { padding: 0 16px; }
}

/* ── Página ── */
html body[data-estilo="nocturna"] { background: #f1ece0; }
html body[data-estilo="nocturna"] .b1-surface :is(a, button, summary):focus-visible { outline: 3px solid #15130f; outline-offset: 3px; box-shadow: 0 0 0 3px #f2c200; }

/* ── Hero: dos columnas sobre tinta ── */
html body[data-estilo="nocturna"] .b1-hero {
  --noc-pad: max(24px, calc((100% - 1320px) / 2));
  display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 1.3fr); grid-template-rows: auto auto 1fr; column-gap: 40px;
  align-items: center; min-height: 0; padding: 44px var(--noc-pad) 72px; text-align: left;
  background: #15130f radial-gradient(rgba(241, 236, 224, .07) 1px, transparent 1px) 0 0 / 12px 12px; color: #f1ece0;
  border-bottom: 2px solid #15130f;
}
html body[data-estilo="nocturna"] .b1-hero:not(:has(.b1-photo-strip)) { grid-template-columns: minmax(0, 820px); }
html body[data-estilo="nocturna"] .b1-hero :is(.b1-backdrop, .b1-pixels) { display: none; }
html body[data-estilo="nocturna"] .b1-hero-copy { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding: 0 0 28px; transform: none !important; opacity: 1; }
html body[data-estilo="nocturna"] .b1-hero .b1-kicker { display: inline-block; margin: 0 0 16px; padding: 2px 8px; background: #f1ece0; color: #ad2914; font-size: 11px; letter-spacing: .16em; }
html body[data-estilo="nocturna"] .b1-hero h1 { margin: 0 0 22px; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04; text-align: left; text-wrap: initial; }
html body[data-estilo="nocturna"] .b1-hero .b1-title-line {
  display: block; width: fit-content; padding: 6px 16px 8px; background: #f1ece0; color: #15130f;
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
}
html body[data-estilo="nocturna"] .b1-hero .b1-mark { min-width: 0; margin-top: 12px; padding: 2px 12px 6px; white-space: normal; text-align: left; font-size: clamp(20px, 2.3vw, 32px); line-height: 1.15; background: #ad2914; color: #fbf8f0; box-shadow: 5px 5px 0 #15130f, 5px 5px 0 2px #f1ece0; }
html body[data-estilo="nocturna"] .b1-hero .b1-intro { max-width: 560px; margin: 0 0 24px; padding: 0; background: none; color: #e8e1d0; font: italic 600 18px/1.6 'Shippori Mincho', Georgia, serif; }
html body[data-estilo="nocturna"] .b1-hero .b1-actions { justify-content: flex-start; }
html body[data-estilo="nocturna"] .b1-hero .b1-button { border: 3px solid #fbf8f0; box-shadow: 0 0 0 3px #15130f, 6px 6px 0 3px #ad2914; }
html body[data-estilo="nocturna"] .b1-hero .b1-button:hover { transform: none; translate: -3px -3px; box-shadow: 0 0 0 3px #15130f, 9px 9px 0 3px #ad2914; }
html body[data-estilo="nocturna"] .b1-hero .b1-button-primary { background: #2b3685; color: #fff; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
html body[data-estilo="nocturna"] .b1-hero .b1-button-primary::before { content: '▶' / ''; color: #f2c200; }
html body[data-estilo="nocturna"] .b1-hero .b1-support { justify-content: flex-start; }
html body[data-estilo="nocturna"] .b1-hero .b1-support a { color: #f1ece0; }
html body[data-estilo="nocturna"] .b1-hero .b1-support a:hover { color: #f2c200; }
html body[data-estilo="nocturna"] .b1-hero .b1-proof { color: #e8e1d0; }
html body[data-estilo="nocturna"] .b1-hero :is(a, button):focus-visible { outline: 3px solid #f2c200; outline-offset: 3px; box-shadow: none; }

/* La vitrina: las fotos de la categoría en un marco dorado, la primera
   grande y sin recortar, las demás en tira. */
html body[data-estilo="nocturna"] .b1-photo-strip {
  grid-column: 2; grid-row: 1 / 4; position: relative; align-self: center;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); align-content: start; gap: 10px;
  margin: 22px 0 18px; padding: 24px 16px 14px; max-width: none;
  background: #15130f; border: 3px solid #d9bd7c; border-radius: 2px;
  box-shadow: inset 0 0 0 3px #15130f, inset 0 0 0 4px rgba(217, 189, 124, .6), 0 0 0 3px #15130f, 9px 9px 0 3px #c8341c;
}
html body[data-estilo="nocturna"] .b1-photo-strip::before {
  content: 'Galería · Trabajos reales' / ''; position: absolute; z-index: 3; top: -21px; left: 26px; padding: 0 4px;
  border-style: solid; border-width: 14px 18px; border-image: url(sprites/jm-placa-x.png) 7 9 fill / 14px 18px / 0 stretch; image-rendering: pixelated;
  color: #f2c200; text-shadow: 1px 1px 0 #15130f; font: 800 11px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  filter: drop-shadow(3px 3px 0 #15130f);
}
html body[data-estilo="nocturna"] .b1-hero .b1-photo {
  position: relative; inset: auto; display: block; width: auto; max-width: none; margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none; transform: none !important; translate: none; animation: none !important;
}
html body[data-estilo="nocturna"] .b1-hero .b1-photo::after { display: none; }
html body[data-estilo="nocturna"] .b1-hero .b1-photo img { display: block; width: 100%; height: 76px; object-fit: cover; border: 2px solid rgba(217, 189, 124, .6); }
html body[data-estilo="nocturna"] .b1-hero .b1-photo figcaption { padding: 6px 0 0; color: #e8e1d0; font-size: 9px; line-height: 1.3; letter-spacing: .12em; }
html body[data-estilo="nocturna"] .b1-hero .b1-photo-1 { grid-column: 1 / -1; }
html body[data-estilo="nocturna"] .b1-hero .b1-photo-1 img { height: clamp(260px, 30vw, 420px); object-fit: contain; background: #0d0c09; border-color: #d9bd7c; }
html body[data-estilo="nocturna"] .b1-hero .b1-photo-1 figcaption { padding-top: 8px; font-size: 10px; letter-spacing: .16em; }
html body[data-estilo="nocturna"] .b1-hero .b1-photo:not(.b1-photo-1) figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html body[data-estilo="nocturna"] .b1-hero-bottom { grid-column: 1; grid-row: 2; justify-content: flex-start; max-width: none; margin: 0; align-self: start; }
html body[data-estilo="nocturna"] .b1-hero:not(:has(.b1-photo-strip)) .b1-hero-bottom { grid-column: 1; }
/* El cartel de los goblins (lo cuelga b1-goblins.js): en su propia fila,
   bajo la franja, para no tapar texto como cuando iba en absoluto. */
html body[data-estilo="nocturna"] .b1-hero .b1-cartel { position: relative; left: auto; bottom: auto; grid-column: 1; grid-row: 3; justify-self: start; align-self: start; margin: 18px 0 0; }
html body[data-estilo="nocturna"] .b1-hero-bottom p { padding: 6px 10px; background: none; border: 1px solid rgba(241, 236, 224, .35); color: #e8e1d0; }
html body[data-estilo="nocturna"] .b1-hero .b1-motion { background: #f1ece0; color: #15130f; border: 2px solid #15130f; font-weight: 700; }
html body[data-estilo="nocturna"] .b1-hero .b1-down { background: #f1ece0; color: #15130f; border: 2px solid #15130f; animation: none; }

/* La cinta del suelo: donde pisan los goblins. Quieta: con texto que se
   mueve más de cinco segundos haría falta otra pausa. */
html body[data-estilo="nocturna"] .b1-hero .b1-warning { height: 18px; padding: 0; background: repeating-linear-gradient(135deg, #15130f 0 10px, #f2c200 10px 20px); border-block: 2px solid #15130f; }
html body[data-estilo="nocturna"] .b1-hero .b1-warning-track { display: none; }

/* ── Secciones: papel, sin banda alterna ── */
html body[data-estilo="nocturna"] .b1-section,
html body[data-estilo="nocturna"] .b1-section-alt { background: #f1ece0; border-bottom: 0; }
html body[data-estilo="nocturna"] .b1-section + .b1-section { padding-top: 24px; }
html body[data-estilo="nocturna"] .b1-section .b1-kicker { display: inline-block; padding: 2px 8px; background: #15130f; color: #f1ece0; }
html body[data-estilo="nocturna"] .b1-heading h2 { font-size: clamp(30px, 3.6vw, 46px); }

/* Tarjetas: papel con sombra dura; suben a la izquierda al pasar. */
html body[data-estilo="nocturna"] .b1-card,
html body[data-estilo="nocturna"] .b1-work,
html body[data-estilo="nocturna"] .b1-project { border: 2px solid #15130f; border-radius: 3px; background: #fbf8f0; box-shadow: 6px 6px 0 #15130f; transition: translate .14s steps(2, end), box-shadow .14s steps(2, end); }
html body[data-estilo="nocturna"] :is(.b1-card, .b1-work, .b1-project):hover { translate: -2px -2px; box-shadow: 8px 8px 0 #ad2914; }
html body[data-estilo="nocturna"] .b1-card .b1-number { display: inline-block; padding: 2px 6px; color: #fbf8f0; background: #15130f; font-size: 10px; letter-spacing: .16em; }
/* El color del nivel, como los puntos de los filtros de la galería. */
html body[data-estilo="nocturna"] .b1-grid > .b1-card { border-top: 8px solid var(--noc-nivel, #15130f); }
html body[data-estilo="nocturna"] .b1-grid > .b1-card:nth-child(1) { --noc-nivel: #6f9cf0; }
html body[data-estilo="nocturna"] .b1-grid > .b1-card:nth-child(2) { --noc-nivel: #3fc493; }
html body[data-estilo="nocturna"] .b1-grid > .b1-card:nth-child(3) { --noc-nivel: #e0a43a; }
html body[data-estilo="nocturna"] .b1-grid > .b1-card:nth-child(4) { --noc-nivel: #b392ff; }
html body[data-estilo="nocturna"] .b1-grid:not(:has(> .b1-card:nth-child(4))) > .b1-card { --noc-nivel: #15130f; }

/* ── Bloques secundarios: diálogo navy con marco dorado y placa ── */
html body[data-estilo="nocturna"] :is(.b1-steps, .b1-guide > ul, .b1-faq .b1-shell) {
  position: relative; margin-top: 30px; padding: 34px 26px 22px;
  background: #2b3685; color: #f1ece0; border: 3px solid #d9bd7c; border-radius: 2px;
  box-shadow: inset 0 0 0 3px #2b3685, inset 0 0 0 4px rgba(217, 189, 124, .6), 0 0 0 3px #15130f, 9px 9px 0 3px #15130f;
}
html body[data-estilo="nocturna"] :is(.b1-steps, .b1-guide > ul, .b1-faq .b1-shell)::before {
  position: absolute; z-index: 3; top: -21px; left: 22px; padding: 0 4px;
  border-style: solid; border-width: 14px 18px; border-image: url(sprites/jm-placa-x.png) 7 9 fill / 14px 18px / 0 stretch; image-rendering: pixelated;
  color: #f2c200; text-shadow: 1px 1px 0 #15130f; font: 800 11px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  filter: drop-shadow(3px 3px 0 #15130f);
}
html body[data-estilo="nocturna"] .b1-steps::before { content: 'Paso a paso' / ''; }
html body[data-estilo="nocturna"] .b1-guide > ul::before { content: 'Javier' / ''; }
html body[data-estilo="nocturna"] .b1-faq .b1-shell::before { content: 'Dudas' / ''; }

html body[data-estilo="nocturna"] .b1-steps li { border-top: 2px dashed rgba(217, 189, 124, .7); color: #f1ece0; }
html body[data-estilo="nocturna"] .b1-steps li::before { color: #d9bd7c; }
html body[data-estilo="nocturna"] .b1-steps strong { color: #fbf8f0; }
html body[data-estilo="nocturna"] .b1-guide > ul { border-top: 3px solid #d9bd7c; }
html body[data-estilo="nocturna"] .b1-guide li { color: #f1ece0; border-bottom-color: rgba(217, 189, 124, .35); }
html body[data-estilo="nocturna"] .b1-guide li::before { background: #d9bd7c; box-shadow: 3px 3px 0 #15130f; }
html body[data-estilo="nocturna"] .b1-faq .b1-shell { width: min(1248px, calc(100% - 64px)); }
html body[data-estilo="nocturna"] .b1-faq .b1-heading h2 { color: #fbf8f0; }
html body[data-estilo="nocturna"] .b1-faq details { border-top-color: rgba(217, 189, 124, .35); }
html body[data-estilo="nocturna"] .b1-faq summary { color: #fbf8f0; }
html body[data-estilo="nocturna"] .b1-faq summary::marker { color: #d9bd7c; }
html body[data-estilo="nocturna"] .b1-faq details p { color: #e8e1d0; }
html body[data-estilo="nocturna"] :is(.b1-steps, .b1-guide > ul, .b1-faq .b1-shell) a { color: #fbf8f0; }
html body[data-estilo="nocturna"] :is(.b1-steps, .b1-guide > ul, .b1-faq .b1-shell) :is(a, summary):focus-visible { outline: 3px solid #f2c200; outline-offset: 3px; box-shadow: none; }

/* ── Cierre: «Cuéntame tu proyecto» sobre tinta ── */
html body[data-estilo="nocturna"] .b1-contact { background: #15130f radial-gradient(rgba(241, 236, 224, .07) 1px, transparent 1px) 0 0 / 12px 12px; }
html body[data-estilo="nocturna"] .b1-contact h2 {
  width: fit-content; padding: 6px 16px 8px; background: #f1ece0; color: #15130f;
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  font-size: clamp(28px, 3.6vw, 46px);
}
html body[data-estilo="nocturna"] .b1-contact p { color: #e8e1d0; }
html body[data-estilo="nocturna"] .b1-contact .b1-button { border: 3px solid #fbf8f0; box-shadow: 0 0 0 3px #15130f, 6px 6px 0 3px #ad2914; }
html body[data-estilo="nocturna"] .b1-contact .b1-button:hover { transform: none; translate: -3px -3px; box-shadow: 0 0 0 3px #15130f, 9px 9px 0 3px #ad2914; }
html body[data-estilo="nocturna"] .b1-contact .b1-button-primary { background: #2b3685; color: #fff; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
html body[data-estilo="nocturna"] .b1-contact .b1-button-primary::before { content: '▶' / ''; color: #f2c200; }
html body[data-estilo="nocturna"] .b1-contact a:focus-visible { outline: 3px solid #f2c200; outline-offset: 3px; box-shadow: none; }

/* ── Servicios relacionados y pie, en papel ── */
html body[data-estilo="nocturna"] .b1-related { background: #f1ece0; border-block: 2px solid #15130f; }
html body[data-estilo="nocturna"] .b1-related span { padding: 2px 8px; background: #15130f; color: #f1ece0; }
html body[data-estilo="nocturna"] .b1-related a::after { content: ' →' / ''; color: #ad2914; }
html body[data-estilo="nocturna"] footer { background: #f1ece0; border-top: 0; }
html body[data-estilo="nocturna"] .footer-brand { font-family: 'Shippori Mincho', Georgia, serif; font-weight: 600; }

/* ── Móvil: una columna, título → vitrina ── */
@media (max-width: 860px) {
  html body[data-estilo="nocturna"] .b1-hero { grid-template-columns: minmax(0, 1fr); padding: 26px 16px 64px; }
  html body[data-estilo="nocturna"] .b1-hero-copy { padding-bottom: 8px; }
  html body[data-estilo="nocturna"] .b1-photo-strip { grid-column: 1; grid-row: 2; margin: 30px 4px 26px 0; padding: 22px 10px 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  html body[data-estilo="nocturna"] .b1-hero .b1-photo-1 img { height: clamp(220px, 70vw, 340px); }
  html body[data-estilo="nocturna"] .b1-hero .b1-photo img { height: 56px; }
  html body[data-estilo="nocturna"] .b1-hero .b1-photo:nth-child(n + 6) { display: none; }
  html body[data-estilo="nocturna"] .b1-hero-bottom { grid-row: 3; }
  html body[data-estilo="nocturna"] .b1-hero .b1-cartel { grid-row: 4; justify-self: center; }
  html body[data-estilo="nocturna"] .b1-hero .b1-actions { display: grid; grid-template-columns: minmax(0, 1fr) 64px; }
  html body[data-estilo="nocturna"] :is(.b1-steps, .b1-guide > ul, .b1-faq .b1-shell) { padding: 30px 16px 18px; }
  html body[data-estilo="nocturna"] .b1-faq .b1-shell { width: calc(100% - 40px); }
}
@media (max-width: 600px) {
  html body[data-estilo="nocturna"] .b1-hero .b1-actions:not(:has(.b1-whatsapp)) { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .noc-wa, .noc-nav a, html body[data-estilo="nocturna"] :is(.b1-card, .b1-work, .b1-project, .b1-button) { transition: none; }
}