/* Tipografias de la casa (23-sep-2026).

   Antes venian de fonts.googleapis.com, y eso traia tres problemas a la vez:
   la hoja de Google bloqueaba el pintado en las 17 paginas; el cambio de la fuente de repuesto a
   la definitiva movia la cabecera de las fichas (CLS medido de 0,094, y bloqueando gstatic bajaba
   a 0,000); y el navegador se conectaba a Google antes de que nadie aceptara las cookies, cuando
   el propio aviso dice "si dices que no, no se carga nada".

   Archivo y Oswald son fuentes variables: un solo archivo por subconjunto cubre todos los pesos,
   por eso el font-weight lleva un rango y no un numero.
   Solo latin y latin-ext: la web es en castellano.
*/
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fuentes/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fuentes/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fuentes/oswald-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fuentes/oswald-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/bebas-neue-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/bebas-neue-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ---- El cursor de la casa (25-sep-2026) ----

   Va aqui porque esta es la unica hoja que cargan las 17 paginas. No es tipografia, pero meterlo
   en un archivo nuevo costaba una peticion mas en cada pagina para menos de un kilobyte.

   El cursor es un cuchillo de cocina, y se mancha al pasar por algo que se puede pulsar:
     --cur    con una gota de sangre, para andar por la pagina
     --cur-p  bien usado, para enlaces y botones
   Eso sustituye a la manita como senal de "esto se puede pulsar".

   Va en variables, no en reglas sueltas, porque la hoja ya tenia varias reglas suyas diciendo
   cursor:pointer y algunas eran mas especificas. Con variables, todas dicen lo mismo y no se
   escapa ninguna. Sin raton (movil, tableta) las variables valen auto y pointer.

   La punta del dibujo esta en el pixel 1,0: ese es el que de verdad pulsa.
   Dentro del widget de ERD se deja el cursor del sistema. Su calendario no se toca. */
:root{--cur:auto;--cur-p:pointer}
@media (hover:hover) and (pointer:fine){
  :root{
    --cur:url(/img/icono/cuchillo.png) 1 0, auto;
    --cur-p:url(/img/icono/cuchillo-usado.png) 1 0, pointer;
  }
  body{cursor:var(--cur)}
  a,button,summary,[role=button],.btn,label{cursor:var(--cur-p)}
  input,textarea,select{cursor:auto}
  input[type=text],input[type=email],input[type=tel],input[type=search],textarea{cursor:text}
  /* el widget de ERD lleva su cursor en css/erd.css, que es donde vive su piel */
}

/* El horario lleva un separador <i> entre "vie 16-24 h" y "sab y dom". En escritorio hace de
   salto de linea, que es como lo pidio Fran esta manana; en el movil vuelve a ser un punto y
   las tres franjas caben en una sola linea. */
.pie .horario i{display:block;height:0;overflow:hidden}

/* ---- El pie en el movil (25-sep-2026) ----

   Va aqui, como el cursor, porque el pie esta en las 17 paginas y su CSS estaba repetido en tres
   sitios (el <style> del index, paginas.css y ficha.css) con nombres distintos para el mismo
   contenedor: .piegrid en el index y .ancho en las demas. Una sola regla para los dos.

   Dos columnas, cada una con dos bloques:
     izquierda   el logo con su frase, y debajo Experiencias
     derecha     Madrid Terror, y debajo Contacto
   El logo baja de 120 a 64 px y se alinea a la izquierda con su frase. */
@media (max-width:900px){
  /* el logo, mas cerca del borde de arriba */
  footer.pie{padding-top:32px}
  /* footer.pie y no .pie a secas: el <style> del index declara las cuatro columnas de escritorio
     y va despues de esta hoja. Con la misma especificidad ganaba el suyo y la rejilla seguia
     teniendo CUATRO columnas en el movil, dos de ellas vacias de 17 px. */
  footer.pie .piegrid,footer.pie .ancho{grid-template-columns:1fr 1fr;gap:30px 22px}

  /* El logo y Contacto ocupan el ancho entero y van centrados: asi la direccion y el horario
     caben en una linea y los cuatro iconos salen en una fila, no en dos.
     Experiencias y Madrid Terror se reparten debajo en dos columnas. */
  footer.pie .marca{grid-column:1 / -1;grid-row:1}
  footer.pie .marca img{height:96px;margin-bottom:14px}
  footer.pie .col-con{grid-column:1 / -1;grid-row:2;text-align:center}
  footer.pie .col-con ul{justify-items:center}
  /* El horario en una sola linea. Dos cosas a la vez:
     - `.pie ul li{display:flex}` convierte este <li> en contenedor flex, y un hijo de un flex
       se vuelve bloque aunque le pongas display:inline. Por eso el separador seguia partiendo
       la linea. Se le devuelve display:block al <li> y el separador vuelve a ser inline.
     - el tamano lo manda el ancho de la pantalla, para que las tres franjas quepan. */
  footer.pie li.horario{display:block;white-space:nowrap;font-size:clamp(10px,3.1vw,12px)}
  footer.pie .horario i{display:inline;height:auto;overflow:visible;margin:0 .3em}
  /* el correo, separado de la direccion y el horario: son dos cosas distintas */
  footer.pie .col-con ul:not(.redes) li:last-child{margin-top:8px}
  footer.pie .col-con .redes{justify-content:center;flex-wrap:nowrap;gap:10px;max-width:none}
  footer.pie .col-exp{grid-column:1;grid-row:3}
  footer.pie .col-mt{grid-column:2;grid-row:3}
  footer.pie .legal{grid-column:1 / -1;grid-row:4}

  /* cada bloque pegado a lo alto de su fila, no estirado */
  footer.pie .piegrid > *,footer.pie .ancho > *{align-self:start}
  /* los nombres largos se leen como un item y conservan los 44 px de zona pulsable */
  footer.pie .piegrid ul li a,footer.pie .ancho ul li a{line-height:1.25;padding:5px 0;align-items:center}
  footer.pie .piegrid ul,footer.pie .ancho ul{font-size:14px}
}