/* ============================================================
   SORA — RESTAURANTES · página de producto + armador por bloques
   Depende de css/base.css. Acento del producto: naranja sobre tinta.
   El armador expone --ph (color de la fase actual) desde el JS:
   todo lo que "sube de nivel" lee esa variable, nada más.
   ============================================================ */

/* ============================================================
   1 · ENCABEZADO
   ============================================================ */
.rhead{ padding:calc(var(--nav-h) + 56px) 0 0; position:relative; overflow:hidden }
.rhead__grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:46px; align-items:center }

.badge{
  display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper);
  padding:8px 14px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
}
.badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--orange); animation:rpulse 1.6s infinite }
@keyframes rpulse{ 50%{ opacity:.25; transform:scale(.7) } }

/* Más chico que el h1 global: «RESTAURANTE,» es una palabra larga que no parte
   y a 7.5vw se desbordaba de su columna hacia la maqueta del celular. */
.rhead h1{ margin-top:18px; font-size:clamp(1.85rem, 6.1vw, 6.4rem) }
.rhead h1 em{
  font-style:normal; background:var(--orange); color:var(--white); border:var(--bd);
  padding:0 .1em; display:inline-block; line-height:.95;
}
.rhead__lead{ margin-top:24px; font-size:1.06rem; max-width:54ch }
.rhead__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px }
.rhead__strip{ display:flex; gap:9px; flex-wrap:wrap; margin-top:28px }

/* ---------- Maqueta: conversación de WhatsApp que se escribe sola ---------- */
.phone{
  border:var(--bd); box-shadow:var(--sh-lg); background:#0b141a;
  width:min(360px,100%); margin-inline:auto; overflow:hidden;
}
.phone__bar{
  display:flex; align-items:center; gap:11px; padding:12px 14px;
  background:#075e54; color:#fff; border-bottom:var(--bw) solid var(--ink);
}
.phone__av{
  width:32px; height:32px; border:2px solid #fff; background:var(--orange);
  display:grid; place-items:center; font-size:.95rem; flex-shrink:0;
}
.phone__who{ font-weight:700; font-size:.86rem; line-height:1.15 }
.phone__who small{
  display:block; font-family:var(--f-mono); font-size:.55rem;
  letter-spacing:.12em; text-transform:uppercase; opacity:.75; font-weight:400;
}
.phone__ok{ margin-left:auto; font-family:var(--f-mono); font-size:.52rem; letter-spacing:.12em; opacity:.8 }

.chat{
  padding:15px 13px; display:grid; gap:9px; align-content:start;
  min-height:352px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    #0b141a;
}
.msg{
  max-width:86%; padding:9px 12px; font-size:.83rem; line-height:1.4;
  border:2px solid var(--ink); color:var(--ink);
  animation:msgin .32s var(--ease) both;
}
.msg--in { background:var(--white);   justify-self:start }
.msg--out{ background:#d9fdd3;        justify-self:end   }
.msg b{ display:block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-bottom:3px }
.msg u{ text-decoration:none; background:var(--yellow); padding:0 3px; box-decoration-break:clone }
@keyframes msgin{ from{ opacity:0; transform:translateY(10px) scale(.96) } }

.msg--typing{ display:flex; gap:5px; align-items:center; padding:12px }
.msg--typing i{ width:7px; height:7px; background:var(--ink); animation:dot 1.1s infinite }
.msg--typing i:nth-child(2){ animation-delay:.16s }
.msg--typing i:nth-child(3){ animation-delay:.32s }
@keyframes dot{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }

@media (max-width:1000px){ .rhead__grid{ grid-template-columns:1fr } }

/* ============================================================
   2 · DOLORES (rejilla de problemas)
   ============================================================ */
.pains{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bw); border:var(--bd); background:var(--ink) }
.pains article{ background:var(--paper); padding:28px 24px }
.pains b{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; color:var(--orange) }
.pains h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.15rem; line-height:1; margin:12px 0 10px }
.pains p{ font-size:.88rem; opacity:.82 }
.pains em{ font-style:normal; display:block; margin-top:12px; font-weight:700; font-size:.84rem; border-top:2px solid var(--ink); padding-top:10px }
@media (max-width:960px){ .pains{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .pains{ grid-template-columns:1fr } }

/* ============================================================
   3 · PAQUETES ARMADOS
   ============================================================ */
.combos{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.combo{
  border:var(--bd); background:var(--white); box-shadow:var(--sh);
  padding:30px; display:flex; flex-direction:column; position:relative;
}
.combo--pop{ background:var(--yellow); transform:translateY(-14px) }
.combo--pop::before{
  content:'EL QUE MÁS PIDEN'; position:absolute; top:-3px; right:-3px;
  background:var(--magenta); color:var(--white); font-family:var(--f-mono);
  font-size:.56rem; letter-spacing:.13em; padding:7px 12px; border:3px solid var(--ink);
}
.combo__kick{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6 }
.combo h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.85rem; line-height:.95; margin:8px 0 0 }
.combo__fase{
  display:inline-flex; align-items:center; gap:8px; margin:14px 0 6px; align-self:flex-start;
  border:3px solid var(--ink); background:var(--c,var(--orange)); color:var(--white);
  padding:6px 11px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.13em;
}
.combo__price{ font-family:var(--f-display); text-transform:uppercase; font-size:1.5rem; line-height:1; margin:12px 0 2px }
.combo__price small{ display:block; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.11em; opacity:.6; margin-top:7px; text-transform:none }
.combo ul{ list-style:none; margin:20px 0; display:grid; gap:9px }
.combo li{ font-size:.89rem; display:flex; gap:10px; align-items:flex-start }
.combo li::before{ content:'▸'; font-weight:700; color:var(--orange) }
.combo li.off{ opacity:.35 }
.combo li.off::before{ content:'×'; color:inherit }
.combo__for{ font-size:.82rem; border-top:2px solid var(--ink); padding-top:12px; margin-bottom:18px; opacity:.8 }
.combo .btn{ margin-top:auto; justify-content:center }
@media (max-width:960px){ .combos{ grid-template-columns:1fr } .combo--pop{ transform:none } }

/* ============================================================
   4 · ARMADOR POR BLOQUES  ← el corazón de la página
   ============================================================ */
/* Color de la fase actual. Vive en :root, no en #armador, porque el destello,
   el cartel de ascenso y el HUD cuelgan del <body> y también lo necesitan. */
:root{ --ph:#8a8a8a }

#armador{ position:relative; transition:background .6s var(--ease), color .6s var(--ease) }
/* Fase máxima: la sección entera se da vuelta */
#armador[data-max="1"]{ background:var(--ink); color:var(--paper) }
#armador[data-max="1"] .sec-head{ border-bottom-color:var(--paper) }
#armador[data-max="1"] .sec-head .mono{ background:var(--paper); color:var(--ink) }

.bld{ display:grid; grid-template-columns:1fr 400px; gap:26px; align-items:start }

/* ---------- 4.1 · Paleta de bloques ---------- */
.bld__palhead{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:16px;
}
.fil{ display:flex; flex-wrap:wrap; gap:0; border:3px solid var(--ink) }
#armador[data-max="1"] .fil{ border-color:var(--paper) }
.fil button{
  border:0; border-right:3px solid var(--ink); background:var(--white); cursor:pointer;
  padding:8px 13px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; transition:.15s;
}
.fil button:last-child{ border-right:0 }
.fil button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); font-weight:700 }

/* En una sola columna hay 19 tarjetas seguidas: el filtro se queda pegado
   arriba para poder acotar la lista sin volver a subir. */
@media (max-width:1080px){
  .bld__palhead{
    position:sticky; top:calc(var(--nav-h) - 2px); z-index:60;
    background:var(--paper); padding:11px 0 10px; margin-bottom:12px;
    border-bottom:3px solid var(--ink);
  }
  #armador[data-max="1"] .bld__palhead{ background:var(--ink) }
}
@media (max-width:600px){
  .bld__palhead{ gap:9px }
  .bld__palhead > .mono{ font-size:.6rem }
  /* Cinco categorías no caben: se deslizan en horizontal en vez de partirse */
  .fil{ flex-wrap:nowrap; overflow-x:auto; width:100%; scrollbar-width:none; -ms-overflow-style:none }
  .fil::-webkit-scrollbar{ display:none }
  .fil button{ flex:1 0 auto; padding:10px 13px; font-size:.62rem }
}
/* En fase 5 la sección hereda color papel: las piezas de fondo claro
   tienen que reclamar tinta o quedan blanco sobre blanco. */
#armador[data-max="1"] .fil button{ border-right-color:var(--paper); color:var(--ink) }
#armador[data-max="1"] .fil button[aria-pressed="true"]{ background:var(--paper); color:var(--ink) }
#armador[data-max="1"] .blk{ color:var(--ink) }
#armador[data-max="1"] .core{ border-color:var(--ph) }

.pal{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media (max-width:1400px){ .pal{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:1080px){ .pal{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px) { .pal{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px) { .pal{ grid-template-columns:1fr } }

/* ---------- 4.2 · Un bloque ---------- */
.blk{
  --c:var(--cyan);
  position:relative; text-align:left; width:100%;
  border:var(--bd); background:var(--white); box-shadow:var(--sh-sm);
  padding:16px 15px 15px; cursor:grab; touch-action:none;
  display:flex; flex-direction:column; gap:7px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), opacity .25s, background .2s;
}
.blk::before{ content:''; position:absolute; inset:0 auto 0 0; width:7px; background:var(--c) }
.blk:hover{ transform:translate(-3px,-3px); box-shadow:var(--sh) }
.blk:active{ cursor:grabbing }
.blk:focus-visible{ outline:3px solid var(--magenta); outline-offset:3px }

.blk__top{ display:flex; align-items:center; gap:9px; padding-left:9px }
/* Reemplaza al emoji: número de orden en caja, del mismo idioma que el resto */
.blk__no{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.06em; font-weight:700;
  border:2px solid currentColor; padding:2px 6px; line-height:1; opacity:.7;
}
.blk__cat{ font-family:var(--f-mono); font-size:.53rem; letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin-left:auto }
.blk h4{ font-family:var(--f-display); text-transform:uppercase; font-size:.98rem; line-height:1; padding-left:9px }
.blk p{ font-size:.79rem; line-height:1.42; opacity:.78; padding-left:9px }
.blk__meta{ display:flex; align-items:center; gap:8px; margin-top:auto; padding:9px 0 0 9px }
.blk__pw{
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.1em;
  background:var(--ink); color:var(--paper); padding:3px 7px;
}
.blk__inv{ display:flex; gap:2px; margin-left:auto; font-family:var(--f-mono); font-size:.7rem; letter-spacing:-.02em; opacity:.75 }
.blk__add{
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
  border:2px solid var(--ink); padding:3px 7px; background:var(--c);
}
/* En pantalla táctil no se arrastra: se toca. La etiqueta dice lo que toca. */
.blk__add i{ font-style:normal }
.blk__add .tch{ display:none }
@media (hover:none){
  .blk__add .dsk{ display:none }
  .blk__add .tch{ display:inline }
}

/* Ya está en el proyecto. Sigue vivo: es el único sitio desde donde se
   quita un bloque suelto, ahora que no hay bandeja de fichas. */
.blk.is-used{ opacity:.44; filter:grayscale(1); cursor:pointer }
.blk.is-used:hover{ opacity:.72; transform:none; box-shadow:var(--sh-sm) }
.blk.is-used::after{
  content:'En el proyecto · Quitar ✕'; position:absolute; inset:auto 0 0 0;
  background:var(--ink); color:var(--paper); text-align:center;
  font-family:var(--f-mono); font-size:.52rem; letter-spacing:.14em;
  text-transform:uppercase; padding:4px;
}
.blk.is-used:hover::after{ background:var(--orange); color:var(--white) }
/* Oculto por filtro de categoría */
.blk.is-off{ display:none }

/* Clon que sigue al dedo / al cursor */
.blk--ghost{
  position:fixed; z-index:9990; pointer-events:none; margin:0;
  box-shadow:var(--sh-lg); transform:rotate(-3deg) scale(1.04);
  transition:none; opacity:.96;
}
.blk--ghost.is-over{ transform:rotate(2deg) scale(1.1); box-shadow:14px 14px 0 var(--magenta) }
.blk.is-dragging{ opacity:.22 }

/* ---------- 4.3 · Columna del núcleo (sticky) ---------- */
.bld__core{ position:sticky; top:calc(var(--nav-h) + 16px); display:grid; gap:14px }

.panel{ border:var(--bd); background:var(--white); box-shadow:var(--sh); padding:18px }
#armador[data-max="1"] .panel{ background:#181818; color:var(--paper); box-shadow:8px 8px 0 var(--ph) }

/* ---------- 4.4 · El núcleo que sube de fase ---------- */
.core{
  position:relative; overflow:hidden; padding:26px 18px 18px; text-align:center;
  border:var(--bd); background:var(--ink); color:var(--paper);
  box-shadow:var(--sh);
  transition:box-shadow .4s var(--ease), transform .2s var(--ease);
}
#armador[data-max="1"] .core{ box-shadow:8px 8px 0 var(--ph) }

/* El núcleo ES la zona de soltar: encabeza la columna anclada, así que
   el contador y el blanco de arrastre van siempre juntos y a la vista. */
.core__drop{
  position:relative; z-index:2; margin-top:15px; padding-top:12px;
  border-top:3px dashed rgba(242,240,235,.3);
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.6; line-height:1.7;
  transition:background .15s, color .15s, opacity .15s;
}
.core__drop .tch{ display:none }
@media (hover:none){
  .core__drop .dsk{ display:none }
  .core__drop .tch{ display:block }
}
.core.is-over{ transform:scale(1.015); box-shadow:0 0 0 5px var(--ph), var(--sh) }
.core.is-over .core__drop{
  background:var(--ph); color:var(--ink); opacity:1; font-weight:700;
  border-top-color:var(--ph); margin-top:12px; padding:9px 6px;
}
.core.is-shake{ animation:shake .5s var(--ease) }
@keyframes shake{
  0%,100%{ transform:translate(0,0) }
  15%{ transform:translate(-6px,3px) } 30%{ transform:translate(6px,-4px) }
  45%{ transform:translate(-5px,-3px) } 60%{ transform:translate(5px,4px) }
  80%{ transform:translate(-3px,2px) }
}

/* Capa de chispas y rayos, detrás del contenido */
.core__fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.core__lvl,.core__orb,.core__fase,.core__say{ position:relative; z-index:2 }

/* Aro exterior: anillos duros, cero difuminado */
/* Los anillos del orbe son box-shadow: se salen 18px por cada lado y tapan
   lo que tengan encima o debajo. De ahí los márgenes de 24px/30px. */
.core__orb{
  position:relative; width:118px; height:118px; margin:24px auto 0;
  display:grid; place-items:center;
  border:4px solid var(--ph); background:var(--ink);
  box-shadow:0 0 0 5px var(--ink), 0 0 0 9px var(--ph), 0 0 0 15px var(--ink), 0 0 0 18px var(--ph);
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.core__orb::before,
.core__orb::after{
  content:''; position:absolute; inset:-10px; border:3px solid var(--ph);
  animation:ring 2.6s linear infinite; opacity:0;
}
.core__orb::after{ animation-delay:1.3s }
@keyframes ring{
  0%  { transform:scale(1)   rotate(0deg);   opacity:.85 }
  100%{ transform:scale(1.9) rotate(140deg); opacity:0 }
}
.core[data-lvl="0"] .core__orb::before,
.core[data-lvl="0"] .core__orb::after{ animation:none }

.core__n{ font-family:var(--f-display); font-size:2.7rem; line-height:.85; color:var(--ph) }
.core__n small{ display:block; font-family:var(--f-mono); font-size:.5rem; letter-spacing:.16em; opacity:.6; color:var(--paper); margin-top:5px }

.core__fase{
  margin-top:30px; font-family:var(--f-display); text-transform:uppercase;
  font-size:1.35rem; line-height:.92; color:var(--ph); letter-spacing:-.02em;
}
.core__lvl{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.2em; opacity:.65; display:block; color:var(--paper); z-index:3 }
.core__say{ font-size:.79rem; opacity:.72; margin-top:8px; min-height:2.4em; padding:0 6px }

/* Chispas que suben cuando hay energía */
.core__spark{
  position:absolute; bottom:-10px; width:5px; height:14px; background:var(--ph);
  animation:spark var(--d,1.6s) linear infinite; animation-delay:var(--t,0s); opacity:0;
}
@keyframes spark{
  0%  { transform:translateY(0)      scaleY(.5); opacity:0 }
  15% { opacity:1 }
  100%{ transform:translateY(-230px) scaleY(1.6); opacity:0 }
}
.core[data-lvl="0"] .core__spark{ display:none }

/* Rayos: sólo de fase 3 en adelante */
.core__bolt{ position:absolute; width:26px; opacity:0; pointer-events:none }
.core[data-lvl="3"] .core__bolt,
.core[data-lvl="4"] .core__bolt,
.core[data-lvl="5"] .core__bolt{ animation:bolt 1.7s steps(1) infinite; animation-delay:var(--t,0s) }
@keyframes bolt{ 0%,88%{ opacity:0 } 90%,94%{ opacity:1 } 96%{ opacity:0 } 98%{ opacity:.8 } }

/* Destello a pantalla completa al subir de fase */
/* Sin mix-blend-mode: en fase 5 el color es blanco y "multiply" lo anularía */
.flash{ position:fixed; inset:0; z-index:9995; pointer-events:none; background:var(--ph); opacity:0 }
.flash.go{ animation:flash .42s ease-out }
@keyframes flash{ 0%{ opacity:0 } 22%{ opacity:.8 } 100%{ opacity:0 } }

/* Cartel de ascenso */
.levelup{
  position:fixed; left:50%; top:38%; z-index:9996; transform:translate(-50%,-50%);
  pointer-events:none; text-align:center; opacity:0;
  border:var(--bd); background:var(--ink); color:var(--ph);
  box-shadow:12px 12px 0 var(--ph); padding:18px 30px;
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.3rem,4.6vw,2.6rem); line-height:.92;
}
.levelup small{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; color:var(--paper); opacity:.7; margin-bottom:8px }
.levelup.go{ animation:levelup 1.5s var(--ease) }
@keyframes levelup{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.5)  rotate(-8deg) }
  16% { opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(2deg) }
  26% { transform:translate(-50%,-50%) scale(1)   rotate(0deg) }
  78% { opacity:1; transform:translate(-50%,-50%) scale(1) }
  100%{ opacity:0; transform:translate(-50%,-58%) scale(.94) }
}

/* ---------- 4.5 · Medidores ---------- */
.mtr + .mtr{ margin-top:14px }
.mtr__lbl{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase;
}
.mtr__lbl b{ font-size:.72rem; letter-spacing:.06em }
.mtr__bar{ height:16px; border:3px solid var(--ink); background:var(--paper); position:relative; overflow:hidden }
#armador[data-max="1"] .mtr__bar{ border-color:var(--paper); background:#0b0b0b }
.mtr__fill{
  position:absolute; inset:0 auto 0 0; width:0%; background:var(--ph);
  transition:width .55s var(--ease), background .45s var(--ease);
  background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 6px, transparent 6px 12px);
}

/* Barra de inversión: escalones, no cifras */
.inv__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px }
.inv__steps span{
  height:26px; border:3px solid var(--ink); background:var(--paper);
  display:grid; place-items:center; font-family:var(--f-display); font-size:.9rem;
  transition:background .35s var(--ease), color .35s;
}
#armador[data-max="1"] .inv__steps span{ border-color:var(--paper); background:#0b0b0b; color:var(--paper) }
.inv__steps span.on{ background:var(--ph); color:var(--ink) }
/* La regla invertida gana por especificidad: hay que repetir el estado encendido */
#armador[data-max="1"] .inv__steps span.on{ background:var(--ph); color:var(--ink) }
.inv__note{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-top:8px; display:block }
/* Las sinergias ya no ocupan panel propio: una línea basta para que los
   puntos extra no aparezcan salidos de la nada. */
.syn-note{ margin-top:5px }
.syn-note.on{ opacity:1; color:var(--orange); font-weight:700 }

/* Estadísticas del negocio */
.stats{ display:grid; gap:11px }
.stat__lbl{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.11em; text-transform:uppercase; margin-bottom:4px }
.stat__lbl b{ color:var(--ph) }
.stat__bar{ height:9px; border:2px solid var(--ink); background:var(--paper); overflow:hidden }
#armador[data-max="1"] .stat__bar{ border-color:var(--paper); background:#0b0b0b }
/* display:block obligatorio: es un <i>, y en inline el alto y el ancho no aplican */
.stat__fill{ display:block; height:100%; width:0%; background:var(--ph); transition:width .6s var(--ease), background .45s }

/* ---------- 4.8 · Pie del armador ---------- */
.bld__foot{ display:grid; gap:9px }
.bld__foot .btn{ justify-content:center; width:100% }
.bld__foot .btn--ghost{ border-width:3px }
#armador[data-max="1"] .bld__foot .btn--ghost{ color:var(--paper); border-color:var(--paper) }
#armador[data-max="1"] .bld__foot .btn--ghost:hover{ background:var(--paper); color:var(--ink) }

.snd{
  display:flex; align-items:center; gap:8px; justify-content:center; cursor:pointer;
  background:none; border:0; font-family:var(--f-mono); font-size:.56rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:.6; padding:4px;
}
.snd:hover{ opacity:1 }
.snd[aria-pressed="true"]{ opacity:1; color:var(--orange) }

/* ---------- 4.9 · HUD flotante en móvil ---------- */
.hud{
  position:fixed; inset:auto 0 0 0; z-index:790; display:none;
  align-items:center; gap:12px; padding:10px 14px;
  background:var(--ink); color:var(--paper); border-top:var(--bw) solid var(--ph);
  transform:translateY(110%); transition:transform .3s var(--ease), border-color .4s;
}
.hud.on{ transform:none }
.hud__f{ font-family:var(--f-display); text-transform:uppercase; font-size:.95rem; line-height:1; color:var(--ph) }
.hud__f small{ display:block; font-family:var(--f-mono); font-size:.5rem; letter-spacing:.14em; opacity:.6; color:var(--paper) }
.hud__bar{ flex:1; height:10px; border:2px solid var(--paper); overflow:hidden }
.hud__bar i{ display:block; height:100%; width:0; background:var(--ph); transition:width .5s var(--ease) }
.hud a{ background:var(--ph); color:var(--ink); border:2px solid var(--paper); padding:8px 12px; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; font-weight:700; flex-shrink:0 }
@media (max-width:1080px){ .hud{ display:flex } }

/* ============================================================
   4.10 · ADAPTACIONES DEL ARMADOR
   Van al final de la sección a propósito: pisan las reglas base
   de arriba, y con la misma especificidad gana la última.
   ============================================================ */

/* ---- Una sola columna: la barra lateral entera se metía ANTES de los
   bloques y había que bajar media pantalla para ver el primero.
   Con display:contents sus piezas pasan a ser hijas de .bld y las
   intercalamos: núcleo → poder → BLOQUES → cifras → botones. ---- */
@media (max-width:1080px){
  .bld{ grid-template-columns:1fr; gap:14px }
  .bld__core{ position:static; display:contents }
  .bld__core > .core     { order:1 }
  .bld__core > .mtrs     { order:2 }
  .bld__pal              { order:3 }
  .bld__core > .stats    { order:4 }
  .bld__core > .bld__foot{ order:5 }
}

/* ---- Portátil de 768 px de alto: la columna anclada no cabía entera y
   el pie quedaba siempre debajo del borde. La apretamos hasta que entre:
   por debajo de este alto la columna completa cabe sin desplazar. ---- */
@media (min-width:1081px) and (max-height:950px){
  .bld__core{ gap:11px }
  .bld__core .panel{ padding:15px }
  .core{ padding:18px 16px 14px }
  .core__orb{ width:96px; height:96px; margin:17px auto 0 }
  .core__n{ font-size:2.2rem }
  .core__fase{ margin-top:23px; font-size:1.15rem }
  .core__say{ font-size:.74rem; min-height:0; margin-top:6px }
  .core__drop{ margin-top:12px; padding-top:10px }
  .bld__core .stats{ grid-template-columns:1fr 1fr; gap:11px 15px }
}

/* ============================================================
   5 · COMPARATIVA
   ============================================================ */
.matrix{ overflow-x:auto; border:var(--bd); box-shadow:var(--sh); background:var(--white) }
.matrix table{ border-collapse:collapse; width:100%; min-width:720px }
.matrix th,.matrix td{ border:2px solid var(--ink); padding:12px 14px; text-align:center; font-size:.84rem }
.matrix thead th{
  background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; position:sticky; top:0;
}
.matrix tbody th{ text-align:left; font-weight:700; background:var(--paper); font-size:.8rem; position:sticky; left:0 }
.matrix tbody td.y{ background:var(--yellow); font-weight:700 }
.matrix tbody td.n{ opacity:.32 }
.matrix tbody tr:hover td{ background:var(--cyan) }
.matrix tbody tr:hover td.n{ background:var(--cyan); opacity:.55 }
.matrix caption{
  caption-side:top; text-align:left; background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:9px 14px;
}

/* ============================================================
   6 · PROCESO
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bw); border:var(--bd); background:var(--ink) }
.steps article{ background:var(--paper); padding:28px 24px }
.steps b{ font-family:var(--f-display); font-size:2.8rem; line-height:.85; display:block; color:var(--c,var(--orange)); -webkit-text-stroke:2px var(--ink) }
.steps h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.08rem; margin:12px 0 8px }
.steps p{ font-size:.86rem; opacity:.8 }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr } }

/* ============================================================
   7 · FAQ
   ============================================================ */
.faq{ border:var(--bd); background:var(--white); box-shadow:var(--sh) }
.faq details{ border-bottom:3px solid var(--ink) }
.faq details:last-child{ border-bottom:0 }
.faq summary{
  cursor:pointer; padding:20px 22px; font-family:var(--f-display); text-transform:uppercase;
  font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:16px; transition:.2s;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; font-size:1.4rem; line-height:1 }
.faq details[open] summary{ background:var(--orange); color:var(--white) }
.faq details[open] summary::after{ content:'–' }
.faq summary:hover{ background:var(--yellow) }
.faq details[open] summary:hover{ background:var(--orange) }
.faq p{ padding:0 22px 22px; font-size:.92rem; opacity:.85; max-width:76ch }

/* ============================================================
   8 · AJUSTES MÓVIL
   ============================================================ */
@media (max-width:600px){
  .rhead{ padding-top:calc(var(--nav-h) + 34px) }
  .rhead__lead{ font-size:.97rem }
  .rhead__cta .btn{ width:100%; justify-content:center }
  .chat{ min-height:300px }
  .combo{ padding:24px 20px }
  .panel{ padding:15px }

  /* ---- Núcleo: mismo golpe visual, la mitad de alto ---- */
  .core{ padding:18px 14px 16px }
  .core__orb{ width:92px; height:92px; margin:18px auto 0 }
  .core__n{ font-size:2.15rem }
  .core__fase{ margin-top:24px; font-size:1.18rem }
  .core__say{ font-size:.76rem; min-height:0; margin-top:7px }
  .core__drop{ margin-top:12px; padding-top:10px; font-size:.52rem }

  /* ---- Las cuatro cifras del negocio, en dos por dos ---- */
  .stats{ grid-template-columns:1fr 1fr; gap:12px 15px }

  /* ---- Bloques: caben más en pantalla sin perder el texto ---- */
  .pal{ gap:11px }
  .blk{ padding:13px 12px 12px; gap:6px; box-shadow:var(--sh-sm) }
  .blk h4{ font-size:1.02rem }
  .blk p{ font-size:.81rem; line-height:1.4 }
  .blk__meta{ padding-top:8px }
  .blk.is-used::after{ font-size:.5rem; padding:3px }

  .bld__foot{ gap:10px }

  /* ---- HUD: en 360 px se apretaba hasta salirse ---- */
  .hud{ gap:9px; padding:9px 11px }
  .hud__f{ font-size:.85rem; max-width:44% }
  .hud__f small{ font-size:.46rem; letter-spacing:.1em }
  .hud a{ padding:8px 11px; font-size:.55rem }
  /* El HUD tapa el pie: le damos aire al final del documento */
  .footer__legal{ padding-bottom:74px }
}

@media (max-width:380px){
  .hud__bar{ display:none }
  .hud__f{ max-width:none; flex:1 }
}

@media (prefers-reduced-motion:reduce){
  .core__spark,.core__bolt,.core__orb::before,.core__orb::after{ display:none }
  .flash.go,.levelup.go,.core.is-shake{ animation:none }
  .levelup.go{ opacity:1 }
  .msg{ animation:none }
}