/* La puerta de consentimiento, en su propia hoja.
   Va aparte porque cada pagina de esta web carga una hoja distinta (la
   portada home.css, el archivo style.css, los formularios form.css) y el
   banner tiene que salir en TODAS. Metido en una de ellas, en las demas se
   quedaba sin estilos: existia en el DOM, en posicion estatica, al final de
   la pagina y sin que nadie lo viera. */
/* ============ PUERTA DE CONSENTIMIENTO ============
   Los videos los ponen YouTube y Vimeo, y esos guardan cookies en cuanto el
   iframe se carga. Hasta que no hay un si, aqui no se carga ninguno. */
/* Abajo a la izquierda y pequeno. Solo sale cuando alguien le da a un video,
   asi que ya sabe de que le hablan: no hace falta que ocupe media pantalla ni
   que se ponga en medio. El lado izquierdo esta libre; el derecho lo tiene el
   boton de subir. */
.consent{
  position:fixed;left:1rem;bottom:1rem;z-index:200;
  width:min(330px,calc(100vw - 2rem));
  display:flex;flex-direction:column;gap:.7rem;
  background:rgba(14,16,20,.97);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:.85rem .95rem;box-shadow:0 14px 38px rgba(0,0,0,.45);
  animation:consentEntra .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes consentEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.consent_txt{font-size:.78rem;line-height:1.5;color:var(--muted)}
.consent_txt b{display:block;color:var(--ink);font-weight:600;font-size:.83rem;margin-bottom:.15rem}
.consent_txt a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.consent_btns{display:flex;flex-wrap:wrap;gap:.45rem}
.consent_btns button{
  flex:1 1 auto;font-size:.76rem;font-weight:500;border-radius:999px;padding:.5rem .9rem;
  border:1px solid rgba(255,255,255,.18);color:var(--ink);transition:all .18s;
  white-space:nowrap;cursor:pointer;
}
/* el fondo va en cada boton y no en la regla comun: puesto ahi, gana por
   especificidad al acento del boton de aceptar y lo dejaba apagado */
.consent_no{background:transparent}
.consent_no:hover{border-color:rgba(255,255,255,.4)}
.consent_si{background:var(--accent);border-color:var(--accent);color:#fff}
.consent_si:hover{filter:brightness(1.1)}
/* la portada de un video que no se puede cargar todavia */
.yt-puerta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;height:100%;min-height:220px;padding:2rem 1.5rem;text-align:center;
  background:rgba(10,12,16,.72);
}
.yt-puerta p{color:var(--muted);font-size:.92rem;line-height:1.55;max-width:34ch;margin:0}
.yt-puerta-btns{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
@media (max-width:640px){
  .consent{left:.6rem;bottom:.6rem;width:calc(100vw - 1.2rem)}
  .consent_btns button{flex:1}
}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}