/* Idea B solo en el teléfono, hasta 600 px (registro y completar): toda la pantalla es el pase, con el formulario dentro,
   y una mancha azul lo llena desde la esquina del logo según lo rellenado (pase.js). En tableta y escritorio no cambia nada: queda como en 609d52b. */
/* El radio de la mancha anima a la vez el azul y el color de cada letra. */
@property --r{syntax:"<length>";inherits:true;initial-value:0px}
.pase,.papel,.pase-talon{display:contents}
.relleno,.pase-membrete,.pase-espera,.pase-serie,.pase-foto,.pase-qr,.t-eito{display:none}

@media (max-width:600px){
  body.con-pase{margin:0;background:#e4dfd7}
  .con-pase .barra,.con-pase .lado-viva{display:none}
  .con-pase .escena{display:block;width:auto;margin:0}
  .con-pase .pie{margin:24px 3% 0}

  /* El papel: sombra fuera, muescas del troquel a la altura del corte */
  .pase{display:block;margin:6px;filter:drop-shadow(0 18px 28px rgba(30,24,20,.16)) drop-shadow(0 2px 4px rgba(30,24,20,.08))}
  .papel{--azul:#314edd;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:calc(100dvh - 12px);padding:12px 20px 44px;overflow:hidden;background:var(--blanco);border-radius:var(--radio);
    --m:radial-gradient(circle var(--muesca) at 0 var(--corte,70%),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% var(--corte,70%),#0000 98%,#000) right/51% 100% no-repeat;
    -webkit-mask:var(--m);mask:var(--m)}
  .papel{transition:--r .8s var(--cajon)}
  .papel>*{position:relative;z-index:1}
  .relleno{position:absolute;inset:0;z-index:0;display:block;background:var(--azul);pointer-events:none;clip-path:circle(var(--r) at 0 0)}
  .papel.quieta,.quieta .mojado{transition:none}

  /* Cada letra se pinta con el mismo círculo: blanca dentro (6,4:1 sobre #314edd), su tinta fuera. Vale también donde cruza el borde.
     pase.js pone --x y --y, la posición de cada texto dentro del papel. */
  /* impeccable-disable-next-line gradient-text: Codex: invierte la tinta sobre la mancha de la idea B; esta regla acompaña al CSS exportado a Webflow. */
  .papel .tinta{background-image:radial-gradient(circle var(--r) at calc(-1 * var(--x,0px)) calc(-1 * var(--y,0px)),#fff calc(100% - .5px),var(--fuera,#000) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .papel .sin-pedir.tinta{background-origin:border-box}
  /* El texto de ejemplo también: blanco sobre la mancha, gris #5c5c5c (6,7:1) sobre el papel. */
  .papel .tinta:placeholder-shown{--fuera:var(--tinta-suave)}
  .papel .tinta::placeholder{-webkit-text-fill-color:transparent;opacity:1}
  .papel .tinta.pista{--fuera:var(--tinta-suave)}
  /* Lo que no es letra (subrayados, casillas, marcos, botones) cambia entero cuando la mancha lo cubre entero. */
  .papel :is(.etq,.entrada,.ver,.pista,.fallo,.aviso,.pase-foto,.casilla,.saltar,.sin-pedir,.titulo,.nota,.secundario,.mas,.pase-membrete>*){transition:color .3s ease .2s,filter .3s ease .2s,border-color .3s ease .2s}
  .papel .mojado,.papel .entrada.mojado{color:#fff}
  .papel .mojado a{color:#fff}
  .papel .entrada.mojado{caret-color:#fff}
  .papel .mojado:is(.pase-logo,.pase-hormigas){filter:invert(1)}
  .papel .seguir.mojado{background:#fff;color:#000}
  .papel .casilla input,.papel .circulo{border-color:currentColor}
  .papel .casilla input::after{background:linear-gradient(45deg,transparent 44%,currentColor 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,currentColor 44% 56%,transparent 56%)}
  .papel .casilla input:focus-visible,.papel :is(a,button,select):focus-visible{outline-color:currentColor}
  .papel .seguir:focus-visible{outline-color:#000}
  .papel .seguir.mojado:focus-visible{outline-color:#fff}

  /* Membrete */
  .pase-membrete{display:flex;align-items:center;justify-content:space-between;height:50px;font:400 13px/16px var(--t-greed);text-transform:uppercase;letter-spacing:.04em}
  .pase-logo{display:block;width:72px;transition:filter .3s ease .2s}.pase-logo img{display:block;width:100%;height:auto}
  .pase-hormigas{display:block;width:26px;height:26px}

  /* Campos como filas del pase */
  .papel .paso{display:flex;flex-direction:column;gap:0;max-width:none}
  .papel .imprime{display:contents}
  .papel .campo{padding:9px 0 6px;border:0;border-bottom:1px solid color-mix(in srgb,#000 28%,transparent)}
  .papel .campo:first-child{border-top:0}
  .papel .campo::after{background:currentColor}
  .papel .etq{font-size:13px;line-height:16px;letter-spacing:.07em}
  .papel .entrada{height:30px;margin:2px 0 0;font:400 20px/28px var(--t-suisse);color:inherit}
  .papel .pista{color:var(--tinta-suave);font-size:12px;line-height:16px}
  .papel .fallo{font-size:13px;line-height:17px}

  /* Nombre: grande, con el hueco de la foto al lado */
  .papel .campo-nombre,.papel #fila-nombre{display:grid;grid-template-columns:minmax(0,1fr) 100px;column-gap:12px;align-content:start;min-height:142px;padding:8px 0 10px;border-bottom-color:#000}
  .papel .campo-nombre>:not(.pase-foto),.papel #fila-nombre>:not(.pase-foto){grid-column:1}
  .papel :is(.campo-nombre,#fila-nombre) .entrada{height:auto;margin-top:6px;font:400 50px/1 var(--t-hue);letter-spacing:-.03em}
  .papel :is(.campo-nombre,#fila-nombre) .entrada[data-largo="1"]{font-size:40px}
  .papel :is(.campo-nombre,#fila-nombre) .entrada[data-largo="2"]{font-size:32px}
  @media (max-width:370px){.papel :is(.campo-nombre,#fila-nombre) .entrada{font-size:40px}}
  .papel :is(.campo-nombre,#fila-nombre)>.pista{display:none}
  .pase-foto{grid-column:2;grid-row:1/span 5;position:relative;display:grid;place-items:center;width:100px;height:122px;padding:6px;overflow:hidden;border:1.5px dashed currentColor;border-radius:10px;rotate:2.5deg;font:400 12px/15px var(--t-greed);text-transform:uppercase;letter-spacing:.04em;text-align:center}

  /* Contraseña: la pista va a la derecha de la etiqueta, como en el pase */
  .papel .campo:has(#clave){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"etq pista" "entrada entrada" "fallo fallo";column-gap:12px;align-items:baseline}
  .papel .campo:has(#clave) .etq-fila{grid-area:etq;display:contents}
  .papel .campo:has(#clave) .etq{grid-area:etq}
  .papel .campo:has(#clave) .ver{grid-area:pista;justify-self:end;margin:-12px -4px -12px 0;padding:12px 4px;font-size:13px;line-height:16px}
  .papel #a-clave{grid-area:pista;margin:0 52px 0 0;align-self:baseline}
  .papel #clave{grid-area:entrada}
  .papel #av-clave{grid-area:fallo}
  .papel .campo:has(#clave):has(.fallo:not([hidden])) #a-clave{display:block}
  .papel .campo:not(.campo-nombre):not(:has(#clave))>.pista{display:none}

  .papel .casilla{min-height:44px;padding:10px 0 0;font-size:13px;line-height:18px}
  .papel .casilla input{width:20px;height:20px}
  .papel .fallo-casilla{margin-left:30px}
  .papel .botones{margin-top:10px}
  .papel .seguir{transition:transform .14s var(--sal),background-color .3s,color .3s}
  /* Completar: el título y el botón bajan al talón, después de las filas */
  .papel #formulario>.cab{order:5}
  .papel #formulario :is(.verificacion,.aviso,.botones){order:6}
  .papel .pase-talon .campo{border:0}

  /* El talón: perforado, con el QR que falta, el código o el final */
  .corte{position:relative;padding-top:18px;margin-top:14px}
  .corte::before{content:"";position:absolute;left:calc(var(--muesca) - 12px);right:calc(var(--muesca) - 12px);top:-2px;height:4px;background:radial-gradient(circle,currentColor 1.6px,transparent 2px) 0 50%/11px 4px repeat-x;opacity:.45}
  .pase-talon{display:block}
  .pase-espera{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;font-size:14px;line-height:20px}
  .pase-espera p{margin:0 0 4px}
  .pase-espera a{display:inline-flex;align-items:center;min-height:44px}
  .hueco-qr{width:96px;aspect-ratio:1;border:1.5px dashed #000;border-radius:10px}
  .papel .pase-talon .paso,.papel .corte.paso{gap:8px}
  .papel :is(.pase-talon,.corte) .titulo{font:400 30px/1 var(--t-hue);letter-spacing:-.02em}
  .papel :is(.pase-talon,.corte) .nota{max-width:none;margin:6px 0 4px;font-size:14px;line-height:20px}
  .papel .pase-talon .pedido span{font-size:36px}
  .pase-serie{position:absolute;left:20px;right:20px;bottom:14px;display:block;margin:0;font:400 12px/16px var(--t-greed);text-transform:uppercase;letter-spacing:.06em}

  /* Registro: el título va al lector de pantalla; lo visible es el pase */
  .pase-registro #formulario>.cab{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .papel #formulario .enlaces{display:none}
  /* Con el código pedido, los datos se quedan sellados arriba y el talón pide el código */
  .escena:not([data-fase="datos"]) #formulario[hidden]{display:flex!important}
  .escena:not([data-fase="datos"]) #formulario :is(.casilla,.fallo-casilla,.verificacion,.aviso,.botones){display:none}
  .escena:not([data-fase="datos"]) .pase-espera{display:none}

  /* Completar: lo saltado y lo vacío al terminar llevan el sello «sin pedir» */
  .pase-qr{display:grid;justify-items:center;gap:8px;margin-top:8px;text-align:center}
  .pase-qr .qr{width:132px;padding:8px;border-radius:12px;background:#fff}
  #final:has(.pase-qr:not([hidden])) .t-dentro{display:none}
  #final:has(.pase-qr:not([hidden])) .t-eito{display:inline}
  /* Al final, etiqueta y valor (o sello) comparten fila; los controles ocultos dejan de reservar espacio. */
  .escena[data-fase="final"] .linea{padding:4px 0;grid-template-columns:8.5em minmax(0,1fr);grid-template-areas:"etq valor"}
  .escena[data-fase="final"] .linea .sin-pedir{grid-area:valor;display:none}
  .escena[data-fase="final"] .subir{justify-content:flex-end}
  .escena[data-fase="final"] .linea:is(:has(.entrada:placeholder-shown),:has(select option[value=""]:checked)) .valor,
  .escena[data-fase="final"] .linea:has(.circulo:not(.puesta)) .valor{display:none}
  .escena[data-fase="final"] :is(.campo-nombre,#fila-nombre){min-height:0}
  .escena[data-fase="final"] .papel{padding-bottom:36px}
  .escena[data-fase="final"] .corte{padding-top:12px;margin-top:8px}
  #final:has(.pase-qr:not([hidden])) .titulo{font-size:28px}
  .pase-qr p{font-size:19px}
  .pase-qr .qr svg{display:block;width:100%;height:auto}
  .pase-qr p{margin:0;max-width:30ch;font:400 22px/1.15 var(--t-hue);letter-spacing:-.01em;text-wrap:balance}
  #final:has(.pase-qr:not([hidden])){justify-items:center;text-align:center}
  #final:has(.pase-qr:not([hidden])) .seguir{width:100%}
  .escena[data-fase="final"] #formulario :is(.cab,.permisos,#fila-terminos,.verificacion,.aviso,.botones,.notas){display:none}
  .escena[data-fase="final"] :is(.saltar,.subir .mas){display:none}
  .escena[data-fase="final"] .linea:is(:has(.entrada:placeholder-shown),:has(select option[value=""]:checked),:has(.circulo:not(.puesta))) .sin-pedir{display:block;visibility:visible}
  .papel .linea{border-bottom:1px solid color-mix(in srgb,#000 28%,transparent)}
  .papel .linea .notas>.pista{display:none}
  .papel .linea .entrada{height:30px;font-size:20px}
  .papel select.entrada{background:none}
  .papel .permisos{border-bottom:0}
  .papel .permisos .casilla small,.papel #fila-permiso small{color:inherit}
  .escena[data-fase="final"] .linea .entrada:placeholder-shown,.escena[data-fase="final"] .linea:has(select option[value=""]:checked) select{visibility:hidden}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .papel,.papel .mojado,.papel :is(.etq,.entrada,.ver,.pista,.pase-foto,.casilla,.titulo,.nota,.seguir){transition:none}
}