/**
 * QuizOton · Pie de página común
 * Lo usan las 4 páginas (portada, guía y legales). Todo va dentro de
 * .pie-sitio para no chocar con los estilos antiguos de css/estilos.css.
 * La mascota del pie (.pie-mascota) solo se pone en la portada y solo se ve
 * en pantallas anchas.
 */
.pie-sitio{
  position:relative;overflow:hidden;isolation:isolate;background:#0A1412;color:#EAF6F1;
  margin-top:clamp(8px,2vw,24px);padding:clamp(40px,6vw,64px) clamp(20px,5vw,40px) 22px;
  font-family:'Inter',system-ui,sans-serif;line-height:1.5;
}
.pie-sitio::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#44DCAC,#FFE206,#44DCAC)}
.pie-sitio::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-120px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(68,220,172,.28),transparent 65%);filter:blur(40px);opacity:.55}
/* El resplandor solo tiene sentido detrás de Otto (portada) */
.pie-sitio:not(:has(.pie-mascota))::after{display:none}
.pie-sitio .fondo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pie-sitio .puntos{display:none;
  position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(234,246,241,.16) 1px,transparent 1.5px);background-size:28px 28px;animation:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 20% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 70% 90% at 20% 30%,#000 10%,transparent 70%);
}
.pie-sitio .pie-in{position:relative;max-width:1140px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,48px);align-items:center}
.pie-sitio .pie-marca{display:grid;gap:12px;justify-items:start}
/* El logo tiene placa negra: sobre fondo oscuro va en una tarjeta clara */
.pie-sitio .pie-logo{width:clamp(150px,15vw,184px);height:auto;display:block;margin:0; padding:10px 14px;}
.pie-sitio .pie-marca p{margin:0;font-size:14px;color:#B4CFC5;max-width:30ch;line-height:1.5}
.pie-sitio .pie-links{display:grid;grid-template-columns:auto auto;gap:20px clamp(40px,6vw,88px);justify-self:end}
.pie-sitio .pie-links div{display:grid;gap:9px;align-content:start}
.pie-sitio .pie-links strong{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;color:#44DCAC;text-transform:uppercase;margin-bottom:2px}
.pie-sitio .pie-links a{color:#EAF6F1;text-decoration:none;font-size:14px;opacity:.88;transition:color .2s ease,opacity .2s ease;display:inline-block;padding:4px 0;width:fit-content}
.pie-sitio .pie-links a:hover{color:#44DCAC;opacity:1;text-decoration:none}
.pie-sitio a:focus-visible{outline:2px solid #44DCAC;outline-offset:3px;border-radius:4px}
.pie-sitio .pie-mascota{width:clamp(88px,14vw,150px);height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.pie-sitio .pie-copy{position:relative;max-width:1140px;margin:clamp(24px,4vw,36px) auto 0;padding-top:16px;border-top:1px solid rgba(234,246,241,.12);font-size:13px;color:#B4CFC5;text-align:center}

@media (max-width:860px){
  .pie-sitio .pie-in{grid-template-columns:1fr;justify-items:start}
  .pie-sitio .pie-links{justify-self:start}
  .pie-sitio .pie-mascota{display:none}
  .pie-sitio::after{display:none}
}
@media print{
  .pie-sitio{display:none !important}
}