/* La Grúa Gigante — hojas: el tablero de obra (hoja modal con cinta de precaución arriba), el registro de
   constructores (formulario), la fila de "Constructores de la fiesta" (cascos sobre una viga, el nuevo baja de la grúa),
   la bitácora de la obra (todos los datos), el visor de fotos y el aviso del demo. */
.lg .hoja { position: absolute; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.lg .hoja-fondo { position: absolute; inset: 0; background: rgba(16, 14, 10, .55); opacity: 0; transition: opacity .25s; }
.lg .hoja.is-in .hoja-fondo { opacity: 1; }
.lg .hoja-placa { position: relative; width: 100%; max-height: calc(100cqh - var(--safe-t) - 28px); display: flex; flex-direction: column; overflow: hidden; border: 3px solid var(--negro); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #F7F8F9, #E4E7EA); box-shadow: 0 -8px 30px rgba(0, 0, 0, .35); transform: translateY(40px); opacity: 0; transition: transform .32s cubic-bezier(.3, 1.3, .5, 1), opacity .2s; }
.lg .hoja.is-full .hoja-placa { height: calc(100cqh - var(--safe-t) - 18px); max-height: none; }
.lg .hoja.is-in .hoja-placa { transform: none; opacity: 1; }
.lg .hoja.is-out .hoja-placa { transform: translateY(60px); opacity: 0; }
.lg .hoja.is-out .hoja-fondo { opacity: 0; }
.lg .hoja-cinta { flex: none; height: 14px; background: repeating-linear-gradient(-45deg, var(--negro) 0 12px, var(--amarillo) 12px 24px); border-bottom: 3px solid var(--negro); }
.lg .hoja-cabeza { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 10px 18px; border-bottom: 2px dashed var(--acero-d); }
.lg .hoja-cabeza.is-solo { justify-content: flex-end; border: 0; padding-bottom: 0; }
.lg .hoja-titulos { flex: 1; min-width: 0; }
.lg .hoja-k { margin: 0; font: 800 13px/1.2 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: #4A5058; }
.lg .hoja-cabeza h2 { margin: 2px 0 0; font: 400 clamp(22px, 6.8cqw, 28px)/1.08 var(--f-letrero); color: var(--negro); }
.lg .hoja-x { flex: none; width: 46px; height: 46px; }
.lg .hoja-cuerpo { flex: 1; overflow: auto; padding: 14px 18px calc(var(--safe-b) + 22px); overscroll-behavior: contain; }
.lg .limite { margin: 10px 0 0; text-align: center; font: 700 15px/1.3 var(--f-texto); color: #3A3F48; }

/* ---------- registro de constructores (formulario) ---------- */
.lg .fm { display: flex; flex-direction: column; gap: 10px; }
.lg .fm-vista { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; padding: 10px 0 12px; border: 2px dashed var(--acero-d); border-radius: 6px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 14px); }
.lg .fm-vista-casco { display: block; line-height: 0; animation: lg-casco-sube .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes lg-casco-sube { from { transform: translateY(-10px) rotate(-4deg); } }
.lg .fm-vista-nombre { display: inline-block; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 12px; border: 2px solid var(--negro); border-radius: 3px; background: #fff; font: 800 17px var(--f-cond); letter-spacing: .02em; }
.lg .fm-l { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 4px 0 0; font: 800 16px/1.2 var(--f-cond); letter-spacing: .03em; color: var(--negro); }
.lg .fm input, .lg .fm textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 3px solid var(--negro); border-radius: 4px; background: #fff; color: var(--negro); font: 600 17px/1.3 var(--f-texto); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .06); }
.lg .fm textarea { resize: vertical; min-height: 74px; }
.lg .fm input:focus-visible, .lg .fm textarea:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 0; box-shadow: none; }
.lg .fm-cuenta { font: 700 13px var(--f-cond); color: #4A5058; }
.lg .fm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.lg .fm-seg-b { min-height: 50px; padding: 6px 8px; border: 3px solid var(--negro); border-radius: 4px; background: #fff; font: 800 16px/1.15 var(--f-cond); letter-spacing: .02em; cursor: pointer; }
.lg .fm-seg-b[aria-checked="true"] { background: var(--amarillo); box-shadow: inset 0 0 0 3px var(--negro); }
.lg .fm-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lg .fm-personas[hidden], .lg .fm-bloque[hidden] { display: none; }
.lg .fm-paso { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border: 2px solid var(--negro); border-radius: 4px; background: #fff; }
.lg .fm-paso-l { font: 800 15px var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.lg .fm-paso-c { display: flex; align-items: center; gap: 10px; }
.lg .fm-paso output { min-width: 34px; text-align: center; font: 400 28px/1 var(--f-letrero); }
.lg .fm-mas { width: 44px; height: 44px; }
.lg .fm-colores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.lg .fm-casco { display: grid; place-items: center; min-height: 50px; padding: 2px 0; border: 3px solid transparent; border-radius: 6px; background: #fff; cursor: pointer; }
.lg .fm-casco[aria-checked="true"] { border-color: var(--negro); background: var(--amarillo-l); }
.lg .fm-error { margin: 0; min-height: 1.2em; font: 800 16px var(--f-cond); color: var(--rojo); }

/* ---------- Constructores de la fiesta ---------- */
.lg .constructores .hoja-cuerpo { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 18px); }
.lg .cs-sub { margin: 0 0 6px; font: 600 16px/1.35 var(--f-texto); }
/* varias vigas: tres cascos por viga en el celular; cada casco trae su tramo de viga (juntos se ven continuos) */
.lg .cs-viga { position: relative; margin: 4px -18px 6px; }
.lg .cs-fila { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: 22px; margin: 0; padding: 50px 0 0; list-style: none; }
.lg .cs-acero { display: none; }
.lg .cs { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 0 33.333%; padding-bottom: 30px; animation: lg-cs-entra .45s var(--d, 0s) cubic-bezier(.3, 1.5, .5, 1) both; }
.lg .cs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; z-index: 0; border-block: 3px solid var(--negro);
  background: var(--tornillo) 6px 50% / 9px 9px no-repeat, var(--tornillo) calc(100% - 6px) 50% / 9px 9px no-repeat, linear-gradient(180deg, #8E969E 0 4px, #C3C9CF 4px 6px, #6E757D 6px 13px, #C3C9CF 13px 15px, #8E969E 15px); }
@container marco (min-width: 400px) { .lg .cs { flex-basis: 25%; } }
@keyframes lg-cs-entra { from { opacity: 0; transform: translateY(-14px); } }
.lg .cs-casco { position: relative; z-index: 1; display: block; line-height: 0; margin-bottom: -4px; }
.lg .cs-nombre { position: absolute; z-index: 2; left: 50%; bottom: 3px; max-width: 94%; margin: 0; padding: 1px 6px; translate: -50% 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 2px solid var(--negro); border-radius: 3px; background: #fff; font: 800 13px/1.15 var(--f-cond); text-align: center; transform: rotate(-2deg); }
.lg .cs.is-mio .cs-nombre { background: var(--amarillo); }
/* el casco nuevo baja colgado del gancho de la grúa, se columpia, se posa y el cable sube */
.lg .cs.is-llega { animation: lg-cs-baja 1.5s .25s cubic-bezier(.35, .9, .4, 1) both; transform-origin: 50% -60px; }
@keyframes lg-cs-baja { 0% { transform: translateY(-120px) rotate(-10deg); } 55% { transform: translateY(0) rotate(6deg); } 72% { transform: translateY(-4px) rotate(-3deg); } 86% { transform: translateY(0) rotate(1.5deg); } 100% { transform: none; } }
.lg .cs-cable { position: absolute; left: 50%; bottom: 76px; width: 3px; height: 160px; margin-left: -1.5px; background: var(--negro); animation: lg-cable 1.1s 1.6s ease-in forwards; transform-origin: 50% 0; }
.lg .cs-gancho { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); line-height: 0; }
@keyframes lg-cable { to { transform: translateY(-240px); opacity: 0; } }
.lg .cs-cuenta { margin: 18px 0 8px; text-align: center; font: 800 18px var(--f-cond); letter-spacing: .03em; }
.lg .cs-cuenta strong { display: inline-block; min-width: 52px; padding: 2px 10px; margin-right: 4px; border: 3px solid var(--negro); border-radius: 4px; background: #0B1610; color: #FFB61E; font: 800 26px/1.1 var(--f-cond); text-shadow: 0 0 6px rgba(255, 182, 30, .55); font-variant-numeric: tabular-nums; }
.lg .cs-lista, .lg .cs-msgs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lg .cs-lista li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 2px solid var(--negro); border-radius: 4px; background: #fff; }
.lg .cl-casco { line-height: 0; flex: none; }
.lg .cl-nombre { flex: 1; min-width: 0; font: 800 16px/1.2 var(--f-cond); }
.lg .cl-meta { flex: none; font: 600 14px var(--f-texto); color: #3A3F48; }
.lg .cs-vacio { margin: 4px 0; text-align: center; font: 700 16px var(--f-texto); }
.lg .cs-h3 { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font: 400 20px var(--f-letrero); }
.lg .cs-msgs li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-left: 5px solid var(--amarillo-d); background: #fff; border-radius: 2px; font: 600 15px/1.35 var(--f-texto); }
.lg .cs-msgs strong { font: 800 15px var(--f-cond); }
.lg .cs-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.lg.rm .cs, .lg.rm .cs.is-llega, .lg.rm .cs-cable { animation: none !important; }
.lg.rm .cs-cable { display: none; }
@media (prefers-reduced-motion: reduce) { .lg .cs, .lg .cs.is-llega { animation: none !important; } .lg .cs-cable { display: none; } }

/* ---------- bitácora de la obra (todos los datos) ---------- */
.lg .datos .hoja-cuerpo { background: linear-gradient(90deg, transparent 34px, rgba(200, 50, 30, .25) 34px 36px, transparent 36px), repeating-linear-gradient(0deg, rgba(29, 79, 145, .08) 0 1px, transparent 1px 26px); }
.lg .bt-lead { margin: 0 0 12px 22px; font: 800 18px/1.3 var(--f-cond); letter-spacing: .02em; }
.lg .bt-sec { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px 22px; }
.lg .bt-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 21px/1.1 var(--f-letrero); }
.lg .bt-n { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 4px; border: 2px solid var(--negro); border-radius: 3px; background: var(--amarillo); font: 800 14px var(--f-cond); }
.lg .bt-sec p { margin: 0; font: 600 16px/1.4 var(--f-texto); }
.lg .bt-big { font: 800 20px/1.2 var(--f-cond) !important; }
.lg .bt-sec .cota { color: var(--negro); }
.lg .bt-sec .croquis { background: var(--azul); border-color: var(--negro); }
.lg .bt-sec .lugar-nombre { font-size: 21px; }
.lg .regalos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lg .regalos li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--negro); border-radius: 4px; background: #fff; }
.lg .regalos li.is-destacado { background: var(--amarillo-l); }
.lg .rg-txt { flex: 1; display: flex; flex-direction: column; }
.lg .rg-txt strong { font: 800 16px var(--f-cond); }
.lg .rg-txt small { font: 600 14px var(--f-texto); color: #3A3F48; }
.lg .fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lg .foto { position: relative; padding: 0; border: 3px solid var(--negro); border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; background: #fff; transform: rotate(-1deg); }
.lg .foto:nth-child(2n) { transform: rotate(1.2deg); }
.lg .foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg .foto span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; background: rgba(255, 255, 255, .94); font: 800 13px var(--f-cond); text-align: left; }
.lg .bt-faq { border: 2px solid var(--negro); border-radius: 4px; background: #fff; }
.lg .bt-faq summary { min-height: 44px; padding: 10px 12px; cursor: pointer; font: 800 16px/1.25 var(--f-cond); }
.lg .bt-faq p { padding: 0 12px 12px; }
.lg .bt-cta { margin: 6px 0 12px; }
.lg .bt-anfitriones { margin: 0 0 6px; text-align: center; font: 700 15px var(--f-texto); color: #3A3F48; }

/* ---------- visor de fotos ---------- */
.lg .visor { background: var(--negro); }
.lg .visor .hoja-cabeza { border: 0; }
.lg .visor .hoja-cuerpo { display: flex; align-items: center; justify-content: center; position: relative; }
.lg .visor-fig { margin: 0; width: 100%; }
.lg .visor-img { display: block; width: 100%; max-height: 66cqh; object-fit: contain; border: 4px solid #fff; border-radius: 3px; }
.lg .visor-pie { margin: 10px 0 0; text-align: center; color: #fff; font: 800 18px var(--f-cond); }
.lg .visor-ant, .lg .visor-sig { position: absolute; top: 50%; }
.lg .visor-ant { left: 8px; transform: translateY(-50%) scaleX(-1); }
.lg .visor-sig { right: 8px; transform: translateY(-50%); }

/* ---------- aviso del demo ---------- */
.lg .demo-nota .hoja-cuerpo { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.lg .demo-nota p { margin: 0; font: 700 17px/1.4 var(--f-texto); }
.lg .demo-ic { color: var(--negro); }