/* ============================================================
   FOOTER · contraportada de cartel
   Compartido por index, JazzLab, Compañía, Proyectos y Contacto.
   Dos paneles a sangre sobre tinta (composición Bauhaus): el rojo
   escribe, el crema navega. La tinta entre los bloques hace de
   retícula: el hueco es parte del dibujo.

   En Contacto.dc.html el panel rojo lleva .fpanel--direct (contacto
   directo) en lugar del formulario, que ya vive en esa página.
   ============================================================ */

/* ============================================================
   SELECTOR DE IDIOMA · píldora ES / EN en la cabecera
   (vive aquí porque es la única hoja compartida por las 5 páginas)
   El idioma activo va en tinta llena; el otro, en hueco. Mientras
   la versión en inglés no exista, .lang__soon queda inerte.
   ============================================================ */
.lang{display:inline-flex;align-items:stretch;border:1px solid #16130F;border-radius:999px;overflow:hidden;
  font-family:Archivo,sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;line-height:1;flex:none;}
.lang > *{padding:6px 12px;display:flex;align-items:center;text-decoration:none;color:#16130F;}
.lang__on{background:#16130F;color:#EAE5D9;}
.lang__soon{opacity:.45;cursor:not-allowed;}
@media (prefers-reduced-motion: no-preference){
  .lang > a{transition:background .3s ease, color .3s ease, opacity .3s ease;}
  .lang > a:hover{background:#16130F;color:#EAE5D9;opacity:1;}
}
@media (max-width:420px){ .lang{font-size:9px;} .lang > *{padding:5px 9px;} }

/* "Jazz Lab Formation" alarga bastante el menú y desde que son seis entradas
   —con "Sobre mí"— el margen se estrechó todavía más: entre 880 y 1260 px se
   aprieta el interletrado y el cuerpo para que no desborde ni salte de línea.
   Va con !important porque los enlaces llevan sus estilos en el atributo style. */
@media (min-width:880px) and (max-width:1340px){
  .nav-desktop{gap:13px !important;}
  .nav-desktop a{font-size:10.5px !important;letter-spacing:.04em !important;}
}

/* ============================================================
   AVISO DE COOKIES · barra inferior, lenguaje de cartel
   Aparece solo si no hay decisión previa. Los estilos viven aquí
   por ser la única hoja compartida; el comportamiento, en cookies.js
   ============================================================ */
/* Tarjeta discreta anclada a la esquina inferior izquierda: informa sin bloquear
   la lectura ni ocupar el ancho de la página. Entra con un desplazamiento corto. */
.ck{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:70;
  width:min(340px, calc(100vw - 28px));background:#EAE5D9;color:#16130F;
  padding:18px 20px 20px;
  border:1px solid rgba(22,19,15,.16);border-left:3px solid #BA0101;
  box-shadow:0 26px 58px -22px rgba(22,19,15,.5);
  opacity:0;transform:translateY(14px);pointer-events:none;}
.ck.is-on{opacity:1;transform:none;pointer-events:auto;}
@media (prefers-reduced-motion: no-preference){
  .ck{transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);}
}
.ck__wrap{display:block;}
.ck__txt b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:#BA0101;margin-bottom:7px;}
.ck__txt p{margin:0 0 16px;font-family:Archivo,sans-serif;font-size:13px;line-height:1.55;color:#3a352d;}
.ck__txt a{color:#16130F;}
.ck__btns{display:flex;gap:8px;}
.ck__b{cursor:pointer;font-family:Archivo,sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;padding:11px 16px;border:1.5px solid #16130F;background:none;color:#16130F;}
.ck__b--si{background:#16130F;border-color:#16130F;color:#EAE5D9;flex:1;}
.ck__b--si:hover{background:#BA0101;border-color:#BA0101;}
.ck__b--no:hover{background:#16130F;color:#EAE5D9;}
@media (prefers-reduced-motion: no-preference){ .ck__b{transition:background .3s ease,color .3s ease,border-color .3s ease;} }

/* ============================================================
   MENÚ MÓVIL · mismo gesto que el índice del footer (.fidx):
   el panel sigue siendo blanco y la tinta barre de izquierda a
   derecha solo el enlace señalado. El color va con !important
   porque los enlaces llevan el suyo en el atributo style.
   ============================================================ */
.nav-mobile a{
  background-image:linear-gradient(#16130F,#16130F);
  background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
}
.nav-mobile a:hover, .nav-mobile a:active, .nav-mobile a:focus-visible{
  color:#EAE5D9 !important;background-size:100% 100%;
}
@media (prefers-reduced-motion: no-preference){
  .nav-mobile a{transition:background-size .5s cubic-bezier(.22,1,.36,1), color .2s ease .12s;}
}

.es-foot{
  background:#16130F;
  color:#EAE5D9;
  font-family:Archivo,sans-serif;
  padding:clamp(28px,3.4vw,56px) clamp(18px,4vw,72px) clamp(20px,2.2vw,30px);
}
.es-foot__wrap{max-width:1440px;margin:0 auto;}

/* --- retícula de paneles --- */
.es-foot__blocks{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(8px,.9vw,14px);
}
.fpanel{padding:clamp(26px,3vw,50px);display:flex;flex-direction:column;}
.fpanel--form{grid-column:span 7;background:#BA0101;color:#EAE5D9;}
.fpanel--idx{grid-column:span 5;background:#EAE5D9;color:#16130F;padding:clamp(22px,2.2vw,34px);}

/* --- panel rojo: escríbeme --- */
.fform__kicker{
  display:flex;align-items:center;gap:10px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:11px;
  letter-spacing:0.22em;text-transform:uppercase;color:#F0EBE0;margin:0 0 clamp(12px,1.2vw,18px);
}
.fform__h{
  font-family:Anton,sans-serif;font-weight:400;
  font-size:clamp(38px,4.8vw,74px);line-height:0.9;letter-spacing:0.01em;
  text-transform:uppercase;margin:0;
}
.fform__note{font-family:Archivo,sans-serif;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:#F0EBE0;margin:14px 0 0;max-width:40ch;}

.ffield{display:block;margin-top:clamp(18px,1.8vw,26px);}
/* Nombre y correo comparten fila: el formulario pide un dato más sin crecer a
   lo alto. El correo se lleva la parte ancha porque una dirección ocupa
   bastante más que un nombre de pila. Por debajo de 520 px se apilan: dos
   campos en esa anchura dejan de ser cómodos de rellenar. */
.frow{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(14px,1.6vw,22px);
      margin-top:clamp(18px,1.8vw,26px);}
.frow .ffield{margin-top:0;}
@media (max-width:520px){
  .frow{grid-template-columns:1fr;gap:0;}
  .frow .ffield + .ffield{margin-top:clamp(18px,1.8vw,26px);}
}
.ffield span{
  display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;color:#F0EBE0;margin-bottom:6px;
}
.ffield input,.ffield textarea{
  display:block;width:100%;background:none;border:0;
  border-bottom:2px solid rgba(234,229,217,.6);outline:none;
  color:#EAE5D9;font-family:Archivo,sans-serif;font-size:clamp(15px,1.1vw,17px);
  padding:9px 0;resize:vertical;
}
.ffield input::placeholder,.ffield textarea::placeholder{color:#DED7C4;opacity:1;}
.ffield input:focus,.ffield textarea:focus{border-bottom-color:#EAE5D9;}

/* fila de acción: el botón y el icono comparten altura y peso */
.faction{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:clamp(22px,2.2vw,32px);}
.fsubmit{
  background:#EAE5D9;color:#16130F;border:0;cursor:pointer;
  font-family:Archivo,sans-serif;font-weight:700;font-size:12px;
  letter-spacing:0.16em;text-transform:uppercase;
  min-height:54px;padding:0 26px;
  display:inline-flex;align-items:center;gap:10px;
}
.fsubmit:hover{background:#16130F;color:#EAE5D9;}
.fig{
  flex:none;width:54px;min-height:54px;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid #EAE5D9;color:#EAE5D9;
}
.fig svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.fig svg .dot{fill:currentColor;stroke:none;}
.fig:hover{background:#EAE5D9;color:#BA0101;}
.fform__sent{font-family:Archivo,sans-serif;font-size:14px;color:#EAE5D9;margin-top:14px;}

/* variante de Contacto: sin formulario, el contacto en grande */
.fpanel--direct .fbig{
  display:inline-block;margin-top:clamp(12px,1.2vw,18px);
  font-family:Anton,sans-serif;font-weight:400;
  font-size:clamp(22px,2.4vw,38px);line-height:1.05;text-transform:uppercase;
  color:#EAE5D9;text-decoration:none;
}
.fpanel--direct .faction{margin-top:clamp(24px,2.6vw,36px);}

/* --- panel crema: índice. El barrido de tinta invade la fila:
   mismo gesto que el subrayado de los enlaces, a escala de bloque --- */
.fpanel__k{
  font-family:Archivo,sans-serif;font-weight:700;font-size:11px;
  letter-spacing:0.22em;text-transform:uppercase;color:#5a544a;
  margin:0 0 clamp(12px,1.2vw,18px);
}
.fidx{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(9px,.9vw,13px) clamp(10px,1vw,14px);
  text-decoration:none;color:#16130F;
  font-family:Anton,sans-serif;font-weight:400;
  font-size:clamp(19px,2vw,32px);line-height:1;text-transform:uppercase;
  border-bottom:1px solid rgba(22,19,15,.18);
  background-image:linear-gradient(#16130F,#16130F);
  background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
}
.fidx:hover{color:#EAE5D9;background-size:100% 100%;}
.fidx i{font-style:normal;flex:none;opacity:0;transform:translateX(-10px);}
.fidx:hover i{opacity:1;transform:none;}

/* pie del panel crema: el logotipo es negro, aquí se lee a plena potencia */
.fmeta{
  margin-top:auto;padding-top:clamp(20px,2vw,30px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.fmeta__mark{height:clamp(50px,4.6vw,78px);width:auto;display:block;flex:none;}
.fmeta__data{font-family:Archivo,sans-serif;font-size:13.5px;line-height:1.55;color:#3a352d;text-align:right;}
.fmeta__data a{color:#16130F;text-decoration:none;}

/* subrayado que se dibuja de izquierda a derecha, sin mover el texto */
.fmeta__data a[href],.fpanel--direct .fbig[href]{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
}
.fpanel--direct .fbig[href]{background-size:0% 2px;}
.fmeta__data a[href]:hover{background-size:100% 1px;}
.fpanel--direct .fbig[href]:hover{background-size:100% 2px;}

/* --- pie legal --- */
.es-foot__legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px clamp(20px,3vw,40px);
  margin-top:clamp(26px,3vw,48px);
  padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid rgba(234,229,217,.16);
}
.es-foot__legal span,.es-foot__legal a{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#9A9486;text-decoration:none;
}
.es-foot__legal a:hover{color:#EAE5D9;}
.es-foot__links{display:flex;flex-wrap:wrap;gap:12px clamp(18px,2.4vw,32px);}

@media (max-width:900px){
  .fpanel--form,.fpanel--idx{grid-column:span 12;}
}
@media (max-width:420px){
  .fmeta{flex-direction:column;align-items:flex-start;}
  .fmeta__data{text-align:left;}
}

@media (prefers-reduced-motion: no-preference){
  .fidx{transition:background-size .5s cubic-bezier(.22,1,.36,1), color .2s ease .12s;}
  .fidx i{transition:opacity .35s ease, transform .4s cubic-bezier(.22,1,.36,1);}
  .fmeta__data a[href],.fpanel--direct .fbig[href]{transition:background-size .5s cubic-bezier(.22,1,.36,1);}
  .ffield input,.ffield textarea{transition:border-color .35s ease;}
  .fsubmit,.fig{transition:background .3s ease, color .3s ease;}
  .es-foot__legal a{transition:color .3s ease;}

  /* los paneles entran escalonados cuando el footer aparece; por defecto
     son visibles, así que un reveal que no dispare nunca no los oculta */
  html.motion .es-foot.in .fpanel{animation:foot-panel .75s cubic-bezier(.16,1,.3,1) both;}
  html.motion .es-foot.in .fpanel--idx{animation-delay:.1s;}
}
@keyframes foot-panel{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

@media (max-width:560px){
  .es-foot__legal{justify-content:flex-start;}
}

/* --- RGPD y honeypot del formulario del pie --- */
.frgpd{display:flex;align-items:flex-start;gap:9px;margin:2px 0 14px;
  font-family:Archivo,sans-serif;font-size:12px;line-height:1.4;color:#C9C4B6;}
.frgpd input{margin-top:2px;flex:0 0 auto;accent-color:#E99D25;}
.frgpd a{color:#E99D25;}
/* fuera de la vista, pero accesible para los robots que lo rellenan todo */
.fhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Respaldo sin JS: un ancla no debe quedar tapada por la cabecera fija. */
:target{scroll-margin-top:clamp(80px,12vh,120px);}

/* ============================================================
   AVISO EMERGENTE DE LOS FORMULARIOS DEL PIE  (aviso.js)
   Mismo tono que la confirmación de inscripcion.html, pero
   centrado sobre la página. El elemento lo crea el JS.
   ============================================================ */
.av{border:2px solid #16130F;background:#EAE5D9;color:#16130F;padding:0;
    max-width:540px;width:calc(100% - 34px);box-shadow:0 30px 70px -30px rgba(22,19,15,.7);}
.av::backdrop{background:rgba(22,19,15,.62);}
.av__in{padding:clamp(26px,4vw,46px);}
.av__k{font-family:Archivo,sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;
       text-transform:uppercase;color:#5a544a;margin:0 0 14px;}
.av__h{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;
       font-size:clamp(30px,4.4vw,52px);line-height:.92;margin:0 0 14px;color:#0D5141;}
.av__p{font-family:Archivo,sans-serif;font-size:15px;line-height:1.6;color:#3a352d;margin:0 0 26px;}
.av__x{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
       background:#16130F;color:#EAE5D9;border:0;padding:13px 22px;
       font-family:Archivo,sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;
       text-transform:uppercase;}
.av__x:hover{background:#0D5141;}
.av.is-err .av__h{color:#BA0101;}
.av.is-err .av__x:hover{background:#BA0101;}
.av__x:focus-visible{outline:3px solid #E99D25;outline-offset:3px;}

@media (prefers-reduced-motion: no-preference){
  .av[open]{animation:av-entra .46s cubic-bezier(.16,1,.3,1);}
  .av[open]::backdrop{animation:av-fondo .46s ease;}
}
@keyframes av-entra{from{opacity:0;transform:translateY(16px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes av-fondo{from{opacity:0;}to{opacity:1;}}