/* ---------- Pie del sitio CR360 (aprobado por Mateo el 3 Nov 2026) ----------
   Fuente: site_build/pie/. Lo instala aplicar-pie.py en todas las páginas.
   Mismos bordes que el encabezado: >1560 px, 48 px + 5 % (sangría del logo) a la izquierda y 48 px a la derecha;
   hasta 1560 px, 24 px a cada lado (medido también a 375 px). Dos filas: marca y enlaces; derechos y firma. */
:root{--pie-izq:calc(48px + (100vw - 96px) * .05);--pie-der:48px}
@media (max-width:1560px){:root{--pie-izq:24px;--pie-der:24px}}
.pie{background:#00060f;border-top:1px solid rgba(98,186,247,.14);font-family:'Saira',sans-serif}
.pie-in{padding:44px max(var(--pie-der),env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(var(--pie-izq),env(safe-area-inset-left))}
/* Pie completo (lista de NN/g «Footers 101», 3 Nov 2026). Una sola grilla de 12 columnas con los bordes
   del encabezado; las tres franjas (llamado, mapa del sitio, legal) comparten esos bordes. */
.pie-dato{margin:0;font-size:16px;font-weight:500;color:#9fbde0}
.pie-dato b{display:block;font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:28px;letter-spacing:.01em;color:#fff;text-transform:uppercase;margin-bottom:2px}
.pie-boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 32px;border-radius:6px;background:#1f8fe6;color:#fff;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.pie-boton:hover{background:#3aa0f0}
/* Un solo bloque (diseño de Mateo, 3 Nov 2026): marca con los datos del evento y tres columnas.
   En /inscripcion no va el botón «Inscribite» (ya estás en la inscripción); en el resto del sitio va arriba a la derecha. */
.pie-uno{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));column-gap:32px;row-gap:32px;padding:4px 0 40px;align-items:start}
.pie-marca{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pie-marca .pie-dato{margin-bottom:8px}
.pie-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pie-logo img{height:64px;width:auto;display:block}
.pie-lema{margin:0;font-size:15px;line-height:1.55;font-weight:500;color:#9fbde0;text-wrap:balance}
.pie-tit{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#62baf7}
.pie-col a{white-space:nowrap;display:inline-flex;align-items:center;gap:9px;min-height:32px;font-size:15px;font-weight:500;color:#d7e7ff;text-decoration:none}
.pie-col svg{color:#62baf7}
.pie-col a:hover svg{color:inherit}
.pie-dos{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(98,186,247,.1);font-size:14px;font-weight:500;color:#7f9fc4}
.pie-legal{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 24px}
.pie-legal>*{display:inline-flex;align-items:center;min-height:32px}
.pie-legal a,.pie-link{color:#9fbde0;text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer;min-height:32px}
.pie-legal a:hover,.pie-link:hover{color:#fff;text-decoration:underline}
.pie-fin{display:flex;align-items:center;gap:28px}
.pie-lang{margin-left:0}
.pie-firma{display:inline-flex;align-items:center;gap:10px}
.pie-firma a{display:inline-flex;align-items:center;min-height:44px}
.pie-firma img{height:34px;width:auto;display:block}
/* Huella MTB que termina en una salpicadura de barro (decorativa, detrás del contenido; 3 Nov 2026).
   Dibujo propio generado con semilla fija: textura áspera, mancha irregular, gotas en abanico. */
.pie{position:relative;overflow:hidden;isolation:isolate}
.pie-huellas{position:absolute;left:50%;top:50%;width:max(1600px,100%);height:480px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
/* En escritorio el barro cae en el hueco entre la marca y «El evento», sin texto blanco encima (lo ubica pie.js) */
@media (min-width:1101px){.pie-huellas{transform:translate(calc(-50% + var(--barro-x,0px)),calc(-50% + var(--barro-y,0px)))}}
/* Salpicaduras sueltas (boceto de Mateo): cubren la franja de arriba del pie, solo en escritorio */
.pie-gotas{position:absolute;left:0;top:0;width:100%;height:560px;z-index:-1;pointer-events:none}
@media (max-width:1100px){.pie-gotas{display:none}}
.pie-barro{transform-box:fill-box;transform-origin:center;transform:scale(var(--barro-s,1))}
/* Se difumina hacia los bordes izquierdo y derecho */
.pie-huellas{-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 32%,#000 68%,transparent 96%);mask-image:linear-gradient(90deg,transparent 4%,#000 32%,#000 68%,transparent 96%)}
.pie a:hover{color:#ffffff}
.pie a:focus-visible,.pie button:focus-visible{outline:2px solid #62baf7;outline-offset:4px;border-radius:3px}
@media (max-width:1100px){
  .pie-uno{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pie-marca{grid-column:1 / 3}
  .pie-boton{grid-column:3;grid-row:1;justify-self:end}
}
@media (max-width:700px){
  .pie-in{padding-top:32px}
  .pie-uno{grid-template-columns:1fr 1fr;column-gap:24px;padding:0 0 32px}
  .pie-marca{grid-column:1 / -1}
  .pie-boton{grid-column:1 / -1;grid-row:auto;justify-self:stretch;order:-1;margin-top:-8px}
  .pie-marca{order:-2}
  .pie-c3{grid-column:1 / -1}
  .pie-col a{min-height:44px}
  .pie-dos{flex-direction:column;align-items:flex-start}
  .pie-fin{width:100%;justify-content:space-between}
}

.pie [hidden]{display:none !important}
.pie-uno:has(> .pie-boton:not([hidden])){grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr)) auto}
.pie-lang{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid rgba(98,186,247,.3);border-radius:5px}
.pie-lang button{font-family:'Saira',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;padding:6px 12px;border:none;border-radius:3px;cursor:pointer;color:#9cc2f0;background:transparent;min-height:32px}
.pie-lang button.on{color:#fff;background:#1f8fe6}
.pie .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pie *,.pie *::before,.pie *::after{box-sizing:border-box}
/* Defensa contra estilos generales de cada página (p, a, img): especificidad mínima, gana por orden */
:where(.pie) p{margin:0}
:where(.pie) a{text-decoration:none;color:inherit}
:where(.pie) ul{margin:0;padding:0}
.pie{line-height:1.5;text-align:left}
