/* Portada v13 · Paneles (Claude Design), en el laboratorio.
   La maqueta, los colores y las animaciones son los del diseño; sus estilos
   en línea pasan aquí a clases. Todo cuelga de #v13 o de body.v13-on, que solo
   pone v13.js: sin JavaScript no se oculta nada y se ve la portada de siempre.
   La pantalla es fija (sin scroll de página): el encargo pasa en paneles
   dentro del hero, y lo que no cabe se desplaza dentro de su columna. */

body.v13-on {
  --t: #15130f;
  --papel: #f1ece0;
  --crema: #fbf8f0;
  --azul: #2b3685;
  --rojo: #ad2914;
  --oro: #f2c200;
  --gris: #635e51;
  --texto: #4a463c;
  --borde: #d9bd7c;
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--t);
  background: repeating-conic-gradient(rgba(21, 19, 15, .05) 0% 25%, transparent 0% 50%) 0 0 / 48px 48px fixed, var(--papel);
}
html:has(body.v13-on) { height: 100%; overflow: hidden; }
/* La portada de siempre sigue en el DOM (tarifas, fotos, formularios), sin verse. */
body.v13-on > .barra-lectura,
body.v13-on > .salto-contenido,
body.v13-on > header.b1-header,
body.v13-on > main,
body.v13-on > footer { display: none !important; }

.v13 { display: flex; flex-direction: column; height: 100dvh; font: 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--t); }
.v13 *, .v13 *::before, .v13 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.v13 a { color: var(--azul); text-underline-offset: 4px; }
.v13 a:hover { color: var(--rojo); }
.v13 button { font: inherit; cursor: pointer; }
.v13 button:focus-visible, .v13 a:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.v13 img { display: block; max-width: 100%; }
.v13 [hidden] { display: none !important; }
.v13-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── Animaciones del diseño ── */
@keyframes px-reveal { 0% { clip-path: inset(-40px -40px 100% -40px); transform: translateY(10px); } 100% { clip-path: inset(-40px -40px -40px -40px); transform: none; } }
@keyframes px-wipe { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes px-blink { 50% { opacity: 0; } }
@keyframes px-burst { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes b1-marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes b1-crt { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .75; } 98% { opacity: .95; } }
@keyframes b1-pixel-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes px-in { 0%, 99% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes px-pop { 0% { scale: 0; opacity: 0; } 1% { opacity: 1; } 60% { scale: 1.12; } 100% { scale: 1; opacity: 1; } }
@keyframes px-slide { from { transform: translateY(100%); } to { transform: none; } }
@keyframes px-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 3px 0; } }
@keyframes px-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes holo-sweep { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
@keyframes tube-on { 0% { transform: scale(.004, .004); filter: brightness(0); } 8% { transform: scale(.004, .004); filter: brightness(3); } 20% { transform: scale(1.02, .006); filter: brightness(3.5); } 32% { transform: scale(1, 1.04); filter: brightness(2.2) blur(1px); } 38% { transform: scale(1, .98); filter: brightness(.35) blur(1.6px); } 55% { transform: skewX(.8deg); filter: brightness(.55) blur(1px) hue-rotate(14deg); } 65% { transform: skewX(-.6deg); filter: brightness(.7) blur(.6px) hue-rotate(-10deg); } 75% { transform: skewX(.3deg); filter: brightness(.85) blur(.3px) hue-rotate(5deg); } 88% { transform: none; filter: brightness(1.08); } 100% { transform: none; filter: none; } }
@keyframes flash-on { 0% { opacity: 0; } 6%, 30% { opacity: 1; } 42% { opacity: .4; } 60%, 100% { opacity: 0; } }
@keyframes glow-on { 0%, 4% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(1); } 18% { opacity: 1; transform: scale(1.4); } 28%, 100% { opacity: 0; transform: scale(2); } }
@keyframes outer-off { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes term-cut { 0% { opacity: 1; filter: brightness(1); } 14% { opacity: 1; filter: brightness(1.9); } 28%, 72% { opacity: 1; filter: brightness(0); } 100% { opacity: 0; filter: brightness(0); } }
@keyframes web-paint { 0% { opacity: 1; transform: translateY(0); } 40% { opacity: 1; transform: translateY(100%); } 41%, 100% { opacity: 0; transform: translateY(100%); } }
@keyframes web-lines { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes web-fx {
  0% { backdrop-filter: grayscale(1) sepia(.55) brightness(.5) contrast(1.25) blur(1.4px); }
  20% { backdrop-filter: grayscale(1) sepia(.4) brightness(.8) contrast(1.15) blur(.8px); }
  38% { backdrop-filter: grayscale(.7) sepia(.2) brightness(.95) contrast(1.1) blur(.4px); }
  55% { backdrop-filter: saturate(1.9) hue-rotate(24deg) brightness(1.1) contrast(1.05) blur(.2px); }
  72% { backdrop-filter: saturate(1.4) hue-rotate(-14deg); }
  86% { backdrop-filter: saturate(1.1) hue-rotate(5deg); }
  100% { backdrop-filter: none; }
}
@keyframes crt-jitter { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-1px, 0); } 40% { transform: translate(1px, 1px); } 60% { transform: translate(0, -1px); } 80% { transform: translate(1px, 0); } }
@keyframes crt-glitch { 0%, 88%, 100% { transform: none; clip-path: none; } 89% { transform: translateX(9px) skewX(-6deg); clip-path: inset(32% 0 52% 0); } 90% { transform: translateX(-6px); clip-path: inset(58% 0 22% 0); } 91% { transform: translateX(3px); } 92% { transform: none; clip-path: none; } 96% { transform: translateX(-2px); } 97% { transform: none; } }
@keyframes crt-roll { from { transform: translateY(-30vh); } to { transform: translateY(130vh); } }
@keyframes crt-grain { 0% { background-position: 0 0; } 25% { background-position: -37px 21px; } 50% { background-position: 19px -43px; } 75% { background-position: -11px 33px; } 100% { background-position: 41px -7px; } }
@keyframes crt-breathe { 0%, 100% { filter: brightness(1) contrast(1.05); } 50% { filter: brightness(.9) contrast(1.1); } }
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .92; } 50% { opacity: .98; } }

/* Mientras arranca la intro, el hero espera. */
body.v13-intro .v13-hero, body.v13-intro .v13-hero * { animation-play-state: paused !important; }
@media (max-height: 640px) { .v13-bajo { display: none !important; } }
.v13-solo-movil { display: none; }
@media (max-width: 600px) { .v13-movil-oculto { display: none !important; } .v13-solo-movil { display: inline; } }
@media (prefers-reduced-motion: reduce) {
  .v13 *, .v13 *::before, .v13 *::after { animation: none !important; transition: none !important; }
}
/* Modo 8-bit (código Konami o cinco toques al logotipo) */
body.v13-8bit .v13 * { font-family: ui-monospace, Menlo, Consolas, monospace !important; }
body.v13-8bit .v13 { filter: url(#v13-8bit); }
body.v13-8bit .v13::after { content: ""; position: fixed; inset: 0; z-index: 998; pointer-events: none; background: repeating-conic-gradient(rgba(21, 19, 15, .08) 0 25%, transparent 0 50%) 0 0 / 4px 4px; mix-blend-mode: multiply; }

/* ── Cabecera ── */
.v13-cab { position: sticky; top: 0; z-index: 20; background: rgba(241, 236, 224, .97); border-bottom: 2px solid var(--t); }
.v13-cab-in { max-width: 1320px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v13-marca { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--t) !important; }
.v13-marca-logo { width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border: 2px solid var(--t); box-shadow: 3px 3px 0 var(--t); }
.v13-marca-logo img { width: 32px; height: 32px; object-fit: contain; }
.v13-marca-nombre { font: 600 17px/1 'Shippori Mincho', Georgia, serif; }
.v13-extras { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.v13-extra { min-height: 44px; padding: 6px 12px; border: 2px solid var(--t); background: var(--crema); color: var(--t); box-shadow: 3px 3px 0 var(--t); font: 800 10.5px/1 Inter, sans-serif !important; letter-spacing: .14em; text-transform: uppercase; transition: translate .14s steps(2, end); }
.v13-extra:hover { translate: -2px -2px; }
.v13-extra[aria-expanded="true"] { background: var(--t); color: var(--papel); box-shadow: 3px 3px 0 var(--rojo); }
.v13-cab-der { display: flex; align-items: center; gap: 14px; }
.v13-sonido { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 2px solid var(--t); background: var(--t); color: var(--oro); box-shadow: 3px 3px 0 var(--t); font: 800 11px/1 Inter, sans-serif !important; letter-spacing: .14em; text-transform: uppercase; transition: translate .14s steps(2, end); }
.v13-sonido:hover { translate: -2px -2px; }
.v13-sonido[aria-pressed="false"] { background: var(--crema); color: var(--gris); }
.v13-wa { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: #25d366; border: 2px solid var(--t); box-shadow: 3px 3px 0 var(--rojo); transition: translate .14s steps(2, end), box-shadow .14s steps(2, end); }
.v13-wa:hover { translate: -3px -3px; box-shadow: 6px 6px 0 var(--rojo); }
.v13-wa svg { width: 26px; height: 26px; fill: #fff; shape-rendering: crispEdges; filter: drop-shadow(1px 1px 0 var(--t)); }

/* Mapa del encargo, en la cabecera */
.v13-mapa { list-style: none; display: flex; align-items: center; }
.v13-mapa li { display: flex; align-items: center; }
.v13-mapa-linea { display: block; width: 12px; height: 0; border-top: 2px dashed var(--t); }
.v13-mapa-linea.on { border-top-style: solid; }
.v13-nodo { position: relative; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 2px dashed var(--t); background: transparent; color: var(--gris); font: 800 10px/1 Inter, sans-serif !important; cursor: default !important; }
.v13-nodo.hecho, .v13-nodo.actual { border-style: solid; color: #fff; }
.v13-nodo.hecho { background: var(--azul); cursor: pointer !important; }
.v13-nodo.actual { background: var(--rojo); box-shadow: 2px 2px 0 var(--t); animation: px-bob 1s steps(2, end) infinite; }
.v13-nodo-rotulo { position: absolute; left: 50%; top: calc(100% + 4px); translate: -50% 0; padding: 2px 5px; background: var(--t); color: var(--papel); font: 800 9px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
@media (max-width: 900px) { .v13-marca-nombre { display: none; } .v13-cab-in { padding: 10px 14px; gap: 10px; } }
/* En el móvil, dos filas bajas: marca, sonido y WhatsApp arriba; los paneles debajo. */
@media (max-width: 600px) {
  .v13-cab-in { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
  .v13-cab-der { margin-left: auto; gap: 8px; }
  .v13-extras { order: 3; flex: 1 1 100%; flex-wrap: nowrap; }
  .v13-extra { flex: 1; min-height: 34px; padding: 4px; box-shadow: 2px 2px 0 var(--t); }
  .v13-marca { min-height: 38px; }
  .v13-marca-logo { width: 36px; height: 36px; box-shadow: 2px 2px 0 var(--t); }
  .v13-marca-logo img { width: 28px; height: 28px; }
  .v13-sonido { min-height: 38px; padding: 4px 10px; box-shadow: 2px 2px 0 var(--t); }
  .v13-wa { width: 38px; height: 38px; box-shadow: 2px 2px 0 var(--rojo); }
  .v13-wa svg { width: 24px; height: 24px; }
}

/* ── Hero: una pantalla ── */
.v13-hero { position: relative; isolation: isolate; overflow: clip; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 14px 24px 64px; border-bottom: 2px solid var(--t); background: var(--papel) radial-gradient(#15130f16 1px, transparent 1px) 0 0 / 12px 12px; text-align: center; color: var(--t); }
.v13-hero.v13-empezado { justify-content: flex-start; }
@media (max-width: 600px) { .v13-hero.v13-empezado { justify-content: flex-end; } .v13-hero { --mando: 112px; padding: 8px 8px calc(var(--mando) + 8px); } }
jm-mundo { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; background: #a0b35a; }
jm-mundo canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.v13-velo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(21, 19, 15, .18), transparent 18%, transparent 82%, rgba(21, 19, 15, .22)); }
.v13-pix { position: absolute; z-index: 1; width: 8px; height: 8px; background: var(--c); box-shadow: 8px 0 var(--c), 0 8px var(--c), -8px 0 var(--c), 0 -8px var(--c); pointer-events: none; animation: px-in .01s var(--d) both, px-blink 1.6s var(--d) steps(1, end) infinite; }
@media (max-width: 767px) { .v13-pix { display: none; } }

/* Fotos de la portada alrededor del título (solo en pantallas anchas y antes de empezar) */
.v13-foto { position: absolute; z-index: 1; margin: 0; padding: 8px 8px 0; background: var(--crema); border: 2px solid var(--t); box-shadow: var(--sombra); transform: rotate(var(--giro)); text-align: left; animation: px-pop .35s var(--d) steps(4, end) both, b1-pixel-drift 6s var(--d2) steps(6, end) infinite; }
.v13-foto img { width: 100%; height: clamp(120px, 12vw, 190px); object-fit: cover; border: 1px solid var(--t); background: #e5dfd0; }
.v13-foto.sm img { height: 95px; }
.v13-foto figcaption { padding: 8px 2px; font-size: 10px; line-height: 1.4; letter-spacing: .06em; font-weight: 700; text-transform: uppercase; color: var(--t); }
.v13-foto.main { width: 13vw; max-width: 205px; }
.v13-foto.mid { width: 11.5vw; max-width: 190px; }
.v13-foto.sm { width: 8.5vw; max-width: 130px; }
.v13-fotos { display: none; }
@media (min-width: 1181px) { .v13-fotos { display: block; } .v13-empezado .v13-fotos { display: none; } }

/* Columna central: título y, al empezar, el HUD y los paneles */
/* Por encima de las líneas del tubo (.v13-crt): el texto se lee nítido; el
   mundo y las fotos siguen debajo. */
.v13-col { position: relative; z-index: 4; width: 100%; max-width: 640px; max-height: 100%; margin: 0 auto; padding: 10px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; align-items: center; }
.v13-empezado .v13-col { max-width: 980px; }
.v13-kicker { font-size: 11px; line-height: 1.7; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo); margin: 0 auto 16px; width: fit-content; padding: 2px 8px; animation: px-reveal .45s .3s steps(6, end) both; }
.v13-h1 { width: fit-content; margin: 0 auto; padding: 8px 18px; position: relative; isolation: isolate; background: none; font: 600 clamp(34px, min(6.4vw, 9vh), 84px)/1.02 'Shippori Mincho', Georgia, serif; letter-spacing: -.025em; color: var(--t); animation: px-wipe-h1 .6s .45s steps(10, end) both; }
/* El papel de los rótulos del inicio (antetítulo, titular, entradilla y
   ayuda): translúcido y con el borde que se deshace en dos bandas de tramado
   (50 % y 25 %). Liso detrás de las letras, para que se lean nítidas. --b es el ancho de cada banda y --p el
   tamaño del píxel. */
.v13-h1, .v13-kicker, .v13-intro-txt, .v13-ayuda { position: relative; isolation: isolate; background: none; }
.v13-h1 { --b: 8px; --p: 4px; }
.v13-kicker, .v13-intro-txt, .v13-ayuda { --b: 4px; --p: 2px; }
.v13-h1::before, .v13-kicker::before, .v13-intro-txt::before, .v13-ayuda::before { content: ""; position: absolute; inset: calc(var(--b) * -2); z-index: -1; padding: var(--b); border: var(--b) solid transparent; background: rgba(241, 236, 224, .68) border-box; -webkit-mask: linear-gradient(#000 0 0) content-box, repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / calc(var(--p) * 2) calc(var(--p) * 2) padding-box, conic-gradient(from 90deg at var(--p) var(--p), #000 25%, transparent 0) 0 0 / calc(var(--p) * 2) calc(var(--p) * 2) border-box; mask: linear-gradient(#000 0 0) content-box, repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / calc(var(--p) * 2) calc(var(--p) * 2) padding-box, conic-gradient(from 90deg at var(--p) var(--p), #000 25%, transparent 0) 0 0 / calc(var(--p) * 2) calc(var(--p) * 2) border-box; }
@keyframes px-wipe-h1 { 0% { clip-path: inset(-20px 100% -20px -20px); } 100% { clip-path: inset(-20px -20px -20px -20px); } }
.v13-ciclo { display: inline-block; margin-top: 14px; padding: 2px 14px 8px; background: var(--rojo); color: var(--crema); box-shadow: 6px 6px 0 var(--t); transform: rotate(-1deg); font: 600 clamp(22px, min(4.2vw, 6vh), 56px)/1.15 'Shippori Mincho', Georgia, serif; letter-spacing: -.02em; min-width: min(100%, 10.5em); min-height: 1.45em; animation: px-pop .4s .95s steps(4, end) both; }
.v13-caret { display: inline-block; width: .45em; height: .9em; margin-left: 4px; vertical-align: -.08em; background: var(--crema); animation: px-blink .9s steps(1, end) infinite; }
.v13-intro-txt { max-width: 520px; margin: min(26px, 2.6vh) auto 0; padding: 6px 8px; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--t); text-wrap: pretty; animation: px-reveal .45s 1.2s steps(6, end) both; }
.v13-arranque { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: min(30px, 3vh); animation: px-reveal .45s 2.3s steps(6, end) both; }
.v13-empezar { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 26px; background: var(--azul); color: #fff; border: 3px solid var(--crema); box-shadow: 0 0 0 3px var(--t), 7px 7px 0 3px var(--t); border-radius: 4px; font: 800 13px/1 Inter, sans-serif !important; letter-spacing: .22em; text-transform: uppercase; transition: translate .14s steps(2, end); }
.v13-empezar:hover { translate: -3px -3px; }
.v13-entradas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 22px; }
/* La segunda entrada, la de empresas, en claro: es la otra puerta, no la principal */
.v13-empezar-emp { background: var(--crema); color: #15130f; border-color: #15130f; }
.v13-empezar span { color: var(--oro); animation: px-blink .8s steps(1, end) infinite; }
.v13-ayuda { padding: 2px 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto); font-weight: 700; }
.v13-empezado .v13-kicker, .v13-empezado .v13-ciclo, .v13-empezado .v13-intro-txt, .v13-empezado .v13-arranque { display: none; }
/* Empezado, el título se queda para el lector de pantalla */
.v13-empezado .v13-h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v13-zona { width: 100%; margin-top: 6px; padding-top: 20px; text-align: left; }
.v13-zona:empty { display: none; }

/* ── HUD: mapa (móvil), inventario y monedas ── */
.v13-hud { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 30px; padding: 10px 14px; background: var(--t); color: var(--papel); border: 3px solid var(--borde); border-radius: 2px; box-shadow: inset 0 0 0 3px var(--t), inset 0 0 0 4px rgba(217, 189, 124, .5), 0 0 0 3px var(--t), 6px 6px 0 3px var(--rojo); animation: px-reveal .35s steps(6, end) both; }
.v13-hud-mapa { list-style: none; flex: 1 1 100%; display: flex; align-items: flex-start; padding: 2px 0 10px; border-bottom: 1px dashed rgba(241, 236, 224, .25); }
.v13-hud-mapa li { display: flex; align-items: flex-start; flex: 1; }
.v13-hud-mapa li:first-child { flex: none; }
.v13-hud-mapa .linea { flex: 1; min-width: 8px; height: 0; margin-top: 13px; border-top: 3px dashed rgba(241, 236, 224, .35); }
.v13-hud-mapa .linea.on { border-top: 3px solid var(--papel); }
.v13-hud-mapa button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 2px; background: transparent; border: 0; color: inherit; cursor: default; }
.v13-hud-mapa button.hecho { cursor: pointer; }
.v13-hud-mapa .marca { display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid rgba(241, 236, 224, .35); color: rgba(241, 236, 224, .6); font: 800 11px/1 Inter, sans-serif; }
.v13-hud-mapa .hecho .marca { border-color: var(--crema); background: var(--azul); color: #fff; }
.v13-hud-mapa .actual .marca { border-color: var(--crema); background: var(--rojo); color: #fff; box-shadow: 3px 3px 0 var(--oro); animation: px-bob 1s steps(2, end) infinite; }
.v13-hud-mapa .rot { font: 800 9px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: rgba(241, 236, 224, .6); }
.v13-hud-mapa .hecho .rot { color: var(--papel); }
.v13-hud-mapa .actual .rot { color: var(--oro); }
@media (min-width: 601px) { .v13-hud-mapa { display: none; } }
.v13-inv { flex: 1 1 380px; min-width: 0; display: flex; align-items: center; gap: 10px; }
.v13-inv-eti { flex: none; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.v13-ranuras { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.v13-ranura { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px 8px; border: 2px dashed rgba(241, 236, 224, .3); border-radius: 3px; color: rgba(241, 236, 224, .6); }
.v13-ranura.llena { border-style: solid; border-color: var(--c, var(--crema)); color: var(--papel); animation: px-pop .3s steps(4, end) both; }
.v13-ranura .k { font: 800 8.5px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.v13-ranura .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px/1.3 Inter, sans-serif; }
.v13-bolsa { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.v13-bolsa img { flex: none; width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 #000); animation: px-bob 1.2s steps(2, end) infinite; }
.v13-bolsa-txt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.v13-monedas { font: 600 22px/1 'Shippori Mincho', Georgia, serif; color: var(--oro); }
.v13-bolsa-eti { font: 800 8.5px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }

/* ── Paneles de diálogo ── */
.v13-paneles { display: flex; flex-direction: column; gap: 30px; }
.v13-dlg { position: relative; margin: 0; padding: 30px 22px 16px; background: var(--azul); color: #fff; border: 3px solid var(--borde); border-radius: 2px; box-shadow: inset 0 0 0 3px var(--azul), inset 0 0 0 4px rgba(217, 189, 124, .6), 0 0 0 3px var(--t), 9px 9px 0 3px var(--t); animation: px-reveal .4s steps(6, end) both; }
.v13-dlg.v13-fin { background: var(--t); color: var(--papel); box-shadow: inset 0 0 0 3px var(--t), inset 0 0 0 4px rgba(217, 189, 124, .6), 0 0 0 3px var(--t), 9px 9px 0 3px var(--rojo); animation-duration: .45s; }
.v13-esq { position: absolute; width: 34px; height: 20px; background: url(sprites/jm-esquina.png) 0 0 / 100% 100%; pointer-events: none; image-rendering: pixelated; }
.v13-esq.a { top: 6px; left: 6px; transform: scaleX(-1); }
.v13-esq.b { top: 6px; right: 6px; }
.v13-esq.c { bottom: 6px; left: 6px; transform: scale(-1, -1); }
.v13-esq.d { bottom: 6px; right: 6px; transform: scaleY(-1); }
.v13-placa { position: absolute; z-index: 2; top: -21px; left: 26px; display: block; 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: var(--oro); text-shadow: 1px 1px 0 var(--t); font: 800 11px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; filter: drop-shadow(3px 3px 0 var(--t)); }
.v13-dlg-texto { font-size: 16px; line-height: 1.6; font-weight: 500; }
.v13-tecleo-caret { display: inline-block; width: .5em; height: 1em; margin-left: 3px; vertical-align: -.14em; background: var(--oro); animation: px-blink .9s steps(1, end) infinite; }
.v13-aviso { margin-top: 10px; font-size: 14px; }

.v13-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 2px 10px; margin-top: 10px; animation: px-reveal .3s var(--retraso, 0s) steps(5, end) both; }
.v13-menu.una { display: flex; flex-direction: column; gap: 0; }
.v13-op { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 6px; border: 6px solid transparent; border-radius: 0; background: transparent; color: inherit; text-align: left; font: 700 16px/1.3 Inter, sans-serif !important; }
.v13-op.cursor { border-image: url(sprites/jm-boton.png) 3 fill / 6px / 0 stretch; image-rendering: pixelated; }
.v13-op.elegida { color: var(--oro); }
.v13-op.apagada { opacity: .5; }
.v13-op-cursor { color: var(--oro); font-size: 13px; visibility: hidden; }
.v13-op.cursor .v13-op-cursor, .v13-op.elegida .v13-op-cursor { visibility: visible; }
.v13-op.cursor .v13-op-cursor { animation: px-nudge .6s steps(2, end) infinite; }
.v13-op-textos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v13-op-sub { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .92); }
.v13-op.elegida .v13-op-sub { color: rgba(242, 194, 0, 1); }
.v13-op-der { font: 600 18px/1 'Shippori Mincho', Georgia, serif; white-space: nowrap; color: var(--c, inherit); text-shadow: 2px 2px 0 var(--t); }
.v13-op.volver .v13-op-der { color: rgba(255, 255, 255, .6); }
/* Una lista larga (las cajas del catálogo), en su caja con desplazamiento. */
.v13-desplaza-rot { margin: 12px 0 4px; font: 700 11px/1.3 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.v13-desplaza { max-height: min(48vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 0; border-block: 2px solid rgba(217, 189, 124, .6); scrollbar-color: var(--oro) transparent; }
/* El «IVA» de las cifras doradas, en blanco (v13.js, conIva) */
.v13-iva { color: #fff; }

/* Acabado + ficha del nivel, lado a lado */
.v13-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 22px; align-items: stretch; }
.v13-ficha { position: relative; display: flex; flex-direction: column; perspective: 900px; animation: px-reveal .3s steps(5, end) both; }
.v13-carta { position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 18px 18px; background: var(--crema); color: var(--t); border: 3px solid var(--t); border-radius: 6px; box-shadow: inset 0 0 0 4px var(--c), 6px 6px 0 var(--sombra, var(--t)); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.v13-cinta { position: absolute; z-index: 2; top: -15px; left: 14px; display: flex; align-items: center; gap: 7px; padding: 5px 10px; background: var(--dk); color: #fff; border: 3px solid var(--t); box-shadow: 3px 3px 0 var(--t); font: 800 10.5px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.v13-gema { display: block; flex: none; width: 32px; height: 32px; margin: -12px -4px -12px -10px; background: var(--img) 0 0 / 32px 32px no-repeat; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 var(--t)); }
.v13-num { position: absolute; z-index: 2; top: -13px; right: 14px; padding: 4px 8px; background: var(--crema); border: 2px solid var(--t); font: 800 10px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--t); }
.v13-carta-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v13-carta-fotos img { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; border: 4px solid transparent; border-image: url(sprites/jm-ranura.png) 4 / 4px / 0 stretch; background: #e5dfd0; box-shadow: 3px 3px 0 var(--t); }
/* Con más de tres fotos, una tira que se desliza de tres en tres. El hueco de
   abajo y a la derecha deja ver la sombra de la última. */
.v13-carta-fotos.desliza { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 4px 8px 0; scrollbar-width: thin; scrollbar-color: var(--t) transparent; }
.v13-carta-fotos.desliza img { scroll-snap-align: start; }
.v13-carta-fotos.desliza:focus-visible { outline: 3px solid var(--t); outline-offset: 3px; }
.v13-carta-fotos-n { margin-top: -6px; font-size: 12px; font-weight: 600; color: var(--t); }
.v13-carta-titulo { font: 600 20px/1.2 'Shippori Mincho', Georgia, serif; color: var(--t); }
.v13-carta-para { display: block; margin-top: 4px; font: 800 9.5px/1.3 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--t); color: color-mix(in srgb, var(--dk) 78%, #000); }
/* Texto de las cartas: casi negro y en 500. En 400 y gris, Inter se ve fina
   sobre el crema y las descripciones no se distinguen del fondo (Javier, 5/10/2026). */
.v13-carta-texto { font-size: 14.5px; font-weight: 500; line-height: 1.6; color: var(--t); text-wrap: pretty; }
.v13-carta ul { list-style: none; display: flex; flex-direction: column; gap: 5px; padding-top: 12px; border-top: 1px dashed rgba(21, 19, 15, .3); }
.v13-carta li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--t); }
.v13-carta li::before { content: ""; flex: none; width: 18px; height: 18px; translate: 0 4px; image-rendering: pixelated; background: var(--icono) center / contain no-repeat; }
.v13-carta > :not(.v13-cinta, .v13-num, .v13-holo, .v13-escena) { position: relative; z-index: 1; }
/* La escena del fondo de la carta: hojas del mundo dibujadas en un lienzo de
   pocos píxeles, ampliado sin suavizar y con el borde de arriba tramado. */
.v13-escena { position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 0; display: block; width: calc(100% - 8px); height: auto; image-rendering: pixelated; pointer-events: none; opacity: .62; border-radius: 0 0 3px 3px; -webkit-mask: linear-gradient(#000 0 0) 0 16px / 100% 100% no-repeat, repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 8px / 8px 8px repeat-x, conic-gradient(from 90deg at 4px 4px, #000 25%, transparent 0) 0 0 / 8px 8px repeat-x; mask: linear-gradient(#000 0 0) 0 16px / 100% 100% no-repeat, repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 8px / 8px 8px repeat-x, conic-gradient(from 90deg at 4px 4px, #000 25%, transparent 0) 0 0 / 8px 8px repeat-x; }
/* Sitio para la escena (mide el 30 % del ancho: 240 × 72): el texto solo
   pisa su borde tramado. */
.v13-carta.con-escena { padding-bottom: calc(30% - 22px); }
.v13-holo { position: absolute; inset: 0; z-index: 1; border-radius: 3px; pointer-events: none; mix-blend-mode: overlay; opacity: var(--holo, 0); background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 42%), linear-gradient(115deg, transparent 8%, #ff4f86 20%, #ffc94a 30%, #3dffa2 40%, #3cbcff 50%, #a77bff 60%, #ff4f86 70%, transparent 84%) var(--hx, 50%) 50% / 220% 220% no-repeat, repeating-linear-gradient(125deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 5px); }
.v13-holo.fuerte { mix-blend-mode: hard-light; animation: holo-sweep 3.8s ease-in-out infinite; }
.v13-holo.leyenda { background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 42%), linear-gradient(115deg, transparent 8%, #ff4f86 20%, #ffc94a 30%, #3dffa2 40%, #3cbcff 50%, #a77bff 60%, #ff4f86 70%, transparent 84%) var(--hx, 50%) 50% / 220% 220% no-repeat, repeating-linear-gradient(60deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 5px); animation-duration: 2.6s; }

/* Cantidad */
.v13-cant { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 18px 0 8px; }
.v13-cant button { width: 48px; height: 48px; background: transparent; border: 3px solid var(--crema); border-radius: 4px; color: var(--oro); font: 800 18px/1 Inter, sans-serif !important; }
.v13-cant button:disabled { opacity: .35; cursor: default; }
.v13-cant-valor { min-width: 5.5em; text-align: center; font: 600 34px/1 'Shippori Mincho', Georgia, serif; }
.v13-cant-valor:has(input) { display: flex; align-items: baseline; justify-content: center; gap: 8px; min-width: 0; }
.v13-cant-num { width: 5ch; padding: 2px 4px; background: transparent; color: #fff; border: 0; border-bottom: 3px dashed rgba(242, 194, 0, .7); text-align: center; font: inherit; -moz-appearance: textfield; appearance: textfield; }
.v13-cant-num::-webkit-inner-spin-button, .v13-cant-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.v13-cant-num:focus-visible { outline: 3px solid var(--oro); outline-offset: 4px; }
.v13-cant-uni { font-size: 22px; color: rgba(255, 255, 255, .8); }
.v13-rango { display: block; width: 100%; height: 28px; margin: 4px 0 10px; background: transparent; accent-color: var(--oro); cursor: pointer; }
.v13-rango:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.v13-rango-eje { display: flex; justify-content: space-between; margin-top: -6px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }

/* Encargo listo */
.v13-fin dl { display: flex; flex-direction: column; gap: 8px; font-size: 14px; margin: 6px 0 16px; }
.v13-fin dl > div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px dashed rgba(241, 236, 224, .25); }
.v13-fin dt { opacity: .75; text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.v13-fin dd { text-align: right; font-weight: 700; }
.v13-fin-rotulo { font: 800 10px/1.4 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.v13-fin-total { font: 600 clamp(36px, 6vw, 48px)/1.05 'Shippori Mincho', Georgia, serif; color: var(--oro); animation: px-wipe .5s .2s steps(8, end) both; }
.v13-fin .v13-dlg-texto { margin: 8px 0 16px; font-size: 14.5px; }
.v13-fin-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-top: 14px; }
.v13-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px; background: transparent; color: var(--crema); border: 6px solid transparent; border-image: url(sprites/jm-boton.png) 3 fill / 6px / 0 stretch; image-rendering: pixelated; border-radius: 0; box-shadow: 4px 4px 0 var(--rojo); font: 800 12px/1 Inter, sans-serif !important; letter-spacing: .16em; text-transform: uppercase; text-align: left; transition: translate .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s cubic-bezier(.2, .8, .2, 1), color .2s; }
.v13-cta:hover, .v13-cta.cursor { translate: -2px -2px; box-shadow: 6px 6px 0 var(--rojo); color: var(--oro); }
.v13-fin-aux { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; }
.v13-aux { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; background: transparent; border: 0; color: var(--papel); font: 700 13px/1 Inter, sans-serif !important; text-decoration: underline; text-underline-offset: 4px; transition: color .2s; }
.v13-aux:hover, .v13-aux.cursor { color: var(--oro); }
.v13-aux .v13-op-cursor { display: none; font-size: 11px; }
.v13-aux.cursor .v13-op-cursor { display: inline; visibility: visible; }

/* La leyenda del pie del encargo */
.v13-leyenda { margin: 18px 0 0; padding: 14px 4px 2px; border-top: 1px solid rgba(241, 236, 224, .25); animation: px-reveal .5s .4s steps(6, end) both; }
.v13-leyenda blockquote { margin: 0; font: italic 600 16px/1.5 'Shippori Mincho', Georgia, serif; color: var(--crema); }
.v13-leyenda figcaption { margin-top: 8px; font: 800 10px/1.4 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }

/* Lo que entra en el precio, al pie de la carta */
.v13-carta-precio { margin: 0; padding-top: 10px; border-top: 1px dashed rgba(21, 19, 15, .3); font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--t); text-wrap: pretty; }
.v13-carta-precio strong { color: var(--t); color: color-mix(in srgb, var(--dk) 78%, #000); }

/* Banda de aviso y barrido CRT */
.v13-banda { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 10px 0; overflow: hidden; background: repeating-linear-gradient(135deg, var(--t) 0 10px, var(--rojo) 10px 20px); border-top: 2px solid var(--t); animation: px-slide .4s 2.1s steps(4, end) both; }
.v13-banda-pista { display: flex; width: max-content; background: var(--t); color: var(--papel); font: 700 11px/1.8 Inter, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; animation: b1-marquee-left 24s linear infinite; }
.v13-banda-pista span { flex: none; padding: 8px 25px; white-space: nowrap; }
.v13-crt { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, .18) 100%); animation: b1-crt 3.2s steps(1, end) infinite; }

/* ── Paneles de Galería, Reseñas y Sobre mí ── */
.v13-panel-fondo { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px; background: rgba(21, 19, 15, .55); }
.v13-panel { position: relative; width: 100%; max-width: 640px; max-height: 100%; overflow: auto; padding: 26px 22px 20px; background: var(--crema); border: 3px solid var(--t); border-radius: 6px; box-shadow: 9px 9px 0 var(--t); text-align: left; animation: px-reveal .35s steps(6, end) both; }
.v13-panel-tit { position: absolute; top: 12px; left: 16px; padding: 4px 12px; background: var(--rojo); color: #fff; border: 3px solid var(--t); font: 800 11px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.v13-panel-cerrar { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; background: var(--crema); border: 2px solid var(--t); box-shadow: 3px 3px 0 var(--rojo); font: 400 22px/1 Inter, sans-serif !important; color: var(--t); }
.v13-panel-cuerpo { padding-top: 34px; animation: px-reveal .4s steps(6, end) both; }
/* La galería: un bloque por acabado, con el nombre de su acordeón. */
.v13-galeria { display: flex; flex-direction: column; gap: 20px; }
.v13-gal-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; font: 800 15px/1.2 Inter, sans-serif; color: var(--t); }
.v13-gal-insignia { padding: 4px 7px; background: var(--t); color: var(--papel); font-size: 11px; letter-spacing: .12em; }
.v13-gal-cuenta { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.v13-gal-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.v13-gal-foto { display: block; width: 100%; padding: 0; border: 2px solid var(--t); background: #e5dfd0; box-shadow: 3px 3px 0 var(--t); cursor: zoom-in; }
.v13-gal-foto img { display: block; aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; }
/* Sobre el crema, el oro del foco no llega a 3:1: en rojo. */
.v13 .v13-gal-foto:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.v13-resenas { display: flex; flex-direction: column; gap: 12px; }
.v13-resenas-nota { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--texto); }
.v13-resenas-nota .estrellas { color: #855800; letter-spacing: .08em; }
.v13-resenas-nota strong { color: var(--t); }
.v13-resenas blockquote { padding: 14px 16px; background: var(--crema); border: 2px solid var(--t); box-shadow: 4px 4px 0 var(--t); font-size: 14px; line-height: 1.6; color: var(--texto); }
.v13-resenas cite { display: block; margin-top: 8px; font-style: normal; font-weight: 800; font-size: 12px; color: var(--t); }
.v13-sobre { display: flex; gap: 18px; align-items: flex-start; }
.v13-sobre-logo { flex: none; width: 72px; height: 72px; display: grid; place-items: center; background: #fff; border: 2px solid var(--t); box-shadow: 4px 4px 0 var(--rojo); }
.v13-sobre-logo img { width: 56px; height: 56px; object-fit: contain; }
.v13-sobre-texto p { font-size: 14.5px; line-height: 1.7; color: var(--texto); text-wrap: pretty; }
.v13-sobre-texto p + p { margin-top: 10px; }
.v13-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; font-size: 12px; color: var(--gris); }
.v13-legal nav { display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* Objetivo táctil de 24 px (WCAG 2.5.8): a 12 px de letra y en dos filas
   no llegaban. */
.v13-legal nav a { display: inline-flex; align-items: center; min-height: 24px; }

/* ── Chispas, aviso ── */
.v13-chispas { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.v13-chispas span { position: absolute; width: 6px; height: 6px; background: var(--c); animation: px-burst .5s steps(5, end) forwards; }
.v13-toast { position: fixed; left: 50%; top: 84px; z-index: 150; translate: -50% 0; max-width: calc(100vw - 32px); padding: 10px 16px; background: var(--t); color: var(--oro); border: 3px solid var(--oro); box-shadow: 0 0 0 3px var(--t), 6px 6px 0 3px var(--rojo); font: 800 12px/1.4 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; text-align: center; animation: px-pop .3s steps(4, end) both; }

/* ── Intro: el programa del taller arranca en un tubo ── */
.v13-intro-fuera { position: fixed; inset: 0; z-index: 199; background: #050503; }
.v13-intro-fuera.apaga { animation: outer-off .15s linear .35s forwards; }
.v13-intro-brillo { position: fixed; left: 50%; top: 50%; z-index: 202; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 6px rgba(255, 255, 255, .9), 0 0 40px 18px rgba(242, 194, 0, .45); pointer-events: none; opacity: 0; animation: glow-on 1.8s linear forwards; }
.v13-intro-brillo.apaga { animation: none; }
.v13-tubo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; overflow: hidden; background: radial-gradient(ellipse 60% 40% at 30% 30%, rgba(90, 110, 60, .14), transparent 70%), radial-gradient(ellipse 50% 45% at 72% 68%, rgba(120, 90, 30, .12), transparent 70%), radial-gradient(ellipse at 50% 45%, #1b1e12 0%, #090a06 74%); color: var(--oro); font: 500 clamp(13px, 1.6vw, 16px)/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace; letter-spacing: .06em; text-transform: uppercase; text-shadow: 1.6px 0 rgba(255, 60, 40, .55), -1.6px 0 rgba(60, 210, 255, .4), 0 0 6px rgba(242, 194, 0, .6), 0 0 20px rgba(242, 194, 0, .22); cursor: pointer; animation: tube-on 1.8s linear both; }
.v13-tubo.apaga { animation: term-cut .5s linear forwards; }
/* El logo: trazado por el haz y rellenado en ámbar, monocromo (v13.js,
   animarLogo, que pinta las líneas de barrido): halo, barras que pasan y un
   leve acercamiento de cámara. */
.v13-logo80 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: logo-camara 3.4s cubic-bezier(.2, .7, .2, 1) both; }
.v13-logo80-marco { position: relative; isolation: isolate; width: min(54vh, 78vw); aspect-ratio: 1; }
.v13-logo80 canvas { display: block; width: 100%; height: 100%; filter: brightness(1.25) drop-shadow(0 0 2px rgba(255, 248, 230, .95)) drop-shadow(0 0 8px rgba(255, 170, 60, .8)) drop-shadow(0 0 24px rgba(255, 110, 0, .45)); }
.v13-tubo-capa.barras { inset: 0; display: none; mix-blend-mode: screen; background: linear-gradient(180deg, transparent 0, rgba(242, 194, 0, .07) 50%, transparent 100%) 0 0 / 100% 26% no-repeat; animation: logo-barras 1.7s linear infinite; }
.v13-tubo.con-logo .v13-tubo-capa.barras { display: block; }
.v13-logo80 p { min-height: 1.75em; letter-spacing: .22em; }
@keyframes logo-camara { 0% { transform: scale(1.08) translateY(1.5%); } 100% { transform: none; } }
@keyframes logo-barras { 0% { background-position: 0 -40%; } 100% { background-position: 0 140%; } }
/* El texto de carga (arranque y DOS), en el centro de la pantalla. */
.v13-pantalla { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px 16px; overflow: hidden; font-size: clamp(10.5px, 1.5vw, 17px); line-height: 1.45; letter-spacing: .04em; animation: crt-flicker 2.4s steps(1, end) infinite, crt-jitter .18s steps(1, end) infinite, crt-breathe 1.7s ease-in-out infinite; }
.v13-pantalla-caja { display: flex; flex-direction: column; align-items: flex-start; width: min(100%, 46ch); height: min(31em, 88vh); text-align: left; white-space: pre; }
.v13-pantalla p { margin: 0; min-height: 1.45em; }
.v13-pant-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 24px; width: 100%; margin-bottom: .8em; }
.v13-ascii, .v13-tabla { margin: 0; font: inherit; white-space: pre; }
.v13-ascii { min-height: 5.3em; line-height: 1.05; color: #ffe08a; }
.v13-tabla { margin-top: .8em; line-height: 1.2; }
.v13-dir { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 1ch; margin: .4em 0; }
.v13-dir span.sel { background: var(--oro); color: #0b0c08; text-shadow: none; }
.v13-spin { color: #fff3c4; }
.v13-tubo.v13-salto .v13-pantalla { animation: v13-salto .26s steps(4, end); }
@keyframes v13-salto { 0% { transform: none; } 25% { transform: translateY(-18%) skewX(6deg); filter: brightness(2); } 50% { transform: translateY(32%) scaleY(.6); filter: brightness(.6); } 75% { transform: translateY(-6%); } 100% { transform: none; } }
.v13-tubo-capa { position: absolute; pointer-events: none; }
.v13-tubo-capa.grano { inset: -20px; opacity: .16; mix-blend-mode: screen; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px; animation: crt-grain .45s steps(1, end) infinite; }
.v13-tubo-capa.rodillo { left: 0; right: 0; top: 0; height: 22vh; background: linear-gradient(180deg, transparent, rgba(242, 194, 0, .06) 40%, rgba(255, 255, 255, .08) 50%, rgba(242, 194, 0, .05) 60%, transparent); animation: crt-roll 4.2s linear infinite; }
.v13-tubo-capa.lineas { inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 0, 0, .03) 0 1px, rgba(0, 255, 0, .02) 1px 2px, rgba(0, 0, 255, .03) 2px 3px); }
.v13-tubo-capa.reflejo { inset: 0; background: radial-gradient(3px 3px at 18% 22%, rgba(255, 255, 255, .22), transparent), radial-gradient(2px 2px at 64% 14%, rgba(255, 255, 255, .18), transparent), radial-gradient(4px 3px at 82% 58%, rgba(255, 255, 255, .14), transparent), radial-gradient(2px 2px at 36% 78%, rgba(255, 255, 255, .2), transparent), radial-gradient(60% 40% at 24% 16%, rgba(255, 255, 255, .05), transparent 70%); }
.v13-tubo-capa.vineta { inset: 0; border-radius: 34px / 30px; box-shadow: inset 0 0 0 14px #050503, inset 0 0 90px 30px rgba(0, 0, 0, .85); background: radial-gradient(118% 92% at 50% 50%, transparent 55%, rgba(0, 0, 0, .7) 100%); }
.v13-tubo-capa.destello { inset: 0; z-index: 3; background: radial-gradient(ellipse at 50% 50%, #fff 0%, #fff6d0 45%, #e8e2c8 100%); animation: flash-on 1.8s linear forwards; }
.v13-tubo.apaga .v13-tubo-capa.destello { animation: flash-on 1ms linear forwards; }
.v13-saltar { position: absolute; z-index: 4; right: 20px; bottom: 20px; min-height: 44px; padding: 8px 16px; background: transparent; border: 2px solid var(--oro); color: var(--oro); font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace !important; letter-spacing: .16em; text-transform: uppercase; text-shadow: inherit; box-shadow: 0 0 10px rgba(242, 194, 0, .25); }
.v13-saltar:hover { background: var(--oro); color: #0b0c08; }
.v13-tecla { position: absolute; left: 20px; bottom: 30px; font-size: 11px; opacity: .6; }
/* El aviso de cookies va abajo y por encima de todo: mientras se ve, «Ir al
   taller» y la pista suben arriba para no quedar tapados. El botón
   «Privacidad», en la misma esquina, vuelve al acabar la intro. */
body:has(.consent-banner:not([hidden])) .v13-saltar { top: 20px; bottom: auto; }
body:has(.consent-banner:not([hidden])) .v13-tecla { top: 30px; bottom: auto; }
body.v13-intro .consent-reopen { display: none !important; }
/* Apagada, esperando el gesto que enciende el sonido (v13.js, pedirEncendido) */
.v13-tubo.espera { animation: none; background: #050503; }
.v13-tubo.espera .v13-tubo-capa, .v13-tubo.espera .v13-tecla { display: none; }
.v13-intro-brillo.espera { animation: none; opacity: 0; }
.v13-puerta { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; animation: px-reveal .4s steps(4, end) both; }
.v13-puerta p { margin: 0; font-size: 12px; letter-spacing: .16em; opacity: .8; }
.v13-encender { min-height: 52px; padding: 10px 26px; background: transparent; border: 2px solid var(--oro); color: var(--oro); font: 700 15px/1 ui-monospace, Menlo, Consolas, monospace !important; letter-spacing: .18em; text-transform: uppercase; text-shadow: inherit; box-shadow: 0 0 14px rgba(242, 194, 0, .3); animation: v13-parpadeo 1.1s steps(1, end) infinite; }
.v13-encender:hover, .v13-encender:focus-visible { background: var(--oro); color: #0b0c08; text-shadow: none; animation: none; }
.v13-saltar:focus-visible, .v13-encender:focus-visible { outline: 3px solid #fff3c4; outline-offset: 3px; }
@keyframes v13-parpadeo { 0% { opacity: 1; } 50% { opacity: .55; } }
/* La web se enciende: barrido de pintura y color que vuelve */
.v13-enciende { position: fixed; inset: 0; z-index: 198; pointer-events: none; overflow: hidden; }
.v13-enciende .fx { position: absolute; inset: 0; animation: web-fx 2.4s linear .35s both; }
.v13-enciende .pintura { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(180deg, rgba(255, 248, 214, .85) 0, rgba(255, 248, 214, .25) 3px, rgba(5, 5, 3, .55) 12px, rgba(5, 5, 3, .9) 80px); box-shadow: 0 -6px 18px rgba(255, 248, 214, .45); animation: web-paint 2.4s linear .35s both; }
.v13-enciende .lineas { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .38) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 0, 0, .05) 0 1px, rgba(0, 255, 0, .035) 1px 2px, rgba(0, 0, 255, .05) 2px 3px); animation: web-lines 2.4s linear .35s both; }
.v13-enciende .rodillo { position: absolute; left: 0; right: 0; top: 0; height: 18vh; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .08) 50%, transparent); animation: crt-roll 1.2s linear .65s 2 both; }

/* La lista de ejército del modal, prestada al panel de puntos (v13.js) */
.v13-lista { margin: 16px 0 4px; text-align: left; }
.v13-lista .lista-w40k-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.v13-lista .lista-w40k-label-text { font: 800 10.5px/1.4 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.v13-lista .lista-w40k-hint { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.v13-lista textarea { display: block; width: 100%; min-height: 96px; padding: 10px 12px; background: var(--crema); color: var(--t); border: 3px solid var(--crema); border-radius: 4px; box-shadow: 0 0 0 3px var(--t); font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.v13-lista textarea:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.v13-lista .lista-w40k-detected { margin-top: 8px; font-size: 13px; font-weight: 700; color: #8fe39a; }
.v13-lista .lista-w40k-detected:not(.visible) { display: none; }
.v13-lista .lista-w40k-detected span { color: rgba(255, 255, 255, .6) !important; }
.v13-lista .lista-w40k-wrapper, .v13-lista.lista-w40k-wrapper { background: none; border: 0; padding: 0; }
.v13 .v13-lista .lista-w40k-detected { background: none; border: 0; padding: 0; }
.v13 .v13-lista .lista-w40k-detected strong { color: inherit; }

/* Cantidad a medida: pegar la lista */
.v13-cant-extra { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .25); }
.v13-pegar { display: block; margin-top: 12px; text-align: left; }
.v13-pegar-eti { display: block; margin-bottom: 8px; font: 800 10.5px/1.4 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.v13-pegar textarea { display: block; width: 100%; min-height: 96px; padding: 10px 12px; background: var(--crema); color: var(--t); border: 3px solid var(--crema); border-radius: 4px; box-shadow: 0 0 0 3px var(--t); font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.v13-pegar textarea:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.v13-pegar-visto { margin-top: 8px; font-size: 13px; font-weight: 700; color: #8fe39a; }
.v13-pegar-visto:empty { display: none; }

/* Tus datos, en el panel final (v13.js, formularioDatos) */
.v13-datos { margin: 18px 0 6px; padding: 16px; background: rgba(0, 0, 0, .22); border: 2px dashed rgba(242, 194, 0, .45); border-radius: 4px; text-align: left; }
.v13-d-tit { margin-bottom: 12px; font: 800 11px/1.4 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.v13-d-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px 14px; }
.v13-d-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v13-d-campo.ancho { grid-column: 1 / -1; }
.v13-d-eti { font: 700 12.5px/1.35 Inter, sans-serif; color: var(--papel, #f3ead6); }
.v13-datos input:not([type=checkbox]), .v13-datos textarea { display: block; width: 100%; min-height: 44px; padding: 9px 12px; background: var(--crema); color: var(--t); border: 3px solid var(--crema); border-radius: 4px; box-shadow: 0 0 0 3px var(--t); font: 500 15px/1.4 Inter, sans-serif; }
.v13-datos textarea { min-height: 88px; resize: vertical; }
.v13-datos input:focus-visible, .v13-datos textarea:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.v13-datos input:disabled, .v13-datos textarea:disabled { opacity: .7; }
.v13-datos a { color: var(--oro); }
.v13-d-consent { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 14px; font: 500 13px/1.5 Inter, sans-serif; color: var(--papel, #f3ead6); cursor: pointer; }
.v13-d-consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--oro); }
.v13-d-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.v13-datos .v13-cta { width: 100%; }
.v13-datos .v13-cta:disabled { opacity: .75; cursor: default; }
.v13-d-estado { margin-top: 10px; font: 700 13.5px/1.45 Inter, sans-serif; }
.v13-d-estado:empty { display: none; }
.v13-d-estado.ok { color: #8fe39a; }
.v13-d-estado.error { color: #ff9b8a; }

/* ── Móvil: la cruceta y todo más junto ──
   En pantallas estrechas el mando de consola (v13.js) ocupa el sitio de la
   banda, y el HUD y los paneles se aprietan para que el menú quepa entero. */
.v13-mando { display: none; }
@media (max-width: 600px) {
  .v13-banda { display: none; }
  .v13-mando { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; align-items: center; justify-content: space-between; height: var(--mando); padding: 0 18px; background: var(--t); border-top: 3px solid var(--borde); box-shadow: inset 0 3px 0 var(--t), inset 0 4px 0 rgba(217, 189, 124, .45); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  /* La cruz: un bloque con el borde en píxeles (las sombras dibujan el contorno) */
  .v13-cruz { --c: 32px; display: grid; grid-template-columns: repeat(3, var(--c)); grid-template-rows: repeat(3, var(--c)); filter: drop-shadow(2px 0 0 var(--borde)) drop-shadow(-2px 0 0 var(--borde)) drop-shadow(0 2px 0 var(--borde)) drop-shadow(0 -2px 0 var(--borde)) drop-shadow(3px 3px 0 #000); }
  .v13-cruz button, .v13-cruz-centro { display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: #3b372e; color: var(--oro); font: 400 13px/1 Inter, sans-serif !important; }
  .v13-cruz-arriba { grid-area: 1 / 2; }
  .v13-cruz-izq { grid-area: 2 / 1; }
  .v13-cruz-centro { grid-area: 2 / 2; background: radial-gradient(circle, #24211b 0 7px, #3b372e 8px); }
  .v13-cruz-der { grid-area: 2 / 3; }
  .v13-cruz-abajo { grid-area: 3 / 2; }
  .v13-cruz button.pulsado { background: #24211b; color: #fff3c4; }
  .v13-mando.sin-flechas .v13-cruz button, .v13-mando:not(.con-lr) .v13-cruz-izq, .v13-mando:not(.con-lr) .v13-cruz-der { color: #6b5a1c; }
  /* A y B en diagonal, como en las consolas de bolsillo */
  .v13-ab { display: flex; align-items: center; gap: 12px; }
  .v13-ab button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; background: none; border: 0; color: var(--papel); }
  .v13-boton-a { translate: 0 -12px; }
  .v13-boton-b { translate: 0 10px; }
  .v13-boton-letra { display: grid; place-items: center; width: 50px; height: 50px; border: 3px solid var(--t); border-radius: 50%; background: var(--rojo); color: #fff; box-shadow: 0 0 0 2px var(--borde), 3px 3px 0 2px #000; font: 800 19px/1 Inter, sans-serif; text-shadow: 1px 1px 0 var(--t); }
  .v13-boton-b .v13-boton-letra { background: var(--azul); }
  .v13-ab button.pulsado .v13-boton-letra { translate: 2px 2px; box-shadow: 0 0 0 2px var(--borde), 1px 1px 0 2px #000; filter: brightness(.85); }
  .v13-boton-rot { font: 800 8.5px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--papel); }
  /* Sin «Volver» en el paso, B se apaga: el botón gris, el rótulo legible */
  .v13-mando.sin-volver .v13-boton-b .v13-boton-letra { background: #3b372e; color: #8f8a7e; text-shadow: none; }
  .v13-mando.sin-volver .v13-boton-b .v13-boton-rot { color: #a39e92; }
  /* «Privacidad» pasa al centro del mando, como el botón de SELECT */
  body.v13-on .consent-reopen { left: 50%; right: auto; bottom: 16px; translate: -50% 0; padding: 6px 9px; background: #3b372e; color: var(--papel); border: 2px solid var(--borde); border-radius: 999px; box-shadow: 2px 2px 0 #000; font: 800 9px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
  .v13-panel-fondo { padding: 12px 12px calc(var(--mando) + 12px); }
  /* Escribiendo, el teclado del sistema ya ocupa media pantalla: el mando
     y «Privacidad» se apartan hasta que se sale del campo. */
  .v13-hero:has(:is(input:not([type=checkbox], [type=range]), textarea):focus) { padding-bottom: 8px; }
  .v13-hero:has(:is(input:not([type=checkbox], [type=range]), textarea):focus) .v13-mando,
  body.v13-on:has(.v13-hero :is(input:not([type=checkbox], [type=range]), textarea):focus) .consent-reopen { display: none; }

  /* Todo más junto */
  .v13-col { padding: 6px 10px 6px 6px; }
  .v13-zona { margin-top: 0; padding-top: 2px; }
  .v13-hud { flex-wrap: nowrap; gap: 10px; margin: 0 0 26px; padding: 6px 10px; box-shadow: inset 0 0 0 3px var(--t), inset 0 0 0 4px rgba(217, 189, 124, .5), 0 0 0 3px var(--t), 4px 4px 0 3px var(--rojo); }
  .v13-hud-mapa { flex: 1 1 auto; min-width: 0; padding: 0; border-bottom: 0; }
  .v13-hud-mapa button { gap: 4px; }
  .v13-hud-mapa .marca { width: 22px; height: 22px; border-width: 2px; font-size: 10px; }
  .v13-hud-mapa .linea, .v13-hud-mapa .linea.on { margin-top: 10px; border-top-width: 2px; }
  .v13-hud-mapa .actual .marca { box-shadow: 2px 2px 0 var(--oro); }
  /* En una fila caben seis pasos solo con el rótulo del actual (los botones
     llevan el suyo para el lector de pantalla). */
  .v13-hud-mapa .rot { font-size: 8px; letter-spacing: .1em; }
  .v13-hud-mapa button:not(.actual) .rot { display: none; }
  .v13-hud-mapa .linea { min-width: 4px; }
  .v13-bolsa { gap: 6px; }
  .v13-bolsa img { width: 24px; height: 24px; }
  .v13-monedas { font-size: 18px; white-space: nowrap; }
  .v13-bolsa-eti { max-width: 80px; font-size: 7.5px; line-height: 1.25; text-align: right; }
  .v13-paneles { gap: 24px; }
  .v13-dlg { padding: 22px 12px 10px; box-shadow: inset 0 0 0 3px var(--azul), inset 0 0 0 4px rgba(217, 189, 124, .6), 0 0 0 3px var(--t), 5px 5px 0 3px var(--t); }
  .v13-dlg.v13-fin { box-shadow: inset 0 0 0 3px var(--t), inset 0 0 0 4px rgba(217, 189, 124, .6), 0 0 0 3px var(--t), 5px 5px 0 3px var(--rojo); }
  .v13-esq { width: 26px; height: 15px; }
  .v13-placa { top: -19px; left: 16px; font-size: 10px; }
  .v13-dlg-texto { font-size: 15px; line-height: 1.5; }
  .v13-menu { margin-top: 6px; }
  .v13-op { min-height: 40px; gap: 8px; padding: 2px 4px; font-size: 15px !important; }
  .v13-op-sub { font-size: 12px; line-height: 1.3; }
  .v13-op-der { font-size: 16px; }
  .v13-desplaza { max-height: 44vh; }
  .v13-par { gap: 18px; }
  .v13-carta { gap: 10px; padding: 20px 14px 14px; }
  .v13-carta-titulo { font-size: 18px; }
  .v13-carta-texto { font-size: 14px; line-height: 1.5; }
  .v13-cant { gap: 14px; margin: 12px 0 6px; }
  .v13-cant-valor { font-size: 28px; }
  .v13-fin dl { gap: 6px; margin: 4px 0 12px; }
  .v13-fin-total { font-size: 34px; }
  .v13-fin-ctas { gap: 10px; margin-top: 10px; }
  .v13-datos { margin: 14px 0 4px; padding: 12px; }
  .v13-leyenda { margin-top: 14px; padding-top: 10px; }
  .v13-leyenda blockquote { font-size: 15px; }
}
/* Móviles estrechos: el mando, más junto, para que «Privacidad» quepa en medio */
@media (max-width: 360px) {
  .v13-mando { padding: 0 12px; }
  .v13-cruz { --c: 28px; }
  .v13-ab { gap: 10px; }
  .v13-boton-letra { width: 44px; height: 44px; font-size: 17px; }
}
/* Móviles bajos: el mando, más pequeño */
@media (max-width: 600px) and (max-height: 700px) {
  .v13-hero { --mando: 96px; }
  .v13-cruz { --c: 27px; }
  .v13-boton-letra { width: 44px; height: 44px; font-size: 17px; }
}

/* ── Los modales de la web, con la estética de la v13 ──
   Tarifas, niveles, Figuras 3D, empresas y la consulta de proyecto son los
   de la portada de siempre (sus formularios, su envío); aquí solo cambia el
   aspecto (Javier, 5/10/2026): la cabecera es un diálogo azul con el marco
   de oro, el rótulo va en la placa roja y los botones en el marco de píxel. */
body.v13-on .modal-overlay { background: rgba(21, 19, 15, .62); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.v13-on .modal-box { background: var(--crema); border: 3px solid var(--borde); border-radius: 2px; box-shadow: inset 0 0 0 3px var(--crema), 0 0 0 3px var(--t), 9px 9px 0 3px var(--t); font-family: Inter, system-ui, sans-serif; animation: px-reveal .35s steps(6, end) both; }
body.v13-on .modal-box::before { display: none; }
body.v13-on .modal-head { margin: 6px 6px 0; padding: 26px 26px 20px; background: var(--azul); color: #fff; border-bottom: 3px solid var(--t); box-shadow: inset 0 0 0 3px var(--azul), inset 0 0 0 4px rgba(217, 189, 124, .6); }
body.v13-on .modal-tier-label { display: inline-block; margin-bottom: 12px; 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: var(--oro); text-shadow: 1px 1px 0 var(--t); font: 800 11px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; filter: drop-shadow(3px 3px 0 var(--t)); }
body.v13-on .modal-title { color: #fff; font-family: 'Shippori Mincho', Georgia, serif; font-weight: 600; padding-right: 44px; }
body.v13-on .modal-head p, body.v13-on #proyecto .proyecto-intro { color: #fff; }
body.v13-on #proyecto .proyecto-paso { color: var(--oro); }
body.v13-on .modal-close-btn { top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--crema); color: var(--t); border: 2px solid var(--t); border-radius: 0; box-shadow: 3px 3px 0 var(--rojo); font: 400 22px/1 Inter, sans-serif; }
body.v13-on .modal-close-btn:hover { color: var(--rojo); translate: -1px -1px; }
body.v13-on .modal-body .form-label { color: var(--texto); font: 800 10.5px/1.4 Inter, sans-serif; letter-spacing: .16em; }
body.v13-on .modal-body :is(.form-input, .form-textarea, .form-select) { background-color: #fff; border: 2px solid var(--t); border-radius: 2px; box-shadow: 3px 3px 0 rgba(21, 19, 15, .16); }
body.v13-on .modal-overlay :is(.btn-primary, .btn-next, .btn-mail) { background: transparent; color: var(--crema); border: 6px solid transparent; border-image: url(sprites/jm-boton.png) 3 fill / 6px / 0 stretch; image-rendering: pixelated; border-radius: 0; box-shadow: 4px 4px 0 var(--rojo); font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
body.v13-on .modal-overlay :is(.btn-primary, .btn-next, .btn-mail):hover { transform: none; translate: -2px -2px; box-shadow: 6px 6px 0 var(--rojo); color: var(--oro); }
body.v13-on .modal-overlay .btn-wa { border: 2px solid var(--t); border-radius: 0; box-shadow: 4px 4px 0 var(--t); font-weight: 800; }
body.v13-on .modal-overlay :is(.step-num, .tar-card, .proyecto-opcion) { border-radius: 2px; }

/* Las tarifas, en su modal (index.html, #modal-tarifas; lo abre v13.js). Por
   debajo de los demás modales: el de un nivel se abre encima. Enseña el
   grupo de quien ha elegido, particulares o empresas. */
#modal-tarifas { z-index: 790; }
body.v13-on .tarifas-box { max-width: 1180px; }
#modal-tarifas #tarifas { padding: 0; background: transparent; }
#modal-tarifas #tarifas > .container { max-width: none; padding: 0; }
#modal-tarifas .section-head { margin-bottom: 26px; }
#modal-tarifas .section-head .section-eyebrow { display: none; }
#modal-tarifas .section-head :is(h1, h2) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#modal-tarifas .tarifas-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
#modal-tarifas[data-publico="part"] .juego-grupo[data-publico="emp"],
#modal-tarifas[data-publico="emp"] .juego-grupo[data-publico="part"],
#modal-tarifas[data-publico="emp"] .b1-tarifa-consulta { display: none; }
@media (max-width: 600px) {
  body.v13-on .modal-overlay { padding: 10px; }
  body.v13-on .modal-head { padding: 22px 16px 16px; }
  body.v13-on .modal-body { padding: 20px 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.v13-on .modal-box { animation: none; }
}