/* ==========================================================================
   ÁNIMA · Madrid 2026 — Plataforma de voluntariado
   Sistema visual compartido con diademuertosmadrid.com

   Los tokens, las tipografías (Fraunces + Outfit), la nav, los pliegos de
   papel picado, el grano del cartel, el botón «Participa» y el pie son los
   de la web del festival: quien llega desde «Participa» tiene que sentir que
   sigue en el mismo sitio. Encima de esa base van los componentes propios de
   la plataforma (formularios, tarjetas, tablas, panel, escáner).

   Dos registros:
   · Páginas públicas (`body.publica`): nav fija, cabecera-pliego naranja con
     festón, cuerpo sobre papel, pie noche. Igual que la web.
   · Panel y escaneo (`body.app-page`): misma paleta y letra, versión sobria:
     raíl lateral noche, tarjetas hueso sobre papel, sin festones.
   ========================================================================== */

:root {
  /* --- Paleta, sacada del póster (idéntica a la web) --------------------- */
  --naranja:      #C9450E;   /* cabecera del póster */
  --naranja-2:    #E0621C;
  --ambar:        #F49A3C;
  --ambar-claro:  #FFC46A;   /* pie del póster */
  --hueso:        #FBEEDC;   /* el hueso del esqueleto y el logo */
  --papel:        #F6E3C8;
  --granate:      #8F1A2A;   /* las calaveras */
  --noche:        #4A0C17;
  --tinta:        #33090F;
  --amarillo:     #F9C93C;   /* las fechas */

  /* --- Semánticos sobre fondo claro (se invierten en los bloques oscuros) -- */
  --texto:        var(--tinta);
  --texto-2:      #6B3A3F;
  --texto-3:      #8C5A5E;
  --linea:        rgba(143,26,42,.22);
  --linea-fuerte: rgba(143,26,42,.45);
  --superficie:   var(--hueso);
  --superficie-2: #fff;
  --error:        #B5261E;

  /* Alias que usan los scripts y las plantillas (nombres de la paleta antigua) */
  --rosa:        var(--naranja);
  --rosa-h:      var(--naranja-2);
  --cempasuchil: var(--ambar);
  --oro:         #A8640A;
  --oro-h:       #C27A14;
  --jade:        #2E7D5B;
  --jade-h:      #3C9A72;
  --azul:        #2F6E8F;
  --sangre:      #B5261E;
  --copal:       var(--texto-2);
  --copal-2:     var(--texto-3);
  --borde:       var(--linea);
  --borde-viva:  var(--linea-fuerte);

  /* --- Tipografía ----------------------------------------------------------- */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:    'Outfit', 'Segoe UI', system-ui, sans-serif;
  --body:    var(--sans);
  --sans-cond: var(--sans);
  --mono:    'Cascadia Mono', 'Cascadia Code', Consolas, 'SF Mono', 'Roboto Mono', monospace;

  /* --- Medidas (las de la web) -------------------------------------------- */
  --ancho:  1180px;
  --gutter: clamp(18px, 4vw, 40px);
  --b:      60px;                 /* ancho de la celosía de papel picado */
  --rail:   var(--b);
  --hueco:  14px;                 /* blanco que asoma entre pliego y pliego */
  --nav-h:  76px;

  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-xl: 20px;
  --gap: 14px;
  --tap: 46px;
  --shell: 1400px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  --sombra:    0 10px 30px rgba(74,12,23,.16);
  --sombra-sm: 0 2px 8px rgba(74,12,23,.12);
  --anillo:    0 0 0 3px rgba(249,201,60,.55);

  /* Teselas de papel picado y grano del póster: mismas máscaras que la web */
  --pp-arriba:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' width='240' height='240'><filter id='s' x='-12' y='-12' width='84' height='84' filterUnits='userSpaceOnUse'><feGaussianBlur stdDeviation='0.6'/></filter><g filter='url(%23s)'><path fill-rule='evenodd' d='M-12,15.91 -11.5,16.03 -11,16.15 -10.5,16.31 -10,16.51 -9.5,16.77 -9,17.09 -8.5,17.48 -8,17.91 -7.5,18.39 -7,18.9 -6.5,19.42 -6,19.96 -5.5,20.52 -5,21.09 -4.5,21.69 -4,22.3 -3.5,22.93 -3,23.56 -2.5,24.17 -2,24.76 -1.5,25.31 -1,25.84 -0.5,26.35 0,26.88 0.5,25.6 1,24.42 1.5,23.36 2,22.43 2.5,21.66 3,21.02 3.5,20.51 4,20.07 4.5,19.69 5,19.32 5.5,18.95 6,18.56 6.5,18.15 7,17.72 7.5,17.28 8,16.84 8.5,16.4 9,15.95 9.5,15.5 10,15.05 10.5,14.58 11,14.12 11.5,13.65 12,13.2 12.5,12.78 13,12.39 13.5,12.05 14,11.76 14.5,11.5 15,11.27 15.5,11.07 16,10.87 16.5,10.68 17,10.5 17.5,10.32 18,10.15 18.5,10 19,9.88 19.5,9.77 20,9.69 20.5,9.63 21,9.59 21.5,9.56 22,9.55 22.5,9.55 23,9.56 23.5,9.59 24,9.63 24.5,9.67 25,9.7 25.5,9.72 26,9.7 26.5,9.64 27,9.55 27.5,9.41 28,9.25 28.5,9.07 29,8.89 29.5,8.72 30,8.57 30.5,8.45 31,8.36 31.5,8.31 32,8.27 32.5,8.27 33,8.28 33.5,8.32 34,8.37 34.5,8.44 35,8.53 35.5,8.64 36,8.75 36.5,8.88 37,9.02 37.5,9.17 38,9.35 38.5,9.56 39,9.8 39.5,10.09 40,10.42 40.5,10.8 41,11.21 41.5,11.66 42,12.11 42.5,12.57 43,13.02 43.5,13.46 44,13.87 44.5,14.25 45,14.6 45.5,14.91 46,15.19 46.5,15.42 47,15.61 47.5,15.77 48,15.91 48.5,16.03 49,16.15 49.5,16.31 50,16.51 50.5,16.77 51,17.09 51.5,17.48 52,17.91 52.5,18.39 53,18.9 53.5,19.42 54,19.96 54.5,20.52 55,21.09 55.5,21.69 56,22.3 56.5,22.93 57,23.56 57.5,24.17 58,24.76 58.5,25.31 59,25.84 59.5,26.35 60,26.88 60.5,25.6 61,24.42 61.5,23.36 62,22.43 62.5,21.66 63,21.02 63.5,20.51 64,20.07 64.5,19.69 65,19.32 65.5,18.95 66,18.56 66.5,18.15 67,17.72 67.5,17.28 68,16.84 68.5,16.4 69,15.95 69.5,15.5 70,15.05 70.5,14.58 71,14.12 71.5,13.65 72,13.2 L72,72 -12,72Z M30,23.49 31.01,24.41 31.96,25.38 32.92,26.34 33.93,27.25 35,28.08 36.11,28.84 37.24,29.58 38.36,30.35 39.44,31.16 40.51,31.98 41.59,32.79 42.72,33.54 43.88,34.24 45.06,35.08 44.06,35.99 42.98,36.8 41.81,37.49 40.57,38.09 39.32,38.68 38.12,39.34 37.01,40.11 36,41.01 35.05,41.99 34.11,42.99 33.15,43.95 32.13,44.84 31.07,45.68 30.01,46.48 28.96,45.64 27.89,44.81 26.82,44 25.73,43.19 24.65,42.38 23.57,41.57 22.48,40.78 21.38,39.99 20.27,39.22 19.16,38.45 18.06,37.67 16.96,36.88 15.86,36.1 14.73,34.64 15.7,33.69 16.64,32.71 17.59,31.72 18.58,30.79 19.66,29.98 20.84,29.31 22.1,28.73 23.38,28.18 24.62,27.58 25.79,26.88 26.86,26.06 27.89,25.18 28.92,24.31Z'/><circle cx='15.54' cy='7.71' r='0.48'/><circle cx='50.96' cy='15.81' r='0.31'/><circle cx='8.83' cy='14.74' r='0.5'/><circle cx='7.81' cy='14.54' r='0.3'/><circle cx='17.68' cy='8.22' r='0.54'/><circle cx='36.5' cy='8.05' r='0.32'/><circle cx='8.8' cy='10.82' r='0.53'/><circle cx='48.36' cy='11.34' r='0.5'/><circle cx='56.96' cy='19.23' r='0.32'/><circle cx='51' cy='14.82' r='0.51'/><circle cx='33.85' cy='6.32' r='0.36'/><circle cx='25.79' cy='8.08' r='0.26'/><circle cx='49.18' cy='11.88' r='0.59'/><circle cx='41.46' cy='9.04' r='0.5'/><circle cx='8.09' cy='13.47' r='0.39'/><circle cx='10.6' cy='13.19' r='0.42'/></g></svg>");
  --pp-abajo:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' width='240' height='240'><filter id='s' x='-12' y='-12' width='84' height='84' filterUnits='userSpaceOnUse'><feGaussianBlur stdDeviation='0.6'/></filter><g filter='url(%23s)'><path fill-rule='evenodd' d='M-12,44.09 -11.5,43.97 -11,43.85 -10.5,43.69 -10,43.49 -9.5,43.23 -9,42.91 -8.5,42.52 -8,42.09 -7.5,41.61 -7,41.1 -6.5,40.58 -6,40.04 -5.5,39.48 -5,38.91 -4.5,38.31 -4,37.7 -3.5,37.07 -3,36.44 -2.5,35.83 -2,35.24 -1.5,34.69 -1,34.16 -0.5,33.65 0,33.12 0.5,34.4 1,35.58 1.5,36.64 2,37.57 2.5,38.34 3,38.98 3.5,39.49 4,39.93 4.5,40.31 5,40.68 5.5,41.05 6,41.44 6.5,41.85 7,42.28 7.5,42.72 8,43.16 8.5,43.6 9,44.05 9.5,44.5 10,44.95 10.5,45.42 11,45.88 11.5,46.35 12,46.8 12.5,47.22 13,47.61 13.5,47.95 14,48.24 14.5,48.5 15,48.73 15.5,48.93 16,49.13 16.5,49.32 17,49.5 17.5,49.68 18,49.85 18.5,50 19,50.12 19.5,50.23 20,50.31 20.5,50.37 21,50.41 21.5,50.44 22,50.45 22.5,50.45 23,50.44 23.5,50.41 24,50.37 24.5,50.33 25,50.3 25.5,50.28 26,50.3 26.5,50.36 27,50.45 27.5,50.59 28,50.75 28.5,50.93 29,51.11 29.5,51.28 30,51.43 30.5,51.55 31,51.64 31.5,51.69 32,51.73 32.5,51.73 33,51.72 33.5,51.68 34,51.63 34.5,51.56 35,51.47 35.5,51.36 36,51.25 36.5,51.12 37,50.98 37.5,50.83 38,50.65 38.5,50.44 39,50.2 39.5,49.91 40,49.58 40.5,49.2 41,48.79 41.5,48.34 42,47.89 42.5,47.43 43,46.98 43.5,46.54 44,46.13 44.5,45.75 45,45.4 45.5,45.09 46,44.81 46.5,44.58 47,44.39 47.5,44.23 48,44.09 48.5,43.97 49,43.85 49.5,43.69 50,43.49 50.5,43.23 51,42.91 51.5,42.52 52,42.09 52.5,41.61 53,41.1 53.5,40.58 54,40.04 54.5,39.48 55,38.91 55.5,38.31 56,37.7 56.5,37.07 57,36.44 57.5,35.83 58,35.24 58.5,34.69 59,34.16 59.5,33.65 60,33.12 60.5,34.4 61,35.58 61.5,36.64 62,37.57 62.5,38.34 63,38.98 63.5,39.49 64,39.93 64.5,40.31 65,40.68 65.5,41.05 66,41.44 66.5,41.85 67,42.28 67.5,42.72 68,43.16 68.5,43.6 69,44.05 69.5,44.5 70,44.95 70.5,45.42 71,45.88 71.5,46.35 72,46.8 L72,-12 -12,-12Z M30,36.51 31.01,35.59 31.96,34.62 32.92,33.66 33.93,32.75 35,31.92 36.11,31.16 37.24,30.42 38.36,29.65 39.44,28.84 40.51,28.02 41.59,27.21 42.72,26.46 43.88,25.76 45.06,24.92 44.06,24.01 42.98,23.2 41.81,22.51 40.57,21.91 39.32,21.32 38.12,20.66 37.01,19.89 36,18.99 35.05,18.01 34.11,17.01 33.15,16.05 32.13,15.16 31.07,14.32 30.01,13.52 28.96,14.36 27.89,15.19 26.82,16 25.73,16.81 24.65,17.62 23.57,18.43 22.48,19.22 21.38,20.01 20.27,20.78 19.16,21.55 18.06,22.33 16.96,23.12 15.86,23.9 14.73,25.36 15.7,26.31 16.64,27.29 17.59,28.28 18.58,29.21 19.66,30.02 20.84,30.69 22.1,31.27 23.38,31.82 24.62,32.42 25.79,33.12 26.86,33.94 27.89,34.82 28.92,35.69Z'/><circle cx='15.54' cy='52.29' r='0.48'/><circle cx='50.96' cy='44.19' r='0.31'/><circle cx='8.83' cy='45.26' r='0.5'/><circle cx='7.81' cy='45.46' r='0.3'/><circle cx='17.68' cy='51.78' r='0.54'/><circle cx='36.5' cy='51.95' r='0.32'/><circle cx='8.8' cy='49.18' r='0.53'/><circle cx='48.36' cy='48.66' r='0.5'/><circle cx='56.96' cy='40.77' r='0.32'/><circle cx='51' cy='45.18' r='0.51'/><circle cx='33.85' cy='53.68' r='0.36'/><circle cx='25.79' cy='51.92' r='0.26'/><circle cx='49.18' cy='48.12' r='0.59'/><circle cx='41.46' cy='50.96' r='0.5'/><circle cx='8.09' cy='46.53' r='0.39'/><circle cx='10.6' cy='46.81' r='0.42'/></g></svg>");
  --pp-izq:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' width='240' height='240'><filter id='s' x='-12' y='-12' width='84' height='84' filterUnits='userSpaceOnUse'><feGaussianBlur stdDeviation='0.6'/></filter><g filter='url(%23s)'><path fill-rule='evenodd' d='M15.91,-12 16.03,-11.5 16.15,-11 16.31,-10.5 16.51,-10 16.77,-9.5 17.09,-9 17.48,-8.5 17.91,-8 18.39,-7.5 18.9,-7 19.42,-6.5 19.96,-6 20.52,-5.5 21.09,-5 21.69,-4.5 22.3,-4 22.93,-3.5 23.56,-3 24.17,-2.5 24.76,-2 25.31,-1.5 25.84,-1 26.35,-0.5 26.88,0 25.6,0.5 24.42,1 23.36,1.5 22.43,2 21.66,2.5 21.02,3 20.51,3.5 20.07,4 19.69,4.5 19.32,5 18.95,5.5 18.56,6 18.15,6.5 17.72,7 17.28,7.5 16.84,8 16.4,8.5 15.95,9 15.5,9.5 15.05,10 14.58,10.5 14.12,11 13.65,11.5 13.2,12 12.78,12.5 12.39,13 12.05,13.5 11.76,14 11.5,14.5 11.27,15 11.07,15.5 10.87,16 10.68,16.5 10.5,17 10.32,17.5 10.15,18 10,18.5 9.88,19 9.77,19.5 9.69,20 9.63,20.5 9.59,21 9.56,21.5 9.55,22 9.55,22.5 9.56,23 9.59,23.5 9.63,24 9.67,24.5 9.7,25 9.72,25.5 9.7,26 9.64,26.5 9.55,27 9.41,27.5 9.25,28 9.07,28.5 8.89,29 8.72,29.5 8.57,30 8.45,30.5 8.36,31 8.31,31.5 8.27,32 8.27,32.5 8.28,33 8.32,33.5 8.37,34 8.44,34.5 8.53,35 8.64,35.5 8.75,36 8.88,36.5 9.02,37 9.17,37.5 9.35,38 9.56,38.5 9.8,39 10.09,39.5 10.42,40 10.8,40.5 11.21,41 11.66,41.5 12.11,42 12.57,42.5 13.02,43 13.46,43.5 13.87,44 14.25,44.5 14.6,45 14.91,45.5 15.19,46 15.42,46.5 15.61,47 15.77,47.5 15.91,48 16.03,48.5 16.15,49 16.31,49.5 16.51,50 16.77,50.5 17.09,51 17.48,51.5 17.91,52 18.39,52.5 18.9,53 19.42,53.5 19.96,54 20.52,54.5 21.09,55 21.69,55.5 22.3,56 22.93,56.5 23.56,57 24.17,57.5 24.76,58 25.31,58.5 25.84,59 26.35,59.5 26.88,60 25.6,60.5 24.42,61 23.36,61.5 22.43,62 21.66,62.5 21.02,63 20.51,63.5 20.07,64 19.69,64.5 19.32,65 18.95,65.5 18.56,66 18.15,66.5 17.72,67 17.28,67.5 16.84,68 16.4,68.5 15.95,69 15.5,69.5 15.05,70 14.58,70.5 14.12,71 13.65,71.5 13.2,72 L72,72 72,-12Z M23.49,30 24.41,31.01 25.38,31.96 26.34,32.92 27.25,33.93 28.08,35 28.84,36.11 29.58,37.24 30.35,38.36 31.16,39.44 31.98,40.51 32.79,41.59 33.54,42.72 34.24,43.88 35.08,45.06 35.99,44.06 36.8,42.98 37.49,41.81 38.09,40.57 38.68,39.32 39.34,38.12 40.11,37.01 41.01,36 41.99,35.05 42.99,34.11 43.95,33.15 44.84,32.13 45.68,31.07 46.48,30.01 45.64,28.96 44.81,27.89 44,26.82 43.19,25.73 42.38,24.65 41.57,23.57 40.78,22.48 39.99,21.38 39.22,20.27 38.45,19.16 37.67,18.06 36.88,16.96 36.1,15.86 34.64,14.73 33.69,15.7 32.71,16.64 31.72,17.59 30.79,18.58 29.98,19.66 29.31,20.84 28.73,22.1 28.18,23.38 27.58,24.62 26.88,25.79 26.06,26.86 25.18,27.89 24.31,28.92Z'/><circle cx='7.71' cy='15.54' r='0.48'/><circle cx='15.81' cy='50.96' r='0.31'/><circle cx='14.74' cy='8.83' r='0.5'/><circle cx='14.54' cy='7.81' r='0.3'/><circle cx='8.22' cy='17.68' r='0.54'/><circle cx='8.05' cy='36.5' r='0.32'/><circle cx='10.82' cy='8.8' r='0.53'/><circle cx='11.34' cy='48.36' r='0.5'/><circle cx='19.23' cy='56.96' r='0.32'/><circle cx='14.82' cy='51' r='0.51'/><circle cx='6.32' cy='33.85' r='0.36'/><circle cx='8.08' cy='25.79' r='0.26'/><circle cx='11.88' cy='49.18' r='0.59'/><circle cx='9.04' cy='41.46' r='0.5'/><circle cx='13.47' cy='8.09' r='0.39'/><circle cx='13.19' cy='10.6' r='0.42'/></g></svg>");
  --pp-der:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' width='240' height='240'><filter id='s' x='-12' y='-12' width='84' height='84' filterUnits='userSpaceOnUse'><feGaussianBlur stdDeviation='0.6'/></filter><g filter='url(%23s)'><path fill-rule='evenodd' d='M44.09,-12 43.97,-11.5 43.85,-11 43.69,-10.5 43.49,-10 43.23,-9.5 42.91,-9 42.52,-8.5 42.09,-8 41.61,-7.5 41.1,-7 40.58,-6.5 40.04,-6 39.48,-5.5 38.91,-5 38.31,-4.5 37.7,-4 37.07,-3.5 36.44,-3 35.83,-2.5 35.24,-2 34.69,-1.5 34.16,-1 33.65,-0.5 33.12,0 34.4,0.5 35.58,1 36.64,1.5 37.57,2 38.34,2.5 38.98,3 39.49,3.5 39.93,4 40.31,4.5 40.68,5 41.05,5.5 41.44,6 41.85,6.5 42.28,7 42.72,7.5 43.16,8 43.6,8.5 44.05,9 44.5,9.5 44.95,10 45.42,10.5 45.88,11 46.35,11.5 46.8,12 47.22,12.5 47.61,13 47.95,13.5 48.24,14 48.5,14.5 48.73,15 48.93,15.5 49.13,16 49.32,16.5 49.5,17 49.68,17.5 49.85,18 50,18.5 50.12,19 50.23,19.5 50.31,20 50.37,20.5 50.41,21 50.44,21.5 50.45,22 50.45,22.5 50.44,23 50.41,23.5 50.37,24 50.33,24.5 50.3,25 50.28,25.5 50.3,26 50.36,26.5 50.45,27 50.59,27.5 50.75,28 50.93,28.5 51.11,29 51.28,29.5 51.43,30 51.55,30.5 51.64,31 51.69,31.5 51.73,32 51.73,32.5 51.72,33 51.68,33.5 51.63,34 51.56,34.5 51.47,35 51.36,35.5 51.25,36 51.12,36.5 50.98,37 50.83,37.5 50.65,38 50.44,38.5 50.2,39 49.91,39.5 49.58,40 49.2,40.5 48.79,41 48.34,41.5 47.89,42 47.43,42.5 46.98,43 46.54,43.5 46.13,44 45.75,44.5 45.4,45 45.09,45.5 44.81,46 44.58,46.5 44.39,47 44.23,47.5 44.09,48 43.97,48.5 43.85,49 43.69,49.5 43.49,50 43.23,50.5 42.91,51 42.52,51.5 42.09,52 41.61,52.5 41.1,53 40.58,53.5 40.04,54 39.48,54.5 38.91,55 38.31,55.5 37.7,56 37.07,56.5 36.44,57 35.83,57.5 35.24,58 34.69,58.5 34.16,59 33.65,59.5 33.12,60 34.4,60.5 35.58,61 36.64,61.5 37.57,62 38.34,62.5 38.98,63 39.49,63.5 39.93,64 40.31,64.5 40.68,65 41.05,65.5 41.44,66 41.85,66.5 42.28,67 42.72,67.5 43.16,68 43.6,68.5 44.05,69 44.5,69.5 44.95,70 45.42,70.5 45.88,71 46.35,71.5 46.8,72 L-12,72 -12,-12Z M36.51,30 35.59,31.01 34.62,31.96 33.66,32.92 32.75,33.93 31.92,35 31.16,36.11 30.42,37.24 29.65,38.36 28.84,39.44 28.02,40.51 27.21,41.59 26.46,42.72 25.76,43.88 24.92,45.06 24.01,44.06 23.2,42.98 22.51,41.81 21.91,40.57 21.32,39.32 20.66,38.12 19.89,37.01 18.99,36 18.01,35.05 17.01,34.11 16.05,33.15 15.16,32.13 14.32,31.07 13.52,30.01 14.36,28.96 15.19,27.89 16,26.82 16.81,25.73 17.62,24.65 18.43,23.57 19.22,22.48 20.01,21.38 20.78,20.27 21.55,19.16 22.33,18.06 23.12,16.96 23.9,15.86 25.36,14.73 26.31,15.7 27.29,16.64 28.28,17.59 29.21,18.58 30.02,19.66 30.69,20.84 31.27,22.1 31.82,23.38 32.42,24.62 33.12,25.79 33.94,26.86 34.82,27.89 35.69,28.92Z'/><circle cx='52.29' cy='15.54' r='0.48'/><circle cx='44.19' cy='50.96' r='0.31'/><circle cx='45.26' cy='8.83' r='0.5'/><circle cx='45.46' cy='7.81' r='0.3'/><circle cx='51.78' cy='17.68' r='0.54'/><circle cx='51.95' cy='36.5' r='0.32'/><circle cx='49.18' cy='8.8' r='0.53'/><circle cx='48.66' cy='48.36' r='0.5'/><circle cx='40.77' cy='56.96' r='0.32'/><circle cx='45.18' cy='51' r='0.51'/><circle cx='53.68' cy='33.85' r='0.36'/><circle cx='51.92' cy='25.79' r='0.26'/><circle cx='48.12' cy='49.18' r='0.59'/><circle cx='50.96' cy='41.46' r='0.5'/><circle cx='46.53' cy='8.09' r='0.39'/><circle cx='46.81' cy='10.6' r='0.42'/></g></svg>");
  --grano:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' width='720' height='720'><filter id='g' x='0' y='0' width='240' height='240' filterUnits='userSpaceOnUse'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='5' stitchTiles='stitch' result='n1'/><feColorMatrix in='n1' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  5 0 0 0 -2.75' result='d'/><feComponentTransfer in='d' result='dark'><feFuncA type='discrete' tableValues='0 0.18'/></feComponentTransfer><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' seed='8' stitchTiles='stitch' result='n2'/><feColorMatrix in='n2' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 4 0 0 -2.05' result='l'/><feComponentTransfer in='l' result='light'><feFuncA type='discrete' tableValues='0 0.14'/></feComponentTransfer><feTurbulence type='fractalNoise' baseFrequency='0.14' numOctaves='2' seed='12' stitchTiles='stitch' result='n3'/><feColorMatrix in='n3' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0.21000000000000002 0 -0.084' result='mot'/><feMerge><feMergeNode in='mot'/><feMergeNode in='light'/><feMergeNode in='dark'/></feMerge></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
}

/* Bloques oscuros (noche / granate): los semánticos se invierten para que
   las mismas plantillas se lean bien encima. */
.oscuro, .nav, .cabecera, .footer, .app-side, .topbar, .tabbar, .veredicto, .sheet-back {
  --texto:        var(--hueso);
  --texto-2:      rgba(251,238,220,.82);
  --texto-3:      rgba(251,238,220,.62);
  --linea:        rgba(251,238,220,.22);
  --linea-fuerte: rgba(251,238,220,.5);
  --oro:          var(--amarillo);
  --oro-h:        #FFD966;
  --jade:         #8AD7AE;
  --azul:         #8CC7E3;
  --error:        #FF9A9A;
  --copal: var(--texto-2); --copal-2: var(--texto-3); --borde: var(--linea); --borde-viva: var(--linea-fuerte);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh; min-height: 100dvh;
  background: #fff;
  color: var(--texto);
  font: 400 1.02rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;
  overflow-wrap: break-word;
}
body.app-page { background: var(--papel); }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--granate); text-decoration-color: rgba(143,26,42,.4); text-underline-offset: 3px; }
a:hover { color: var(--naranja); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--amarillo); color: var(--tinta); }
small { font-size: .8rem; }

h1, h2, h3, h4 { font-family: var(--display); font-variation-settings: "SOFT" 50; line-height: 1.05; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p  { margin: 0 0 .85em; text-wrap: pretty; }

.eyebrow {
  font-family: var(--sans); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; color: var(--naranja);
  margin: 0 0 .5em;
}
.eyebrow.rosa  { color: var(--naranja); }
.eyebrow.copal { color: var(--texto-3); }
.eyebrow.jade  { color: var(--jade); }
.eyebrow.oro   { color: var(--oro); }

.lead  { font-size: 1.08rem; line-height: 1.5; color: var(--texto-2); }
.muted { color: var(--texto-3); }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.rosa { color: var(--naranja); }
.oro  { color: var(--oro); }
.jade { color: var(--jade); }
.copal { color: var(--texto-2); }
.marco {
  font-family: var(--display); font-style: italic; font-weight: 600;
  color: var(--granate); font-size: 1.1rem;
}

.sr-only, .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; top: -80px; left: 16px; z-index: 300; background: var(--amarillo); color: var(--tinta); font-weight: 700; padding: 12px 18px; border-radius: 0 0 10px 10px; text-decoration: none; }
.saltar:focus { top: 0; }

/* ==========================================================================
   Grano, pliegos y contenedor (de la web)
   ========================================================================== */
.con-grano { position: relative; isolation: isolate; }
.con-grano::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grano) 0 0/240px 240px;
}
.pliego {
  -webkit-mask: var(--pp-arriba) 50% 0/var(--b) var(--b) repeat-x, var(--pp-abajo) 50% 100%/var(--b) var(--b) repeat-x,
       linear-gradient(#000,#000) 0 var(--b)/100% calc(100% - 2*var(--b)) no-repeat;
          mask: var(--pp-arriba) 50% 0/var(--b) var(--b) repeat-x, var(--pp-abajo) 50% 100%/var(--b) var(--b) repeat-x,
       linear-gradient(#000,#000) 0 var(--b)/100% calc(100% - 2*var(--b)) no-repeat;
}
/* Solo festón arriba (el último pliego de la página, el pie) */
.pliego--arriba {
  -webkit-mask: var(--pp-arriba) 50% 0/var(--b) var(--b) repeat-x,
       linear-gradient(#000,#000) 0 var(--b)/100% calc(100% - var(--b)) no-repeat;
          mask: var(--pp-arriba) 50% 0/var(--b) var(--b) repeat-x,
       linear-gradient(#000,#000) 0 var(--b)/100% calc(100% - var(--b)) no-repeat;
}
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.contenedor--estrecho { max-width: 820px; }
.contenedor--medio { max-width: 1040px; }

/* ==========================================================================
   NAV — la misma barra que la web
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  color: var(--hueso);
  transition: background .35s ease, box-shadow .35s ease;
}
.nav__inner {
  max-width: var(--ancho); margin-inline: auto;
  min-height: var(--nav-h); padding: 10px max(var(--gutter), calc(var(--rail) + 12px));
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
}
.nav.pegada { background: rgba(74,12,23,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(51,9,15,.35); }
.nav__logo { display: block; flex: 0 0 auto; color: var(--hueso); transition: transform .2s; }
.nav__logo:hover { transform: scale(1.05); color: var(--hueso); }
.nav__logo svg { height: 44px; width: auto; }
.nav__links { display: flex; gap: clamp(14px, 2vw, 30px); list-style: none; margin-left: auto; }
.nav__links a {
  color: inherit; text-decoration: none; font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: border-color .2s, color .2s;
}
.nav__links a:hover, .nav__links a.activo { border-color: var(--amarillo); color: inherit; }
.nav .btn--participa { padding: .85em 1.5em; font-size: 1.05rem; box-shadow: 0 4px 0 var(--granate); }
.nav .btn--participa:hover { box-shadow: 0 7px 0 var(--granate); }
.nav__burger {
  display: none; width: 46px; height: 44px; border-radius: 12px; position: relative;
  border: 2px solid rgba(251,238,220,.55);
}
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 2.5px; background: var(--hueso); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav__burger span:nth-child(1) { top: 13px; } .nav__burger span:nth-child(2) { top: 19.5px; } .nav__burger span:nth-child(3) { top: 26px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  --bg: transparent; --fg: var(--granate); --bd: var(--linea-fuerte);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 9px 20px;
  max-width: 100%;
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--bd); border-radius: 999px;
  font: 700 .95rem/1.2 var(--sans); letter-spacing: .01em; text-align: center;
  cursor: pointer; text-decoration: none;
  /* El texto puede partirse en dos líneas: en móvil, un botón con una frase
     larga («Responde a las preguntas anteriores para continuar») no cabe en
     una sola y se salía de la pantalla. */
  white-space: normal; overflow-wrap: break-word;
  transition: transform .18s ease, box-shadow .18s ease, background .2s, color .2s, border-color .2s;
}
.btn:hover:not(:disabled) { color: var(--fg); background: rgba(143,26,42,.07); border-color: var(--granate); }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* El botón «Participa» de la web: amarillo, con sombra dura granate */
.btn-primary, .btn--participa {
  --bg: var(--amarillo); --fg: var(--tinta); --bd: transparent;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--granate);
}
.btn-primary:hover:not(:disabled), .btn--participa:hover { background: var(--amarillo); border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 0 var(--granate); }
.btn-primary:active:not(:disabled), .btn--participa:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--granate); }
.btn-primary:disabled { box-shadow: 0 3px 0 rgba(143,26,42,.5); }

.btn--linea { --fg: var(--hueso); --bd: rgba(251,238,220,.75); font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.btn--linea:hover { background: rgba(251,238,220,.14); border-color: var(--hueso); color: var(--hueso); }

.btn-oro    { --bg: var(--naranja); --fg: #fff; --bd: transparent; }
.btn-oro:hover:not(:disabled)   { background: var(--naranja-2); border-color: transparent; }
.btn-jade   { --bg: var(--jade); --fg: #fff; --bd: transparent; }
.btn-jade:hover:not(:disabled)  { background: var(--jade-h); border-color: transparent; }
.btn-danger { --bg: transparent; --fg: var(--sangre); --bd: rgba(181,38,30,.5); }
.btn-danger:hover:not(:disabled) { background: rgba(181,38,30,.08); border-color: var(--sangre); }
.btn-ghost  { --bg: transparent; --fg: var(--texto-2); --bd: var(--linea-fuerte); }
.btn-ghost:hover:not(:disabled) { color: var(--texto); }

.btn-sm  { min-height: 36px; padding: 6px 14px; font-size: .82rem; border-width: 1.5px; }
.btn-lg  { min-height: 56px; padding: 10px 30px; font-size: 1.1rem; }
.btn-primary.btn-lg { font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.btn-block { display: flex; width: 100%; }
.btn-icon { min-width: var(--tap); padding: 0 10px; white-space: nowrap; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-group > .btn { min-width: 0; }

/* ==========================================================================
   Cabecera de las páginas públicas: un trozo del póster, con festón
   ========================================================================== */
.cabecera {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--hueso);
  background: linear-gradient(180deg, #B03E10 0%, #B13F10 20%, #C44B15 40%, #DD6423 60%, #F18336 80%, #FD9742 94%, #FDA85D 100%);
  display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 48px));
  padding-bottom: calc(var(--b) + clamp(30px, 4vw, 50px));
  /* Raíles de papel picado a los lados y festón abajo, con los cuartos de
     círculo en las esquinas: la misma máscara que el hero de la web */
  -webkit-mask: radial-gradient(circle at calc(100% - var(--b)) calc(100% - var(--b)),#000 calc(var(--b) - 8.5px),transparent calc(var(--b) - 7.5px)),
       radial-gradient(circle at var(--b) calc(100% - var(--b)),#000 calc(var(--b) - 8.5px),transparent calc(var(--b) - 7.5px)),
       linear-gradient(#000,#000) var(--b) 0/calc(100% - 2*var(--b)) calc(100% - var(--b)) no-repeat,
       conic-gradient(from 0deg at calc(100% - var(--b)) calc(100% - var(--b)),#000 0 90deg,transparent 90deg 180deg,#000 180deg),
       conic-gradient(from 0deg at var(--b) calc(100% - var(--b)),#000 0 180deg,transparent 180deg 270deg,#000 270deg),
       var(--pp-abajo) 50% 100%/var(--b) var(--b) repeat-x,
       linear-gradient(#000,#000) 0 0/100% calc(100% - var(--b)) no-repeat,
       var(--pp-der) 100% 0/var(--b) var(--b) repeat-y, var(--pp-izq) 0 0/var(--b) var(--b) repeat-y;
          mask: radial-gradient(circle at calc(100% - var(--b)) calc(100% - var(--b)),#000 calc(var(--b) - 8.5px),transparent calc(var(--b) - 7.5px)),
       radial-gradient(circle at var(--b) calc(100% - var(--b)),#000 calc(var(--b) - 8.5px),transparent calc(var(--b) - 7.5px)),
       linear-gradient(#000,#000) var(--b) 0/calc(100% - 2*var(--b)) calc(100% - var(--b)) no-repeat,
       conic-gradient(from 0deg at calc(100% - var(--b)) calc(100% - var(--b)),#000 0 90deg,transparent 90deg 180deg,#000 180deg),
       conic-gradient(from 0deg at var(--b) calc(100% - var(--b)),#000 0 180deg,transparent 180deg 270deg,#000 270deg),
       var(--pp-abajo) 50% 100%/var(--b) var(--b) repeat-x,
       linear-gradient(#000,#000) 0 0/100% calc(100% - var(--b)) no-repeat,
       var(--pp-der) 100% 0/var(--b) var(--b) repeat-y, var(--pp-izq) 0 0/var(--b) var(--b) repeat-y;
  -webkit-mask-composite: source-over,source-over,source-over,source-in,source-in,source-over,source-in,source-over,source-over;
          mask-composite: add,add,add,intersect,intersect,add,intersect,add,add;
}
.cabecera::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--grano) 0 0/240px 240px; }

.cabecera__fecha {
  position: absolute; top: calc(var(--nav-h) + 14px); z-index: 3;
  font-family: var(--display); line-height: 1.05; max-width: none; margin: 0;
}
.cabecera__fecha small { display: block; font-size: clamp(.85rem, 1.3vw, 1.05rem); font-weight: 600; color: var(--hueso); }
.cabecera__fecha strong { display: block; font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; color: var(--amarillo); }
.cabecera__fecha--izq { left: calc(var(--rail) + var(--gutter)); }
.cabecera__fecha--der { right: calc(var(--rail) + var(--gutter)); text-align: right; }

.cabecera__grid {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--ancho); margin: auto;
  padding-inline: calc(var(--gutter) + var(--rail));
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(16px, 3vw, 40px); align-items: center;
}
.cabecera--corta .cabecera__grid { grid-template-columns: 1fr; }
.cabecera__texto { padding-top: clamp(40px, 5vw, 56px); }
.cabecera--corta .cabecera__texto { padding-top: clamp(30px, 4vw, 44px); max-width: 60ch; }
.cabecera__marco {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--amarillo); margin-bottom: 10px;
}
.cabecera h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.2rem); font-weight: 900; color: var(--hueso);
  font-variation-settings: "SOFT" 100; margin-bottom: clamp(12px, 2vw, 18px);
}
.cabecera h1 em { font-style: italic; font-weight: 600; color: var(--amarillo); }
.cabecera__lead { font-size: clamp(1.05rem, 1.45vw, 1.2rem); line-height: 1.5; max-width: 52ch; margin-bottom: clamp(18px, 2.6vw, 26px); color: rgba(251,238,220,.95); }
.cabecera__acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cabecera__arte { position: relative; align-self: end; }
.cabecera__esqueleto { width: 108%; max-width: none; margin-left: -4%; margin-bottom: -6%; filter: drop-shadow(0 18px 24px rgba(74,12,23,.28)); }
.cabecera__invitado { position: absolute; right: 0; bottom: 6px; font-family: var(--display); text-align: right; line-height: 1.1; margin: 0; }
.cabecera__invitado small { display: block; font-weight: 600; font-size: .95rem; }
.cabecera__invitado em { display: block; font-style: italic; font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--granate); letter-spacing: .02em; font-variation-settings: "SOFT" 100; }

/* ==========================================================================
   Cuerpo (papel) y pie (noche), como los pliegos de la web
   ========================================================================== */
.cuerpo {
  position: relative; overflow-x: clip;
  --bg: var(--papel); background: var(--bg);
  margin-top: var(--hueco);
  padding: calc(var(--b) + clamp(18px, 3vw, 36px)) 0 calc(var(--b) + clamp(30px, 4vw, 50px));
}
/* Sin cabecera naranja: la barra sólida arriba y el pliego empieza justo debajo */
.cuerpo--sin-cabecera { margin-top: calc(var(--nav-h) + var(--hueco)); }

.footer {
  --bg: var(--noche); background: var(--bg); color: var(--hueso);
  margin-top: var(--hueco); position: relative;
  padding: calc(var(--b) + clamp(30px, 5vw, 60px)) 0 calc(30px + env(safe-area-inset-bottom));
}
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 70px); align-items: start; }
.footer__logo { width: min(100%, 280px); color: var(--hueso); margin-bottom: 18px; }
.footer__claim { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--ambar); max-width: 34ch; }
.footer__col h3 { font-size: 1rem; font-family: var(--sans); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); margin-bottom: 12px; }
.footer__col ul { list-style: none; display: grid; gap: 8px; }
.footer__col a { color: inherit; text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(251,238,220,.3); overflow-wrap: anywhere; }
.footer__col a:hover { border-color: var(--amarillo); color: var(--amarillo); }
.footer__pie { margin-top: clamp(30px, 5vw, 50px); padding-top: 22px; border-top: 1px dotted rgba(251,238,220,.35); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .92rem; color: rgba(251,238,220,.7); }
.footer .btn--participa { margin-top: 16px; }

/* ==========================================================================
   Estructura y utilidades
   ========================================================================== */
.wrap {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
.wrap-narrow { max-width: 760px; }
.wrap-mid { max-width: 1040px; }

.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack-lg { display: flex; flex-direction: column; gap: 26px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(260px,100%), 1fr)); }
.grid-mini { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid > * { min-width: 0; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.section { padding-block: clamp(28px, 6vw, 56px); }

/* ==========================================================================
   Tarjetas. En las páginas públicas llevan el marco de trazos de las
   «estampas» de la web; en el panel van limpias.
   ========================================================================== */
.card {
  position: relative;
  background: var(--superficie); color: var(--texto);
  border-radius: 10px; padding: 20px;
  box-shadow: var(--sombra-sm);
}
.publica .card { padding: clamp(22px, 3vw, 30px); box-shadow: var(--sombra); }
.publica .card::after { content: ""; position: absolute; inset: 9px; border: 2px dashed rgba(143,26,42,.4); border-radius: 6px; pointer-events: none; }
.publica .card > * { position: relative; z-index: 1; }
.card-pad-sm { padding: 13px; }
.card-flat { background: var(--papel); box-shadow: none; }
.publica .card-flat::after { border-color: rgba(143,26,42,.25); }
.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.card-filo { border-left: 4px solid var(--filo, var(--naranja)); border-radius: 6px 10px 10px 6px; }
.card-title { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; font-weight: 700; color: var(--texto-2); margin-bottom: 10px; }
.card--granate { background: var(--granate); color: var(--hueso); }

/* Sello de las etiquetas de las estampas («Fechas próximamente», «1 Nov») */
.sello-cuando {
  display: inline-block; font-size: .84rem; font-weight: 700; letter-spacing: .04em;
  padding: 6px 12px; border-radius: 999px; border: 2px solid var(--naranja); color: var(--naranja);
}
.sello-cuando--fijo { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); }

/* ==========================================================================
   Distintivos y estados
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(143,26,42,.06); border: 1.5px solid var(--linea);
  font: 700 .74rem/1.5 var(--sans); letter-spacing: .02em;
  color: var(--texto-2); white-space: nowrap; max-width: 100%;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.st-pendiente  { color: #5B4A8A; border-color: rgba(91,74,138,.35); background: rgba(91,74,138,.09); }
.st-inscrito   { color: var(--azul); border-color: rgba(47,110,143,.4); background: rgba(47,110,143,.1); }
.st-confirmado { color: var(--jade); border-color: rgba(46,125,91,.4); background: rgba(46,125,91,.1); }
.st-no_asiste  { color: var(--sangre); border-color: rgba(181,38,30,.35); background: rgba(181,38,30,.08); }
.st-asistio    { color: var(--oro); border-color: rgba(168,100,10,.45); background: rgba(249,201,60,.22); }
.st-si      { color: var(--jade); border-color: rgba(46,125,91,.4); background: rgba(46,125,91,.1); }
.st-no      { color: var(--sangre); border-color: rgba(181,38,30,.35); background: rgba(181,38,30,.08); }
.st-error   { color: var(--sangre); border-color: rgba(181,38,30,.35); background: rgba(181,38,30,.08); }
.st-enviado { color: var(--jade); border-color: rgba(46,125,91,.4); background: rgba(46,125,91,.1); }
.st-local   { color: var(--oro); border-color: rgba(168,100,10,.4); background: rgba(249,201,60,.2); }

/* ==========================================================================
   Formularios
   ========================================================================== */
label, .label {
  display: block; margin-bottom: 6px;
  font: 700 .78rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-2);
}
input, select, textarea {
  width: 100%; min-height: var(--tap);
  padding: 11px 14px;
  background: var(--superficie-2); color: var(--texto);
  border: 2px solid var(--linea); border-radius: var(--r);
  font: 400 1rem/1.4 var(--sans);
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--naranja); box-shadow: var(--anillo); }
input::placeholder, textarea::placeholder { color: #A98B8E; }
input[aria-invalid="true"], .field.error input, .field.error select { border-color: var(--sangre); box-shadow: 0 0 0 3px rgba(181,38,30,.18); }
input[type="checkbox"], input[type="radio"] { appearance: auto; -webkit-appearance: auto; width: auto; min-height: 0; padding: 0; accent-color: var(--naranja); }
input[type="color"] { padding: 4px; min-height: 40px; width: 60px; }
input[type="file"] { padding: 9px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238F1A2A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  padding-right: 38px;
}
.field { margin-bottom: 15px; }
.field .hint { margin-top: 5px; font-size: .82rem; color: var(--texto-3); }
.field .err  { margin-top: 5px; font-size: .84rem; color: var(--error); font-weight: 600; }
.error-msg { color: var(--error); font-weight: 600; }

/* Tarjeta seleccionable (grupos, declaraciones) */
.pick {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 15px; border-radius: var(--r-lg);
  background: var(--superficie-2); border: 2px solid var(--linea);
  cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease;
  text-transform: none; letter-spacing: 0; font: inherit; color: inherit;
}
.pick:hover { border-color: var(--linea-fuerte); }
.pick.on { border-color: var(--sel, var(--naranja)); background: color-mix(in srgb, var(--sel, var(--naranja)) 10%, #fff); }
.pick.off { opacity: .5; cursor: not-allowed; }
.pick .pick-mark {
  position: absolute; top: 13px; right: 13px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--linea-fuerte); display: grid; place-items: center;
  font-size: 13px; color: #fff; background: transparent;
}
.pick.on .pick-mark { background: var(--sel, var(--naranja)); border-color: transparent; }
.pick.pick-sm { padding: 12px 14px; }
.pick.pick-sm .pick-mark { top: 10px; right: 10px; width: 20px; height: 20px; font-size: 11px; }
.pick .pick-veto { display: block; margin-top: 8px; font-size: .78rem; color: var(--texto-3); }

/* Tarjeta de contingente: la ilustración del grupo y su nombre en Fraunces */
.grupo-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding-right: 30px; }
.grupo-cabecera strong { font-family: var(--display); font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
/* Las ilustraciones traen fondo crema opaco: se presentan como estampa, con
   esquinas redondeadas y un aro en el color del grupo (--sel), como los
   iconos de las experiencias de la web */
.grupo-icono {
  width: 72px; height: 72px; flex: none; object-fit: cover; display: block;
  border-radius: 16px; background: #FAF3E1;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--sel, var(--ambar)) 55%, #fff);
}
.pick.on .grupo-icono { box-shadow: 0 0 0 2.5px var(--sel, var(--ambar)); }
.grupo-icono--emoji { display: grid; place-items: center; font-size: 34px; }
.pick.off .grupo-icono { filter: grayscale(.6); }

/* ==========================================================================
   Texto legal y casillas
   ========================================================================== */
.legal { font-family: var(--display); font-size: 1rem; line-height: 1.72; color: var(--texto); font-variation-settings: "SOFT" 50; }
.legal .clausula { margin-bottom: 26px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.legal .clausula:last-child { margin-bottom: 0; }
.legal h3 { display: flex; align-items: baseline; gap: 10px; font-family: var(--sans); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granate); margin-bottom: 9px; }
.legal .clausula-n {
  flex: none; min-width: 26px; height: 26px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 7px; background: var(--amarillo); color: var(--tinta); font: 700 .78rem/1 var(--mono);
}
.legal .clausula-cuerpo { white-space: pre-line; max-width: 74ch; }
.legal strong { color: var(--granate); }
.sello {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  padding: 10px 14px; margin-bottom: 18px;
  background: var(--superficie-2); border: 1.5px solid var(--linea); border-radius: var(--r);
  font-size: .8rem; color: var(--texto-3);
}
.legal-indice { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-indice a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--superficie-2); border: 1.5px solid var(--linea);
  color: var(--texto-2); text-decoration: none; font-size: .82rem;
}
.legal-indice a:hover { border-color: var(--naranja); color: var(--tinta); }
.legal-indice a b { color: var(--naranja); font: 700 .78rem var(--mono); }

.declaracion { padding: 14px 0; border-bottom: 1px dotted var(--linea-fuerte); }
.declaracion:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.declaracion .decl-preg { margin: 0 0 4px; font: 600 1rem/1.4 var(--sans); color: var(--texto); }
.declaracion .hint { margin-top: 0; }

.casilla-titulo { margin: 16px 0 6px; font: 600 1rem/1.4 var(--sans); color: var(--texto); }
.casilla-titulo .marca-opt { color: var(--texto-3); font-size: .84rem; font-weight: 400; }
.form-sub { margin: 18px 0 4px; font: 600 1rem/1.4 var(--sans); color: var(--texto); }
.aviso-datos { margin: 6px 0 0; padding-top: 12px; border-top: 1px dotted var(--linea-fuerte); font-size: .82rem; line-height: 1.5; color: var(--texto-2); }
.aviso-datos a { color: var(--granate); font-weight: 600; }

.casilla {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; margin-bottom: 10px;
  background: var(--superficie-2); border: 2px solid var(--linea); border-radius: var(--r);
  transition: border-color .15s ease, background .15s ease;
}
.casilla:has(input:checked) { border-color: var(--naranja); background: rgba(201,69,14,.05); }
.casilla:has(input:focus-visible) { box-shadow: var(--anillo); }
.casilla input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; flex: none; margin: 1px 0 0; accent-color: var(--naranja); cursor: pointer; }
.casilla .txt { flex: 1 1 auto; min-width: 0; }
.casilla label { display: block; margin: 0; cursor: pointer; font: 400 .95rem/1.55 var(--sans); letter-spacing: 0; text-transform: none; color: var(--texto); }
.casilla .marca-obl { color: var(--naranja); font-weight: 700; }
.casilla .marca-opt { color: var(--texto-3); font-size: .84rem; }
.casilla label a { color: var(--granate); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.casilla label a:hover { color: var(--naranja); }
.casilla .casilla-nota { display: block; margin-top: 6px; font-size: .8rem; line-height: 1.45; color: var(--texto-2); }
.casilla .abrir {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 5px 11px;
  background: transparent; border: 1.5px solid var(--linea-fuerte); border-radius: 999px;
  color: var(--granate); font: 600 .8rem/1 var(--sans); cursor: pointer; text-decoration: none;
}
.casilla .abrir:hover { border-color: var(--naranja); background: rgba(201,69,14,.06); }
.marca-obl { color: var(--naranja); font-weight: 700; }

.aviso-fuerte {
  padding: 15px 16px; border-radius: var(--r-lg);
  background: rgba(249,201,60,.28);
  border: 2px solid var(--amarillo); border-left-width: 6px;
}
.aviso-fuerte .eyebrow { color: var(--oro); }
.aviso-local {
  padding: 14px 16px; border-radius: var(--r-lg);
  background: rgba(249,201,60,.16); border: 2px dashed rgba(168,100,10,.5);
  font-size: .92rem;
}

/* ==========================================================================
   Medidores e indicadores
   ========================================================================== */
.meter { height: 7px; border-radius: 999px; background: rgba(143,26,42,.12); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--naranja)); transition: width .5s cubic-bezier(.22,1,.36,1); }
.meter-lg { height: 11px; }

.stat { padding: 16px; border-radius: 14px; background: var(--superficie); border: 2px solid rgba(143,26,42,.12); min-width: 0; }
.stat .k { font: 700 .72rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--texto-3); hyphens: auto; }
/* Las tres cifras del panel, en una fila también en el móvil */
.grid-mini { gap: 9px; }
.grid-mini .stat { padding: 12px; }
.grid-mini .stat .k { font-size: .64rem; letter-spacing: .06em; }
.grid-mini .stat .v { font-size: 1.7rem; }
.grid-mini .stat .s { overflow-wrap: anywhere; }
.stat .v { font: 800 clamp(1.7rem, 6vw, 2.5rem)/1 var(--display); color: var(--granate); margin-top: 7px; font-variant-numeric: tabular-nums; }
.stat .s { font-size: .8rem; color: var(--texto-3); margin-top: 5px; }
.stat.on-rosa .v { color: var(--naranja); }
.stat.on-jade .v { color: var(--jade); }
.stat.on-oro  .v { color: var(--oro); }
.stat.on-azul .v { color: var(--azul); }

/* ==========================================================================
   Tablas que se vuelven tarjetas en móvil
   ========================================================================== */
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th {
  text-align: left; padding: 10px 12px;
  font: 700 .72rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-3); border-bottom: 2px solid var(--linea); white-space: nowrap;
}
.tabla td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr { transition: background .12s ease; }
.tabla tbody tr:hover { background: rgba(249,201,60,.14); }
.tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 899px) {
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }
  .tabla tr { margin-bottom: 10px; padding: 13px; background: var(--superficie-2); border: 1.5px solid var(--linea); border-radius: var(--r-lg); }
  .tabla td { border: 0; padding: 4px 0; display: flex; gap: 12px; align-items: baseline; }
  .tabla td::before { content: attr(data-th); flex: 0 0 96px; font: 700 .68rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); }
  .tabla td.td-full { display: block; }
  .tabla td.td-full::before { display: none; }
}

/* ==========================================================================
   Armazón del panel: raíl lateral noche en escritorio, barra inferior en móvil
   ========================================================================== */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.app-main { flex: 1 1 auto; padding-bottom: calc(78px + var(--safe-b)); }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--noche); color: var(--hueso);
  box-shadow: 0 4px 18px rgba(51,9,15,.25);
}
.topbar-in { display: flex; align-items: center; gap: 12px; min-height: 60px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--hueso); }
.brand:hover { color: var(--hueso); }
.brand-logo { height: 40px; width: auto; color: var(--hueso); flex: none; }
.brand { min-width: 0; }
.brand-txt { font: 700 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); min-width: 0; }
.brand-txt small { display: block; font: 600 .74rem/1.3 var(--sans); letter-spacing: .04em; color: var(--hueso); text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; padding-bottom: var(--safe-b);
  background: var(--noche);
  box-shadow: 0 -4px 18px rgba(51,9,15,.25);
}
.tabbar a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 66px; padding: 6px 2px;
  color: rgba(251,238,220,.62); text-decoration: none;
  font: 700 .62rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: .07em;
}
.tabbar a .ic { font-size: 21px; line-height: 1; }
svg.ic { width: 1em; height: 1em; flex: none; vertical-align: -0.15em; display: inline-block; }
svg.ic.line { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.on { color: var(--amarillo); }
.tabbar a .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .app-side {
    position: sticky; top: 0; align-self: flex-start;
    width: 248px; flex: none; height: 100dvh;
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px 12px;
    background: var(--noche); color: var(--hueso);
    overflow-y: auto;
  }
  .app-side.con-grano::before { opacity: .7; }
  .app-side a.nav {
    position: static; display: flex; align-items: center; gap: 11px;
    padding: 10px 13px; border-radius: var(--r);
    color: rgba(251,238,220,.8); text-decoration: none;
    font: 600 .92rem/1.3 var(--sans);
    transition: background .15s, color .15s;
  }
  .app-side a.nav .ic { font-size: 18px; width: 22px; text-align: center; flex: none; }
  .app-side a.nav:hover { background: rgba(251,238,220,.08); color: var(--hueso); }
  .app-side a.nav.on { background: rgba(249,201,60,.16); color: var(--amarillo); }
  .app-side .nav-badge { margin-left: auto; font: 700 .7rem/1 var(--mono); background: var(--amarillo); color: var(--tinta); padding: 3px 7px; border-radius: 999px; }
  .app-side .btn-ghost { --fg: rgba(251,238,220,.85); --bd: rgba(251,238,220,.4); }
  .app-side .btn-ghost:hover:not(:disabled) { color: var(--hueso); background: rgba(251,238,220,.08); border-color: var(--hueso); }
  .app-body { flex: 1 1 auto; min-width: 0; }
  .app-main { padding-bottom: 40px; }
  .tabbar { display: none; }
  .only-mobile { display: none !important; }
}
@media (max-width: 899px) {
  .app-side { display: none; }
  .only-desktop { display: none !important; }
}
.topbar .btn-ghost { --fg: rgba(251,238,220,.85); --bd: rgba(251,238,220,.4); }
.topbar .btn-ghost:hover:not(:disabled) { color: var(--hueso); background: rgba(251,238,220,.08); border-color: var(--hueso); }
.topbar .chip { color: var(--hueso); border-color: rgba(251,238,220,.35); background: rgba(251,238,220,.08); }

/* ==========================================================================
   Hoja inferior en móvil / diálogo centrado en escritorio
   ========================================================================== */
.sheet-back {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(51,9,15,.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fundir .18s ease;
}
.sheet {
  /* La hoja vuelve a los semánticos claros: es hueso, no noche */
  --texto: var(--tinta); --texto-2: #6B3A3F; --texto-3: #8C5A5E;
  --linea: rgba(143,26,42,.22); --linea-fuerte: rgba(143,26,42,.45);
  --oro: #A8640A; --jade: #2E7D5B; --azul: #2F6E8F; --error: #B5261E;
  --copal: var(--texto-2); --copal-2: var(--texto-3); --borde: var(--linea); --borde-viva: var(--linea-fuerte);
  color: var(--texto);
  width: 100%; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--hueso);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(24px + var(--safe-b)) max(16px, env(safe-area-inset-left, 0px));
  animation: subir .26s cubic-bezier(.22,1,.36,1);
}
.sheet-grip { width: 42px; height: 4px; border-radius: 999px; background: var(--linea-fuerte); margin: 8px auto 14px; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sheet-head h2 { flex: 1 1 auto; min-width: 0; color: var(--granate); }
@media (min-width: 700px) {
  .sheet-back { align-items: center; padding: 24px; }
  .sheet { max-width: 720px; max-height: 88dvh; border-radius: var(--r-xl); padding-bottom: 24px; box-shadow: 0 30px 80px rgba(51,9,15,.4); animation: aparecer .2s cubic-bezier(.22,1,.36,1); }
  .sheet-grip { display: none; }
  .sheet-wide { max-width: 1000px; }
}
@keyframes subir { from { transform: translateY(100%); } }
@keyframes aparecer { from { transform: scale(.96); opacity: 0; } }
@keyframes fundir { from { opacity: 0; } }

/* ==========================================================================
   Avisos flotantes
   ========================================================================== */
#avisos {
  position: fixed; z-index: 120; left: 12px; right: 12px;
  bottom: calc(84px + var(--safe-b));
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
@media (min-width: 900px) { #avisos { left: auto; right: 20px; bottom: 20px; align-items: flex-end; } }
.aviso {
  max-width: 460px; padding: 12px 17px;
  background: var(--noche); color: var(--hueso);
  border-left: 5px solid var(--amarillo);
  border-radius: var(--r); box-shadow: 0 10px 30px rgba(51,9,15,.35);
  font-size: .92rem; font-weight: 500;
  animation: subir .22s cubic-bezier(.22,1,.36,1);
  pointer-events: auto;
}
.aviso.ok  { border-left-color: #8AD7AE; }
.aviso.err { border-left-color: #FF9A9A; }

/* ==========================================================================
   QR
   ========================================================================== */
.qr-card {
  position: relative;
  background: #fff; border-radius: var(--r-lg); padding: 14px;
  display: grid; place-items: center;
  box-shadow: var(--sombra);
}
.qr-card svg, .qr-card img { display: block; width: 100%; height: auto; max-width: 300px; }
.qr-code { font: 700 1.3rem/1 var(--mono); letter-spacing: .16em; color: var(--naranja); text-align: center; }

.qr-aviso {
  max-width: 46ch; margin: 0 auto 16px; padding: 14px 16px;
  text-align: left; font-size: .9rem; line-height: 1.5;
  border: 2px solid var(--naranja); border-radius: var(--r-lg);
  background: rgba(201,69,14,.06);
}
.qr-aviso .qr-aviso-t { margin: 0 0 8px; font: 700 .76rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--naranja); }
.qr-aviso.gastado { border-color: var(--linea-fuerte); background: rgba(143,26,42,.05); }
.qr-aviso.gastado .qr-aviso-t { color: var(--texto-3); }
.qr-card.gastado img, .qr-card.gastado svg { filter: grayscale(1); opacity: .3; }
.qr-card .qr-sello {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-9deg);
  padding: 6px 18px; white-space: nowrap;
  border: 3px solid var(--sangre); border-radius: var(--r);
  color: var(--sangre); background: rgba(255,255,255,.86);
  font: 700 1.1rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.qr-full {
  position: fixed; inset: 0; z-index: 200; background: #fff; color: #111;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 20px;
}
.qr-full svg, .qr-full img { width: min(80vw, 60vh); height: auto; }
.qr-full .qr-code { color: #111; font-size: 1.6rem; }
.qr-full .qr-full-aviso {
  margin: 0; padding: 8px 16px; border-radius: 999px;
  background: var(--naranja); color: #fff; text-align: center;
  font: 700 .8rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}

/* ==========================================================================
   Galería de vestuario
   ========================================================================== */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.galeria figure { margin: 0; background: var(--superficie-2); border: 1.5px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.galeria img, .galeria video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #000; }
.galeria video { aspect-ratio: 16 / 10; }
.galeria figcaption { padding: 8px 10px; font-size: .8rem; color: var(--texto-2); }

/* ==========================================================================
   Escáner
   ========================================================================== */
.scanner {
  position: relative; width: 100%; aspect-ratio: 1;
  max-height: 62dvh; margin-inline: auto;
  background: #000; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sombra);
}
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner .mira {
  position: absolute; inset: 14%;
  border: 3px solid var(--amarillo); border-radius: 20px;
  box-shadow: 0 0 0 100vmax rgba(51,9,15,.5);
}
.scanner .mira::after {
  content: ''; position: absolute; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amarillo), transparent);
  animation: barrer 2.4s ease-in-out infinite;
}
@keyframes barrer { 0%,100% { top: 8%; } 50% { top: 92%; } }

.veredicto {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  padding: 22px 18px calc(22px + var(--safe-b));
  color: var(--hueso);
  animation: fundir .14s ease;
  overflow-y: auto;
}
.veredicto.ok  { background: linear-gradient(165deg, #1B5A3F, #0D3325); }
.veredicto.no  { background: linear-gradient(165deg, var(--granate), var(--noche)); }
.veredicto.avi { background: linear-gradient(165deg, #B03E10, #6B2308); }
.veredicto .icono { font-size: 62px; line-height: 1; margin-bottom: 6px; }
.veredicto .nombre { font: 800 clamp(1.7rem,7vw,2.6rem)/1.05 var(--display); }
.veredicto .card { background: rgba(0,0,0,.28); color: var(--hueso); box-shadow: none; }
.veredicto .chip { color: var(--hueso); border-color: rgba(251,238,220,.4); background: rgba(251,238,220,.1); }
.veredicto .btn-ghost { --fg: var(--hueso); --bd: rgba(251,238,220,.55); }
.veredicto .btn-ghost:hover:not(:disabled) { background: rgba(251,238,220,.1); border-color: var(--hueso); }

/* Pétalos de cempasúchil al registrar una llegada o confirmar asistencia */
.petalos { position: fixed; inset: 0; pointer-events: none; z-index: 110; overflow: hidden; }
.petalos i {
  position: absolute; top: -24px;
  width: 11px; height: 8px; border-radius: 60% 60% 55% 55%;
  background: var(--ambar); opacity: 0;
  animation: caer var(--d, 1500ms) cubic-bezier(.32,.62,.5,1) forwards;
}
@keyframes caer {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(.6); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(105vh) rotate(var(--r,540deg)) scale(1); }
}

/* ==========================================================================
   Varios
   ========================================================================== */
.divider { height: 1px; background: var(--linea); border: 0; margin: 18px 0; }
.divider--puntos { height: 0; background: none; border-top: 4px dotted rgba(143,26,42,.45); }
.vacio { padding: 40px 20px; text-align: center; color: var(--texto-3); }
.vacio .ic { font-size: 40px; display: block; margin-bottom: 10px; opacity: .6; }
.vacio h3 { color: var(--texto-2); margin-bottom: 6px; }
.cargando { display: inline-block; width: 17px; height: 17px; border: 2px solid rgba(143,26,42,.25); border-top-color: var(--naranja); border-radius: 50%; animation: girar .7s linear infinite; }
.oscuro .cargando, .nav .cargando, .cabecera .cargando { border-color: rgba(251,238,220,.3); border-top-color: var(--amarillo); }
.btn-primary .cargando { border-color: rgba(51,9,15,.25); border-top-color: var(--tinta); }
@keyframes girar { to { transform: rotate(360deg); } }

.pill-nav { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pill-nav::-webkit-scrollbar { display: none; }
.pill-nav button {
  flex: none; min-height: 38px; padding: 0 15px;
  background: var(--superficie-2); color: var(--texto-2);
  border: 1.5px solid var(--linea); border-radius: 999px;
  font: 700 .82rem/1 var(--sans); cursor: pointer; white-space: nowrap;
}
.pill-nav button.on { background: var(--granate); color: var(--hueso); border-color: transparent; }

.kv { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 7px 14px; font-size: .94rem; max-width: 100%; }
.kv dt { font: 700 .7rem/1.7 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.linea-tiempo { position: relative; padding-left: 22px; }
.linea-tiempo::before { content: ''; position: absolute; left: 5px; top: 5px; bottom: 5px; width: 0; border-left: 3px dotted rgba(143,26,42,.45); }
.linea-tiempo .hito { position: relative; padding-bottom: 15px; }
.linea-tiempo .hito::before { content: ''; position: absolute; left: -22px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--linea-fuerte); }
.linea-tiempo .hito.hecho::before { background: var(--amarillo); border-color: var(--naranja); }

.correo-marco { width: 100%; height: 70vh; border: 1.5px solid var(--linea); border-radius: var(--r); background: #fff; }

/* Emoji grande de las pantallas de resultado */
.icono-grande { font-size: 54px; line-height: 1; margin-bottom: 10px; }

/* ==========================================================================
   Responsive (los mismos cortes que la web)
   ========================================================================== */
@media (max-width: 900px) {
  .nav__burger { display: block; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(74,12,23,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 8px var(--gutter) 18px;
    clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden;
    transition: clip-path .3s ease, opacity .2s, visibility .3s;
  }
  .nav__links.abierto { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; }
  .nav__links a { display: block; padding: 14px 2px; border-bottom: 1px dotted rgba(251,238,220,.25); font-size: 1.05rem; }
  .nav__links a.activo { border-bottom-color: rgba(251,238,220,.25); }
  .nav .btn--participa { margin-left: auto; }

  :root { --b: 40px; --hueco: 10px; }
  .cabecera { padding-top: calc(var(--nav-h) + 4px); }
  .cabecera__fecha--izq { left: calc(var(--rail) + 14px); }
  .cabecera__fecha--der { right: calc(var(--rail) + 14px); }
  .cabecera__grid { grid-template-columns: 1fr; gap: 8px; }
  .cabecera__texto { padding-top: 72px; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .cabecera--corta .cabecera__texto { max-width: none; }
  .cabecera__lead { margin-inline: auto; }
  .cabecera__acciones { justify-content: center; }
  .cabecera__arte { width: min(100%, 460px); margin: 0 auto; padding-top: 10px; }
  .cabecera__esqueleto { width: 100%; margin-left: 0; margin-bottom: 0; }
  .cabecera__invitado { position: static; text-align: center; margin-top: 10px; }
  .cabecera__fecha small { font-size: .85rem; }
  .footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cabecera__fecha { top: calc(var(--nav-h) + 8px); }
  .cabecera__fecha strong { font-size: 1.3rem; }
  .cabecera__fecha small { font-size: .78rem; }
  .nav .btn--participa { width: auto; font-size: .95rem; padding: .7em 1.1em; }
  .nav__inner { gap: 12px; }
  .nav__logo svg { height: 38px; }
  .nav__burger { width: 42px; height: 40px; }
  .publica .card { padding: 20px 16px; }
  .publica .card::after { inset: 7px; }

  /* Botones grandes: menos aire a los lados para que la frase quepa en el
     ancho del móvil sin partirse más de lo necesario */
  .btn-lg { padding-inline: 18px; font-size: 1.02rem; }
  .btn-primary.btn-lg { font-size: 1.05rem; }
  .cabecera__acciones .btn { flex: 1 1 auto; }

  /* Tarjeta de contingente: la ilustración un poco más pequeña */
  .grupo-icono { width: 60px; height: 60px; }
  .grupo-icono--emoji { font-size: 28px; }
  .grupo-cabecera strong { font-size: 1.08rem; }

  /* Pie: columnas apiladas con menos separación */
  .footer__grid { gap: 26px; }
  .footer__pie { flex-direction: column; gap: 6px; text-align: center; }

  /* Panel: las tres cifras caben en una fila también en pantallas estrechas */
  .grid-mini { gap: 7px; }
  .grid-mini .stat { padding: 10px 8px; }
  .grid-mini .stat .k { font-size: .58rem; letter-spacing: .02em; }
  .grid-mini .stat .v { font-size: 1.45rem; }
  .grid-mini .stat .s { font-size: .72rem; }

  /* Filtros del panel: la tira de pastillas se desliza de borde a borde */
  .pill-nav { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }

  /* Hoja: cabecera más compacta */
  .sheet-head h2 { font-size: 1.35rem; }
  .sheet-body .legal { font-size: .95rem; }
}

/* Teléfonos muy estrechos (320-360 px) */
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .contenedor { padding-inline: 14px; }
  .publica .card { padding: 18px 14px; }
  .publica .card::after { inset: 6px; }
  .eyebrow { letter-spacing: .12em; }
  h1 { font-size: clamp(1.8rem, 8vw, 2.2rem); }
  .grid-mini .stat .k { hyphens: auto; }
  .topbar .chip { display: none; }
}

/* Movimiento reducido: todo estático y visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .petalos { display: none; }
  .scanner .mira::after { top: 50%; }
}

@media print {
  .nav, .footer, .topbar, .tabbar, .app-side, .btn, #avisos, .cabecera::before { display: none !important; }
  body { background: #fff; color: #000; }
  .cabecera { -webkit-mask: none; mask: none; background: none; color: #000; padding-top: 0; }
  .cabecera h1, .cabecera__marco, .cabecera__lead { color: #000; }
  .cuerpo { -webkit-mask: none; mask: none; background: none; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; background: #fff; }
  .publica .card::after { display: none; }
}