/* Stand de videomensajes · Natacha & Joel
   Lienzo fijo 1280 × 800 (horizontal) u 800 × 1280 (vertical), escalado al tamaño real de la pantalla. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:block;src:url(assets/fuentes/cormorant-300-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:block;src:url(assets/fuentes/cormorant-300-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:block;src:url(assets/fuentes/cormorant-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:block;src:url(assets/fuentes/cormorant-400-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:block;src:url(assets/fuentes/cormorant-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:block;src:url(assets/fuentes/cormorant-500-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:block;src:url(assets/fuentes/cormorant-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:block;src:url(assets/fuentes/cormorant-600-italic.woff2) format('woff2')}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:block;src:url(assets/fuentes/pinyon-400.woff2) format('woff2')}

:root{
  --marfil:#fbf6ea; --papel:#f1e9d6; --oliva:#3f4a2c; --oliva-suave:#6b7448;
  --oro:#b8975a; --oro-oscuro:#8c6d33; --oro-claro:#ecd9a6; --tinta:#585644;
  --filete:rgba(184,151,90,.55);
  --ease:cubic-bezier(.45,0,.55,1);
  --cg:'Cormorant Garamond',Georgia,serif; --ps:'Pinyon Script',cursive;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--marfil);overscroll-behavior:none}
body{font-family:var(--cg);color:var(--oliva);font-weight:500;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-touch-callout:none}
button,select,input{font-family:inherit;color:inherit;font-weight:inherit}
button{cursor:pointer;background:none;border:none;padding:0;touch-action:manipulation}
img{-webkit-user-drag:none}
[hidden]{display:none!important}

#escenario{position:absolute;left:50%;top:50%;width:1280px;height:800px;transform:translate(-50%,-50%) scale(var(--s,1));overflow:hidden;background:var(--marfil)}
#escenario.port{width:800px;height:1280px}

/* Peonías y marco */
.peonia{position:absolute;mix-blend-mode:multiply;opacity:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 98%);mask-image:radial-gradient(closest-side,#000 52%,transparent 98%);
  transition:opacity 700ms var(--ease)}
.peonia-a{left:-170px;top:-170px;width:440px}
.peonia-b{right:-210px;bottom:-200px;width:420px}
.port .peonia-b{right:-230px}
[data-screen=wait] .peonia,[data-screen=thanks] .peonia,[data-screen=error] .peonia,[data-screen=arranque] .peonia{opacity:.6}
[data-screen=welcome] .peonia{opacity:.4}
[data-screen=who] .peonia,[data-screen=topic] .peonia{opacity:.28}
[data-screen=frame] .peonia,[data-screen=review] .peonia{opacity:.2}
[data-screen=pin] .peonia{opacity:.25}

.marco{position:absolute;inset:0;pointer-events:none;transition:opacity 600ms var(--ease)}
[data-screen=rec] .marco,[data-screen=panel] .marco,[data-screen=pin] .marco{opacity:0}
.marco-1{position:absolute;inset:26px;border:1px solid var(--filete)}
.marco-2{position:absolute;inset:33px;border:1px solid rgba(184,151,90,.22)}
.rombo{position:absolute;width:9px;height:9px;background:var(--marfil);border:1px solid var(--oro);transform:rotate(45deg)}
.rombo-sd{top:22px;right:22px}.rombo-ii{bottom:22px;left:22px}

/* Pantallas y fundido */
#pantallas{position:absolute;inset:0;transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
#pantallas.saliendo{opacity:0;transform:translateY(8px)}
.pantalla{position:absolute;inset:0;display:none}
.pantalla.on{display:flex}
.centrada{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px}
.flex1{flex:1}

/* Piezas comunes */
.versal{font-size:22px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.oro{color:var(--oro-oscuro)} .tinta{color:var(--tinta)}
.ornamento{display:flex;align-items:center;gap:14px;margin:30px 0}
.ornamento i{width:72px;height:1px;background:var(--oro)}
.ornamento b{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--oro)}
.nombres{font-family:var(--ps);font-size:104px;line-height:1.15;white-space:nowrap;font-weight:400}
.port .nombres{font-size:96px}
.nombres-firma{font-family:var(--ps);font-size:66px;line-height:1.2;white-space:nowrap;font-weight:400}
.firma{font-family:var(--ps);font-size:56px;line-height:1.2;color:var(--oliva-suave);font-weight:400;margin-top:40px}
.fecha{font-size:24px;letter-spacing:.32em;color:var(--oro-oscuro);font-weight:500}

.btn-pri{height:76px;min-width:320px;padding:0 48px;background:var(--oliva);color:var(--marfil);border-radius:6px;font-size:30px;font-weight:500;letter-spacing:.04em;outline:1px solid rgba(236,217,166,.5);outline-offset:-7px;transition:opacity 400ms var(--ease)}
.btn-pri:active{opacity:.85}
.btn-sec{height:72px;min-width:320px;padding:0 40px;border:1px solid var(--oro);border-radius:6px;font-size:28px;font-weight:500;transition:opacity 400ms var(--ease)}
.ancho{width:100%;min-width:0}
.enlace{min-height:64px;padding:0 8px;font-size:26px;font-style:italic;font-weight:400;color:var(--tinta);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--oro);transition:opacity 400ms var(--ease)}
.enlace-atras{min-height:64px;padding:0 8px;font-size:26px;font-style:italic;font-weight:400;color:var(--tinta)}
.inactivo{opacity:.35;pointer-events:none}
.btn-sec.inactivo{opacity:.38}

/* Video de cámara (vista previa en espejo) */
.camara-slot{position:relative;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 50% 42%,#8b7b5c 0%,#5c513d 60%,#3f382b 100%)}
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}

/* Sello pulsable (acceso del operador) */
.sello-pulsable{position:relative;width:112px;height:112px;display:grid;place-items:center;touch-action:none;flex-shrink:0}
.sello-pulsable img{width:92px;height:92px;pointer-events:none}
.sello-pulsable svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);opacity:0;transition:opacity 400ms}
.sello-pulsable circle{fill:none;stroke:var(--oro);stroke-width:1;stroke-dasharray:340;stroke-dashoffset:340}
.sello-pulsable.grande{width:140px;height:140px}
.sello-pulsable.grande img{width:116px;height:116px}
.sello-pulsable.grande circle{stroke-dasharray:428;stroke-dashoffset:428}
.sello-pulsable.sosteniendo svg{opacity:1}
.sello-pulsable.sosteniendo circle{stroke-dashoffset:0;transition:stroke-dashoffset 3000ms linear}
.sello-grande{width:132px;height:132px}

/* 1 · Espera */
.espera{cursor:pointer}
.espera-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:64px;padding:64px 88px}
.arco{flex-shrink:0;padding:12px;border:1px solid var(--oro);border-radius:232px 232px 14px 14px}
.arco-in{width:440px;height:560px;border-radius:220px 220px 6px 6px}
.espera-col{width:570px;display:flex;flex-direction:column;align-items:center;text-align:center}
.espera-col .nombres{margin-top:2px}
.espera-col .fecha{margin-top:2px}
.espera-col .ornamento{margin:30px 0 26px}
.espera-titulo{font-size:54px;line-height:1.1;font-weight:400}
.pregunta-rota{min-height:92px;margin-top:16px;font-size:34px;line-height:1.35;font-style:italic;font-weight:400;color:var(--tinta);text-wrap:balance;transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.pregunta-rota.oculta{opacity:0;transform:translateY(8px)}
.espera-cta{margin-top:34px;font-size:22px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--tinta);white-space:nowrap}
.port .espera-in{flex-direction:column;justify-content:flex-start;gap:0;padding:78px 64px 84px}
.port .espera-col{display:contents}
.port .sello-pulsable{order:0}.port .espera-col .nombres{order:1}.port .espera-col .fecha{order:2}
.port .arco{order:3;margin-top:34px;border-radius:252px 252px 14px 14px}
.port .arco-in{width:480px;height:520px;border-radius:240px 240px 6px 6px}
.port .espera-col .ornamento{display:none}
.port .espera-titulo{order:4;margin-top:40px}
.port .pregunta-rota{order:5;max-width:600px;margin-top:14px;text-align:center}
.port .espera-cta{order:7;margin-top:auto}
.idiomas{position:absolute;top:40px;right:52px;display:flex;align-items:center;gap:2px}
.idiomas button{min-height:64px;min-width:64px;padding:0 14px;font-size:22px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--tinta);text-underline-offset:9px;text-decoration-color:var(--oro)}
.idiomas button.sel{color:var(--oliva);text-decoration-line:underline}
.idiomas span{width:1px;height:22px;background:var(--oro)}

/* 2 · Bienvenida */
.bienvenida{flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:56px 64px}
.bienv-cab{text-align:center}
.bienv-video{padding:10px;border:1px solid var(--oro);border-radius:12px}
.bienv-video-in{position:relative;width:720px;height:405px;border-radius:4px;overflow:hidden;background:#3f382b}
.port .bienv-video-in{width:704px;height:396px}
.bienv-video-in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.linea-clip{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--oro)}
.bienv-texto{position:relative;width:720px;padding:64px 76px 50px;background:var(--papel);border:1px solid var(--oro);border-radius:8px;text-align:center}
.port .bienv-texto{width:704px}
.filete-int{position:absolute;inset:9px;border:1px solid rgba(184,151,90,.4);border-radius:4px;pointer-events:none}
.rombo-sup{position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-4.5px;background:var(--papel);border:1px solid var(--oro);transform:rotate(45deg)}
.cita{font-size:40px;line-height:1.38;font-style:italic;font-weight:400;text-wrap:pretty}
.bienv-texto .firma{font-size:54px;margin-top:22px}
.bienvenida.con-clip .bienv-texto{display:none}
.bienvenida:not(.con-clip) .bienv-video{display:none}
.bienvenida .btn-pri{min-width:340px}

/* Pasos 3 y 4 */
.paso{flex-direction:column;align-items:center;padding:62px 88px 56px}
.port .paso{padding:62px 80px 56px}
.pasos{display:flex;align-items:center;gap:12px}
.pasos i{width:36px;height:1px;background:rgba(184,151,90,.6)}
.pasos b{width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--oro)}
.pasos b.lleno{background:var(--oro)}
.paso-titulo{font-size:52px;line-height:1.15;margin-top:18px;text-align:center;font-weight:400}
.barra-inf{width:100%;display:flex;justify-content:space-between;align-items:center}

.quien-opciones{display:flex;gap:24px;margin-top:36px}
.opcion{position:relative;width:300px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 44px;border:1px solid rgba(184,151,90,.45);border-radius:8px;text-align:center;transition:background 450ms var(--ease),border-color 450ms var(--ease)}
.opcion svg{width:96px;height:64px;flex-shrink:0;fill:none;stroke:var(--oliva);stroke-width:1.2}
.filete-op{position:absolute;inset:7px;border:1px solid rgba(184,151,90,.5);border-radius:4px;opacity:0;transition:opacity 450ms;pointer-events:none}
.opcion.sel{background:var(--papel);border-color:var(--oro)}
.opcion.sel .filete-op{opacity:1}
.op-txt{display:block}
.op-lab{display:block;font-size:36px;line-height:1.15;font-weight:400}
.op-sub{display:block;font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);margin-top:8px}
.port .quien-opciones{flex-direction:column}
.port .opcion{width:640px;height:148px;flex-direction:row;justify-content:flex-start;gap:32px;text-align:left}

.nombre-fila{display:flex;align-items:center;gap:28px;margin-top:38px}
.port .nombre-fila{flex-direction:column;gap:8px}
.campo-nombre{width:560px;height:76px;border-bottom:1px solid var(--oro);text-align:left;padding:0 6px;font-size:32px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.port .campo-nombre{width:640px}
.campo-nombre.vacio{color:var(--tinta);font-style:italic}

.teclado-capa{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity 500ms var(--ease)}
.teclado-capa.on{opacity:1;pointer-events:auto}
.teclado-velo{position:absolute;inset:0;background:rgba(251,246,234,.74)}
.teclado{position:absolute;left:0;right:0;bottom:0;background:var(--papel);border-top:1px solid var(--oro);padding:26px 36px 34px;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateY(12px);transition:transform 500ms var(--ease)}
.teclado-capa.on .teclado{transform:none}
.teclado-cab{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}
.teclado-valor{display:flex;align-items:center;justify-content:center;gap:3px;height:56px;min-width:360px;font-size:42px;font-weight:400;border-bottom:1px solid var(--oro);white-space:pre}
.cursor{width:1px;height:38px;background:var(--oliva)}
.fila-teclas{display:flex;justify-content:center;gap:10px;margin-top:10px}
.port .fila-teclas{gap:8px;margin-top:8px}
.tecla{width:92px;height:68px;background:var(--marfil);border:1px solid var(--filete);border-radius:6px;font-size:30px;font-weight:500}
.port .tecla{width:64px;height:76px}
.tecla.ancha{width:196px;font-size:24px}.port .tecla.ancha{width:150px}
.tecla.espacio{width:300px;font-size:24px}.port .tecla.espacio{width:180px}
.tecla.oscura{background:var(--oliva);color:var(--marfil)}
.tecla:active{background:var(--papel)}

.tarjetas{display:flex;gap:28px;margin-top:40px;transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.tarjetas.oculta{opacity:0;transform:translateY(8px)}
.tarjeta{position:relative;width:340px;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:0 44px;background:var(--papel);border:1px solid var(--oro);border-radius:6px;box-shadow:0 14px 30px -20px rgba(63,74,44,.35)}
.tarjeta .filete-int{border-color:rgba(184,151,90,.42);border-radius:3px}
.tarjeta .diam{width:8px;height:8px;transform:rotate(45deg);background:var(--oro)}
.tarjeta .q{font-size:32px;line-height:1.3;font-style:italic;font-weight:400;text-wrap:balance;text-align:center}
.port .tarjetas{flex-direction:column}
.port .tarjeta{width:640px;height:176px}
.tema-acciones{display:flex;align-items:center;gap:32px;margin-top:36px}
.port .tema-acciones{flex-direction:column;gap:8px}

/* 5 · Encuadre */
.encuadre{flex-direction:column;align-items:center;padding:56px 72px 48px}
.port .encuadre{padding:56px 48px 48px}
.pregunta-elegida{max-width:1000px;margin-top:14px;font-size:38px;line-height:1.25;font-style:italic;font-weight:400;text-align:center;text-wrap:balance}
.port .pregunta-elegida{max-width:660px;font-size:40px}
.encuadre-cuerpo{flex:1;display:flex;align-items:center;justify-content:center;gap:44px;margin-top:20px}
.port .encuadre-cuerpo{flex-direction:column;gap:36px}
.encuadre-cam{display:flex;flex-direction:column;align-items:center;gap:20px}
.caja-cam{padding:10px;border:1px solid var(--oro);border-radius:12px}
.caja-cam-in{width:768px;height:432px;border-radius:4px}
.port .caja-cam-in{width:704px;height:396px}
.guia{position:absolute;left:50%;top:50%;border:1.5px solid rgba(251,246,234,.8);box-shadow:0 0 0 2000px rgba(251,246,234,.16);pointer-events:none;display:none}
.guia-solo{top:47%;width:34%;height:78%;transform:translate(-50%,-50%);border-radius:50%}
.guia-grupo{width:84%;height:80%;transform:translate(-50%,-50%);border-radius:18px}
.encuadre:not(.grupo) .guia-solo,.encuadre.grupo .guia-grupo{display:block}
.voz{width:320px;height:9px;display:flex;align-items:center}
.voz-linea{width:100%;height:1px;background:var(--oro);transform:scaleX(.12);opacity:.45}
.encuadre-lado{width:300px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:18px}
.port .encuadre-lado{width:640px;align-items:center;text-align:center}
.encuadre-lado .versal{letter-spacing:.16em}
.ayuda{font-size:32px;line-height:1.3;font-style:italic;font-weight:400;color:var(--tinta)}
.encuadre-lado .btn-pri{width:300px;min-width:0;margin-top:10px;padding:0 16px;white-space:nowrap}
.port .encuadre-lado .btn-pri{width:480px}

/* 6–7 · Grabar */
.grabar{flex-direction:column;align-items:center;padding:30px 72px 30px}
.port .grabar{padding:76px 48px 60px;justify-content:center}
.apuntador{min-height:52px;max-width:1000px;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1.25;font-style:italic;font-weight:400;color:var(--tinta);text-align:center;text-wrap:balance}
.port .apuntador{min-height:150px;max-width:660px;font-size:40px}
.grabar-marco{position:relative;padding:8px;margin-top:8px}
.progreso{position:absolute;inset:0;width:976px;height:556px;overflow:visible}
.port .progreso{width:720px;height:412px}
.progreso rect{fill:none}
.progreso .pista{stroke:rgba(184,151,90,.3);stroke-width:1}
.progreso .avance{stroke:var(--oro);stroke-width:2}
.grabar-cam{width:960px;height:540px;border-radius:4px}
.port .grabar-cam{width:704px;height:396px}
.velo-cuenta{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(251,246,234,.64);transition:opacity 600ms var(--ease)}
.velo-cuenta.fuera{opacity:0}
.cifra{font-size:300px;line-height:1;font-weight:300;color:var(--oliva);font-variant-numeric:oldstyle-nums;opacity:0;transform:translateY(10px);transition:opacity 450ms var(--ease),transform 450ms var(--ease)}
.cifra.ve{opacity:1;transform:none}
.banda{width:976px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;opacity:0;pointer-events:none;transition:opacity 600ms var(--ease)}
.banda.on{opacity:1;pointer-events:auto}
.port .banda{width:720px;flex-direction:column;gap:26px;margin-top:40px}
.indicador{display:flex;align-items:center;gap:14px;min-width:300px}
.port .indicador{justify-content:center}
.punto{width:11px;height:11px;border-radius:50%;background:var(--oro-oscuro)}
.versal-rec{font-size:22px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.restante{font-size:24px;color:var(--tinta);font-variant-numeric:tabular-nums}
.pronto{font-size:30px;font-style:italic;color:var(--oro-oscuro);opacity:0;transform:translateY(8px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.pronto.on{opacity:1;transform:none}
.banda-fin{min-width:300px;display:flex;justify-content:flex-end}
.banda-fin .btn-pri{width:260px;min-width:0}
.port .banda-fin{justify-content:center}
.port .banda-fin .btn-pri{width:480px}

/* 8 · Revisión */
.revision{align-items:center;justify-content:center;gap:48px;padding:60px 72px}
.port .revision{flex-direction:column;gap:40px}
.caja-rev-in{position:relative;width:672px;height:378px;border-radius:4px;overflow:hidden;background:#3f382b}
.port .caja-rev-in{width:704px;height:396px}
.caja-rev-in video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#3f382b}
.linea-rep{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--oro-claro)}
.btn-play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center}
.play-circ{width:104px;height:104px;border-radius:50%;border:1px solid rgba(251,246,234,.9);background:rgba(63,74,44,.32);display:grid;place-items:center;transition:opacity 500ms var(--ease)}
.play-circ.fuera{opacity:0}
.tri{width:0;height:0;margin-left:7px;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:24px solid var(--marfil)}
.rev-lado{width:392px;display:flex;flex-direction:column;gap:16px}
.port .rev-lado{width:704px}
.rev-titulo{font-size:40px;line-height:1.15;font-weight:400}
.capsulas{display:flex;flex-direction:column;gap:12px}
.port .capsulas{flex-direction:row}
.capsula{position:relative;flex:1;display:flex;align-items:center;gap:18px;padding:16px 22px;min-height:96px;text-align:left;border:1px solid rgba(184,151,90,.45);border-radius:6px;transition:background 450ms var(--ease),border-color 450ms}
.capsula.sel{background:var(--papel);border-color:var(--oro)}
.radio{width:24px;height:24px;flex-shrink:0;border-radius:50%;border:1px solid var(--oliva);display:grid;place-items:center}
.radio span{width:12px;height:12px;border-radius:50%;background:var(--oliva);opacity:0;transition:opacity 400ms}
.capsula.sel .radio span{opacity:1}
.cap-t{display:block;font-size:28px;line-height:1.15;font-weight:400}
.cap-s{display:block;font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);margin-top:4px}
.rev-lado .btn-pri{margin-top:8px}
.nota-tomas{font-size:24px;line-height:1.35;font-style:italic;font-weight:400;color:var(--tinta);text-align:center;text-wrap:balance}

/* 9 · Gracias, error, PIN */
.sello-gracias{width:132px;height:132px}
.gracias-txt{font-size:92px;line-height:1.1;font-style:italic;font-weight:300;margin-top:26px;text-wrap:balance}
.gracias-linea{font-size:38px;line-height:1.3;font-weight:400;color:var(--tinta);max-width:640px;text-wrap:balance}
.gracias .ornamento{margin:30px 0}
.error-t{font-size:58px;line-height:1.2;margin-top:34px;font-weight:400}
.error-s{font-size:58px;line-height:1.2;font-style:italic;font-weight:400;color:var(--tinta)}
.sello-pin{width:64px;height:64px}
.pin-titulo{font-size:40px;margin-top:4px;font-weight:400}
.pin-puntos{display:flex;gap:22px;margin-top:26px}
.pin-puntos i{width:18px;height:18px;border-radius:50%;border:1px solid var(--oro-oscuro);transition:background 300ms}
.pin-puntos i.lleno{background:var(--oro-oscuro)}
.pin-error{height:40px;display:flex;align-items:center;font-size:24px;font-style:italic;color:var(--oro-oscuro);opacity:0;transition:opacity 500ms}
.pin-error.on{opacity:1}
.pin-teclas{display:grid;grid-template-columns:repeat(3,112px);gap:16px}
.pin-tecla{height:84px;background:var(--marfil);border:1px solid var(--filete);border-radius:6px;font-size:40px;font-weight:500}
.pin-tecla.palabra{background:transparent;border-color:transparent;font-size:24px;font-style:italic;font-weight:400}
.pin-tecla:active{background:var(--papel)}

/* Panel del operador */
.panel{display:none;flex-direction:column;overflow-y:auto;padding:30px 40px 40px;-webkit-user-select:none}
.panel.on{display:block}
.panel-cab{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.panel-marca{display:flex;align-items:center;gap:16px}
.panel-marca img{width:56px;height:56px}
.panel-titulo{font-size:36px;line-height:1.1;font-weight:500}
.panel-sub{font-size:22px;letter-spacing:.14em;color:var(--oro-oscuro)}
.panel-acc{display:flex;gap:12px;flex-wrap:wrap}
.btn-op{min-height:64px;padding:0 26px;border:1px solid var(--oro);border-radius:6px;font-size:24px;font-weight:500;background:transparent}
.btn-op.pri{background:var(--oliva);color:var(--marfil);border-color:var(--oliva);outline:1px solid rgba(236,217,166,.5);outline-offset:-6px}
.btn-op.peligro{background:var(--oro-oscuro);color:var(--marfil);border-color:var(--oro-oscuro)}
.btn-op.derecha{align-self:flex-end}
.btn-op:active{opacity:.85}
.panel-sep{height:1px;background:rgba(184,151,90,.5);margin:20px 0}
.aviso-bajo{display:none;align-items:center;gap:16px;background:var(--papel);border:1px solid var(--oro-oscuro);border-radius:6px;padding:14px 20px;margin-bottom:18px;font-size:22px;line-height:1.35}
.aviso-bajo.on{display:flex}
.aviso-bajo b{width:10px;height:10px;flex-shrink:0;transform:rotate(45deg);background:var(--oro-oscuro)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{border:1px solid rgba(184,151,90,.5);border-radius:6px;padding:12px 20px}
.stat.bajo{background:var(--papel)}
.stat-l{font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
.stat-v{font-size:44px;line-height:1.1;font-weight:500;font-variant-numeric:lining-nums}
.stat-s{font-size:22px;font-style:italic;font-weight:400;color:var(--tinta);min-height:30px}
.panel-grid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:20px;margin-top:20px;align-items:start}
.port .panel-grid{grid-template-columns:minmax(0,1fr)}
.tarjeta-op{border:1px solid rgba(184,151,90,.5);border-radius:6px;padding:18px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.op-lab2{font-size:24px;font-weight:500;margin-top:6px}
.tarjeta-op select{appearance:none;-webkit-appearance:none;height:64px;border:1px solid rgba(184,151,90,.7);border-radius:6px;background:var(--marfil);padding:0 18px;font-size:22px;color:var(--oliva);width:100%}
.nivel{display:flex;align-items:center;gap:12px;font-size:22px;color:var(--tinta)}
.nivel span{white-space:nowrap}
.nivel-pista{flex:1;height:6px;border-radius:3px;background:rgba(184,151,90,.22);overflow:hidden}
.nivel-barra{height:100%;width:0;background:var(--oro);border-radius:3px}
.interruptor{display:flex;align-items:center;justify-content:space-between;min-height:64px;margin-top:2px;font-size:24px;font-weight:500;text-align:left;gap:16px}
.sw{position:relative;flex-shrink:0;width:72px;height:40px;border-radius:6px;border:1px solid var(--oro);transition:background 400ms}
.sw span{position:absolute;top:3px;left:3px;width:32px;height:32px;border-radius:4px;background:var(--oro);transition:transform 400ms var(--ease),background 400ms}
.interruptor.on .sw{background:var(--oliva);border-color:var(--oliva)}
.interruptor.on .sw span{transform:translateX(32px);background:var(--marfil)}
.prueba-video{width:100%;aspect-ratio:16/9;background:#3f382b;border-radius:4px;display:none}
.prueba-video.on{display:block}
.estado-tec{font-size:20px;line-height:1.4;color:var(--tinta);font-weight:400;overflow-wrap:anywhere}
.lista-cab{display:flex;justify-content:space-between;align-items:baseline;font-size:22px}
.lista{margin-top:6px}
.fila-msg{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid rgba(184,151,90,.3)}
.fila-msg img,.fila-msg .mini{width:104px;height:58px;flex-shrink:0;border-radius:3px;object-fit:cover;background:radial-gradient(ellipse at 50% 40%,#8b7b5c,#4a4232)}
.fila-info{flex:1;min-width:0}
.fila-n{font-size:26px;line-height:1.15;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-n.anon{font-style:italic}
.fila-m{font-size:22px;color:var(--tinta);font-variant-numeric:tabular-nums;font-weight:400}
.fila-msg .btn-op{padding:0 16px;font-size:22px}
.fila-msg .enlace{font-size:22px;padding:0 6px}
.vacia{font-size:24px;font-style:italic;color:var(--tinta);padding:16px 0;font-weight:400}

/* Capas */
.capa{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 500ms var(--ease)}
.capa.on{opacity:1;pointer-events:auto}
.guardando{z-index:6;background:var(--marfil);display:flex;flex-direction:column;align-items:center;justify-content:center}
.guardando img{width:112px;height:112px}
.guardando-t{font-size:46px;font-style:italic;font-weight:400;margin-top:24px}
.hilo{width:260px;height:1px;background:rgba(184,151,90,.28);margin-top:26px}
.hilo>div{height:1px;width:0;background:var(--oro)}
.hilo.ancho{width:100%;margin-top:0}
.inactividad{z-index:7;background:rgba(251,246,234,.9);display:grid;place-items:center;transition-duration:600ms}
.tarjeta-aviso{position:relative;width:680px;padding:58px 64px 50px;background:var(--papel);border:1px solid var(--oro);border-radius:8px;text-align:center;display:flex;flex-direction:column;align-items:center;transform:translateY(10px);transition:transform 600ms var(--ease)}
.port .tarjeta-aviso{width:640px}
.inactividad.on .tarjeta-aviso{transform:none}
.aviso-t{font-size:58px;line-height:1.1;font-weight:400}
.aviso-s{font-size:30px;line-height:1.35;font-style:italic;font-weight:400;color:var(--tinta);margin-top:14px;text-wrap:balance}
.tarjeta-aviso .hilo{width:240px;margin-top:28px}
.tarjeta-aviso .btn-pri{min-width:340px;margin-top:30px}
.modal{z-index:8;background:rgba(251,246,234,.86);display:grid;place-items:center;padding:40px}
.modal-caja{position:relative;max-width:720px;width:100%;padding:40px 44px;background:var(--papel);border:1px solid var(--oro);border-radius:8px}
.port .modal-caja{max-width:680px}
.modal-caja>div{display:none;flex-direction:column;gap:18px}
.modal-caja>div.on{display:flex}
.modal-t{font-size:40px;line-height:1.15;font-weight:400}
.modal-n{font-size:34px;line-height:1.15;font-weight:400}
.modal-s{font-size:24px;line-height:1.4;color:var(--tinta);font-weight:400;min-height:34px}
.modal-acc{display:flex;gap:12px;margin-top:10px}
.modal-acc .btn-op{flex:1;height:72px;font-size:26px}
#modalVideo{width:100%;aspect-ratio:16/9;background:#3f382b;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  #pantallas.saliendo,.pregunta-rota.oculta,.tarjetas.oculta,.cifra,.pronto{transform:none!important}
}