/* ==========================================================
   NOTA SOBRE LOS ":hover" DE ESTE ARCHIVO
   ----------------------------------------------------------
   Van envueltos en "@media (hover:hover)". En un movil no existe
   pasar por encima: el navegador finge un hover al tocar y lo
   deja PUESTO hasta que toques otra cosa. Resultado: pulsas un
   boton, te lleva a otro sitio, vuelves y el boton sigue
   iluminado como si tuvieras el dedo encima.

   La envoltura va rule a rule y en su sitio, no agrupada al
   final: una media query no cambia la especificidad ni el orden,
   asi que la cascada queda exactamente igual que antes en un
   ordenador, y en el movil esas reglas sencillamente no existen.
   ========================================================== */

/* ==========================================================
   EL PIE — UN SOLO FICHERO
   ----------------------------------------------------------
   El mismo pie en las ocho páginas. Antes había dos maquetas
   distintas —.pie en la portada y .mega-foot en las interiores—
   que decían EXACTAMENTE lo mismo: mismos textos, mismos
   enlaces, misma ilustración. Comprobado uno contra otro antes de
   tocar nada; lo único que cambiaba era el botón y unas
   animaciones de entrada.

   Dos maquetas para el mismo contenido es el peor sitio donde
   estar: se ven iguales, así que nadie las arregla, y divergen
   solas cada vez que se toca una.

   Los respaldos de las variables son para que valga en los dos
   sitios: en la portada --texto y --ease existen, en las
   interiores no.
   ========================================================== */

/* ==========================================================
   EL PIE
   ----------------------------------------------------------
   YA NO TIENE ENTRADA. Tenía dos, y las dos se han ido:

     · la FORMA: el panel empezaba siendo una pastilla estrecha
       pegada al borde de abajo y se abría con clip-path hasta
       ocupar la pantalla.
     · las LETRAS: cada texto lo tapaba una barra maciza que
       entraba por la izquierda, lo cubría y salía por la derecha
       dejándolo escrito.

   Estaban bien resueltas, pero llegaban en el peor momento. El
   pie es el final de un recorrido de dos mil trescientos píxeles
   en los que el fondo se ha ido aclarando sin que se note nada:
   la gracia de ese viaje es que no pasa nada, y rematarlo con una
   pastilla que se abre y siete barras que escriben es contradecir
   en dos segundos lo que se ha construido en toda la bajada.

   Lo que queda es lo mínimo para que el pie no aparezca de golpe:
   sube doce píxeles y se funde, una vez, todo junto. Nada de
   escalonar por columnas — escalonar es llamar la atención sobre
   las piezas, y aquí lo que tiene que llegar es el bloque.
   ========================================================== */
.pie{
  position:relative; z-index:10;
  padding:0;

  /* EL PIE SE PINTA SU PROPIO NEGRO.
     ----------------------------------------------------------
     Su texto es blanco fijo, y desde que el fondo de la página
     acaba en blanco ya no puede fiarse de lo que tenga detrás.
     En el escritorio no se notaría —el bloque de enlaces cae
     encima de la mitad negra de la ilustración—, pero por debajo
     de 900 px el montón se deshace, el texto baja fuera de la
     imagen y se quedaría blanco sobre blanco.

     Se arregla haciendo el pie independiente en vez de calculando
     hasta dónde llega la ilustración en cada ancho: un negro
     propio vale para todos los anchos y para los que vengan.

     Y no rompe el enlace con la rampa: lo que se toca con la
     página es el borde de ARRIBA, que es la primera fila de la
     ilustración —blanca—, y ahí llega la rampa también blanca. */
  background:#000;
}

/* Dentro del pie no corre ninguna de las entradas de la página.
   Se apagan aquí, en un sitio, en vez de ir quitando clases del
   HTML: si mañana alguien copia un bloque de otra sección al pie
   con sus .entra-* puestas, sigue sin animarse. */
.pie .entra-arriba, .pie .entra-abajo,
.pie .entra-izq,    .pie .entra-der,
.pie .entra-zoom,   .pie .surge{
  opacity:1 !important; transform:none !important; transition:none !important;
}
.pie .rev::after{ display:none !important }

/* EL PIE NO ENTRA: YA ESTÁ AHÍ.
   Aquí llegó a haber una subida de doce píxeles con fundido para
   todo el bloque. Se va también.

   El motivo es el mismo que echó a la pastilla y a las barras,
   llevado hasta el final: el fondo de la web termina exactamente
   en el mismo blanco con el que empieza el cielo del pie, así que
   no hay frontera. Y si no hay frontera, no hay nada que cruzar
   —moviendo el bloque se INVENTA una: se ve llegar algo que, por
   color, ya estaba puesto.

   Se mueven solo las letras, que es lo único que de verdad
   aparece. */
.pie .rev > span{
  /* La barra que escribe no corre aquí: se apaga en la misma regla
     que define lo que sí hace, para que no haya dos sitios que
     hablen de lo mismo. */
  animation:none !important;
  opacity:0; transform:translate3d(0,7px,0);
  transition:opacity .45s var(--ease, cubic-bezier(.22,.61,.36,1)), transform .55s var(--ease-out, cubic-bezier(.16,1,.3,1));
  transition-delay:var(--d, 0s);
  will-change:transform, opacity;
}
.pie.es-visible .rev > span{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .pie .rev > span{ opacity:1 !important; transform:none !important; transition:none !important }
}

.pie__panel{
  position:relative;
  /* A pantalla completa: de borde a borde y como mínimo tan
     alto como la ventana. El "mínimo" y no una altura fija,
     porque si el contenido creciera —otro enlace, otra línea—
     una altura fija lo cortaría. */
  width:100%; min-height:100svh;
  display:flex; flex-direction:column;
  /* Negro puro, el mismo del pie publicado. No es el --dark de
     esta página (#0e0d0b, un negro con algo de tierra dentro):
     ahí abajo, con la ilustración encima y nada más, el negro
     total cierra mejor y no se lee como un gris muy oscuro. */
  background:#000; color:var(--paper, #f6f4ef);
  overflow:hidden;
}

/* El revelado —el recorte que se abre y las barras que escriben
   los textos— ya no vive aquí: lo pone .acto, que es el mismo
   para el manifiesto, los precios y el pie. Antes estaba escrito
   dos veces, con dos duraciones parecidas pero no iguales, y las
   secciones no acababan de entrar igual. */

/* ---------- La ilustración y el contenido ---------- */
/* Se lleva todo el alto que le sobre al panel. Antes ese hueco
   lo ocupaba el nombre grande; sin él, si el bloque no creciera
   el contenido se quedaría arriba y debajo habría un vacío
   suelto. Creciendo, la ilustración sigue arriba y el contenido
   —que va anclado abajo— baja hasta el borde de la pantalla. */
.pie__stack{ display:grid; grid-template-areas:"stack"; width:100%; flex:1 1 auto }
.pie__stack > *{ grid-area:stack; min-width:0 }
.pie__art{ width:100%; display:block; line-height:0; align-self:start; margin-bottom:clamp(1rem,5vw,5rem) }
.pie__art img{ width:100%; height:auto; display:block }

.pie__body{
  align-self:end; z-index:1;
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(260px,1.2fr) minmax(180px,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
  padding:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,4vw,4rem) clamp(1.6rem,4vw,4rem);
  width:100%;
}
.pie__nav{ display:flex; flex-direction:column; gap:clamp(1.5rem,3vw,2.5rem) }
.pie__col{ min-width:0; display:flex; flex-direction:column; gap:.7rem }
.pie__titulo{
  margin:0 0 .2rem; font-weight:700; font-size:1.02rem;
  letter-spacing:-.01em; color:var(--paper, #f6f4ef);
}
.pie__lista{ display:flex; flex-direction:column; gap:.5rem; list-style:none; margin:0; padding:0 }
.pie__lista a{
  color:rgba(255,255,255,.62); font-size:.95rem; text-decoration:none;
  transition:color .2s var(--ease, cubic-bezier(.22,.61,.36,1));
  display:inline-flex; align-items:center; width:fit-content;
}
@media (hover:hover){.pie__lista a:hover{ color:var(--paper, #f6f4ef) }}

.pie__centro{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; padding-top:.1rem }
.pie__llamada{ margin:0; font-weight:700; font-size:clamp(1rem,1.5vw,1.15rem); letter-spacing:-.01em; color:var(--paper, #f6f4ef) }
.pie__copia{ margin:0; color:rgba(255,255,255,.62); font-size:.95rem; line-height:1.5; max-width:34ch }
.pie__copia em{ font-family:var(--serif, Georgia, serif); font-style:italic; color:var(--paper, #f6f4ef); font-size:var(--serif-cuerpo, 1.04em) }
.pie__cta{
  margin-top:.4rem;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 2.1rem;
  background:var(--paper, #f6f4ef); color:var(--ink);
  border-radius:999px; text-decoration:none;
  font-weight:600; font-size:.98rem; line-height:1;
  text-transform:uppercase;
  transition:transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)), background-color .26s var(--ease, cubic-bezier(.22,.61,.36,1)),
             color .26s var(--ease, cubic-bezier(.22,.61,.36,1)), letter-spacing .3s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             box-shadow .3s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@media (hover: hover) and (pointer: fine){
  .pie__cta:focus-visible{
  background:transparent; color:var(--paper, #f6f4ef);
  box-shadow:inset 0 0 0 1.5px var(--paper, #f6f4ef), 0 12px 26px rgba(0,0,0,.5);
  transform:translateY(-3px) scale(1.035);
}
@media (hover:hover){.pie__cta:hover{
  background:transparent; color:var(--paper, #f6f4ef);
  box-shadow:inset 0 0 0 1.5px var(--paper, #f6f4ef), 0 12px 26px rgba(0,0,0,.5);
  transform:translateY(-3px) scale(1.035);
}}
}
/* El pie ya no usa la barra que escribe: ver más abajo. */

.pie__derecha{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:.9rem }
.pie__redes{ display:flex; gap:.5rem }
/* ==========================================================
   LOS ICONOS DEL PIE, QUE TAMBIÉN CONTESTAN
   ----------------------------------------------------------
   Eran los únicos elementos pulsables de la web sin respuesta: al
   pasar por encima solo cambiaban de blanco roto a blanco, un
   salto de color tan pequeño que en la práctica no se veía. Todo
   lo demás —los botones, los enlaces del pie, el botón del menú—
   se mueve cuando te acercas.

   Se levantan y crecen un poco, y el icono de dentro gira. Es el
   mismo gesto que hace la mariposa del menú, para que sea la misma
   web hablando y no cada rincón por su cuenta.

   El giro va en el SVG y no en el botón: si girara el botón
   entero, el círculo —que es un círculo— giraría sin que se notara
   nada, y lo que tiene que verse moverse es el dibujo.
   ========================================================== */
.pie__redes a{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:999px; background:var(--paper, #f6f4ef); color:var(--ink);
  transition:transform .28s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             background-color .22s ease,
             box-shadow .28s ease;
}
.pie__redes a svg{
  transition:transform .34s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@media (hover: hover) and (pointer: fine){
  /* CON "!important", Y ESTA VEZ HACE FALTA.
     Más abajo hay ".pie .surge{ transform:none !important }": la
     regla que apaga la animación de entrada dentro del pie, y estos
     iconos llevan la clase "surge". Un !important solo lo gana otro
     !important, así que sin esto el icono giraba pero el botón no
     se movía — medido, el transform salía "none".

     No es fuerza bruta por comodidad: es que aquella regla quiso
     decir "aquí no hay animación DE ENTRADA", no "aquí nada se
     mueve nunca". */
  .pie .pie__redes a:hover{
    background:#fff;
    transform:translateY(-3px) scale(1.08) !important;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
  }
  @media (hover:hover){.pie .pie__redes a:hover svg{ transform:rotate(-8deg) scale(1.06) }}
}
.pie .pie__redes a:active{ transform:translateY(-1px) scale(.96) !important }
.pie__redes a:focus-visible{
  outline:2px solid var(--paper, #f6f4ef); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  .pie__redes a, .pie__redes a svg{ transition:none }
  @media (hover:hover){.pie__redes a:hover{ transform:none }}
  @media (hover:hover){.pie__redes a:hover svg{ transform:none }}
}
.pie__anio{ margin:0; font-weight:700; font-size:.9rem; color:var(--paper, #f6f4ef) }
.pie__sitio{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .9rem; text-decoration:none;
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  font-size:.78rem; color:rgba(255,255,255,.62);
  transition:border-color .22s var(--ease, cubic-bezier(.22,.61,.36,1)), color .22s var(--ease, cubic-bezier(.22,.61,.36,1));
}
@media (hover:hover){.pie__sitio:hover{ border-color:var(--paper, #f6f4ef); color:var(--paper, #f6f4ef) }}


@media (max-width:960px){
  .pie__stack{ display:block }
  .pie__art img{ width:100%; height:auto; max-height:46vw; object-fit:cover; object-position:center 38% }
  .pie__body{ grid-template-columns:1fr 1fr; gap:2rem; padding-top:clamp(1.5rem,3vw,2.5rem) }
  .pie__derecha{
    grid-column:1 / -1; flex-direction:row; align-items:center;
    justify-content:space-between; flex-wrap:wrap; text-align:left;
    padding-top:1rem; border-top:1px solid rgba(255,255,255,.14);
  }
}
@media (max-width:640px){
  .pie__body{ grid-template-columns:1fr; gap:2rem; text-align:center }
  .pie__nav{ gap:1.8rem }
  .pie__col{ align-items:center }
  .pie__lista a{ justify-content:center }
  .pie__derecha{ align-items:center; justify-content:center; flex-direction:column; text-align:center; gap:.9rem }
  .pie__art img{ max-height:62vw; object-position:center 40% }
}

@media (prefers-reduced-motion: reduce){
}


/* El pie no depende de las entradas de la portada.
   .entra-* y .surge las define la hoja de la portada; en las
   páginas de dentro no existen, así que sus piezas se quedarían
   con la opacidad que traiga cada hoja. Aquí se fija: en el pie
   no entra nada, ya está puesto. */
.pie [class*="entra-"],
.pie .surge{ opacity:1 !important; transform:none !important }


/* ==========================================================
   EN EL MÓVIL, LOS RETARDOS A LA MITAD
   ----------------------------------------------------------
   Cada línea del pie entra un poco después que la anterior, y el
   escalonado llega hasta 1,14 s en la última. En un ordenador el
   pie entero cabe de un vistazo y ese escalonado se lee como una
   cascada.

   En un móvil el pie ocupa tres pantallas: cuando llegas a la
   última línea ya han pasado esos 1,14 s de sobra... o no, si has
   bajado rápido, y entonces lo que ves es un hueco donde debería
   haber una palabra. Es lo que se ve como "hay palabras que no
   cargan": no es que no carguen, es que están esperando su turno.

   Se recorta el escalonado a menos de la mitad. Sigue habiendo
   cascada —se nota que las líneas no entran a la vez— pero la
   última no se hace esperar más de medio segundo. */
@media (max-width:820px){
  .pie .rev > span{ transition-delay:calc(var(--d, 0s) * .42) }
}


/* ==========================================================
   "TODO CAMBIO EMPIEZA / CON UN MOVIMIENTO", EN DOS LÍNEAS
   ----------------------------------------------------------
   La frase lleva un <br> en el HTML desde siempre, así que en el
   marcado son dos líneas. En pantalla eran SEIS: medido, el párrafo
   se quedaba en 148 px de ancho —lo estruja el flex del bloque
   central, que le da el ancho de su contenido mínimo— y dentro de
   148 px cada mitad de la frase se parte en tres.

   Se le quita el corsé y se le prohíbe partir por su cuenta. Con
   "nowrap" el único salto que queda es el que está escrito, que es
   justo lo que se pedía:

       Todo cambio empieza
       con un movimiento.

   Y por si en una pantalla muy estrecha no cupiera, el cuerpo cede
   antes que la frase: prefiero la letra un punto más pequeña que
   una frase rota en sitios que nadie eligió. */
.pie .pie__copia{
  width:auto;
  max-width:none;
  flex:0 0 auto;
  /* El "nowrap" va en el párrafo, no solo dentro: el padre es un
     flex centrado y le da a sus hijos el ancho de su contenido
     MÍNIMO. Con el párrafo sin partir, ese mínimo pasa a ser la
     línea más larga —que es lo que se quiere— en vez de la palabra
     más larga, que es lo que daba los 148 px. */
  white-space:nowrap;
}
.pie .pie__copia .rev,
.pie .pie__copia .rev > span{ white-space:nowrap }
@media (max-width:420px){
  .pie .pie__copia{ font-size:clamp(.92rem, 4.4vw, 1.2rem) }
}