/* ============================================================
   404.html — página de error

   No es una página del sitio: la sirve el servidor ante cualquier ruta que
   no existe. GitHub Pages coge /404.html de la raíz sin configurar nada;
   servidor-local.js hace lo propio para verlo igual en local.

   Página suelta, así que lleva los mismos apaños que contacto.css,
   mision.css, portfolio.css, presupuesto.css y servicios.css: carga nav.js
   (nunca main.js) y arregla la barra, que en estilos.css entra animada
   contra la secuencia de #intro y aquí no hay intro a la que esperar.

   El pie (.svc-footer) ya está resuelto en estilos.css, incluido el
   opacity:1 que .panel__in>* necesita fuera del cajón de la portada; aquí
   no hace falta repetirlo.
   ============================================================ */

/* La barra entra con navDrop y sus <li> con itemIn, dos animaciones
   encadenadas a la intro de la portada: 1,94s de espera antes de asomar.
   transform:none no es de adorno: la regla base de .nav deja el elemento en
   translateY(-160%) y era la propia animación (fill both) la que lo traía a
   su sitio, así que quitándola sin más la barra se quedaría fuera de
   pantalla. */
.nav{animation:none;transform:none}
.nav__menu li{animation:none;opacity:1;transform:none}
/* .nav__mark lleva pointer-events:none en estilos.css (ahí es solo
   decorativo, un SVG suelto); aquí la marca es un enlace al inicio, así que
   hay que devolverle los clics a la propia <a>. Y el ancho va sobre <img>,
   porque la regla de estilos.css apunta a .nav__mark svg. */
.nav__mark a{pointer-events:auto;display:block}
.nav__mark img{width:198px;height:auto;display:block}

/* Ya no hace falta el min-height que empujaba el pie hacia abajo: esa altura
   la pone ahora el jardín, que además la reparte con algo que mirar en vez de
   con un hueco vacío.
   text-align:left explícito contra el justify global del body (estilos.css):
   sin él, el lead de dos líneas estira los huecos entre palabras. */
.e404{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,64px);text-align:left}

.e404-hero{padding:clamp(56px,8vw,104px) 0 clamp(30px,4vw,48px)}
.e404-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--olive);margin-bottom:14px}
.e404-hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;line-height:1.05;
  letter-spacing:-.03em;margin-bottom:18px}
.e404-lead{font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:rgba(61,65,39,.78);
  max-width:52ch}

/* Píldoras crema sobre el --sand de la página. Los dos colores del reposo
   (--olive sobre --cream, 5,2) y los del hover (--sand sobre --olive, 4,6)
   pasan de sobra el 4,5 que pide un texto de 15px. */
.e404-salidas ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.e404-salidas a{display:inline-flex;align-items:center;padding:14px 26px;
  border-radius:var(--r-pill);background:var(--cream);color:var(--olive);
  font-size:15px;font-weight:700;text-decoration:none;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.e404-salidas a:hover{background:var(--olive);color:var(--sand);transform:translateY(-2px)}
.e404-salidas a:active{transform:translateY(0)}


/* ============ el jardín ============ */
/* Doce flores de ocho tipos, todas radiales a propósito: así el giro continuo
   se lee como que la flor da vueltas sobre su eje y no como que el dibujo está
   torcido. Cada una entra por variables en su atributo style —sitio, tamaño,
   color, opacidad y los tres tiempos—, así que variar el jardín es tocar la
   tabla del HTML, no el CSS.

   Los colores salen de la escala de valor de la identidad (pálido, salvia y
   oliva medio son, literalmente, "para formas, ilustración y fondos alternos"),
   más algún oliva de marca rebajado en opacidad. Nada de hexadecimales: el
   color llega como var(--c) y los símbolos pintan con currentColor.

   El corazón de varias flores va en --sand, el mismo fondo de la página, que
   es la regla del invariante 7 para las versiones animadas de la marca: el
   hueco no es un agujero de verdad, va pintado del color de lo que tiene
   detrás. Por eso las flores no se pisan entre sí en el reparto.

   Tres animaciones repartidas en dos elementos para que no se peleen por la
   misma propiedad: .flor brota (scale) y se mece (translate) —dos propiedades
   distintas, así que pueden convivir en el mismo elemento—, y el <svg> de
   dentro gira (rotate). Las tres usan las propiedades sueltas scale/translate/
   rotate y no la taquigrafía transform, que solo admite una a la vez.

   backwards y no both en la entrada, por el invariante 1: con both la
   animación deja fijado su valor final y anula lo que venga después sobre esa
   propiedad. Con backwards, al terminar manda otra vez el CSS —que es de
   donde salen la opacidad de reposo y el mecido. */
/* overflow:hidden es la red de seguridad de los extremos: la flor del 96%
   asoma media anchura por fuera, y sin esto ensancharía el documento. */
.jardin{position:relative;width:100%;height:clamp(250px,34vh,380px);
  margin-top:clamp(34px,5vw,62px);pointer-events:none;overflow:hidden}
.jardin__defs{position:absolute;width:0;height:0;overflow:hidden}

/* El punto que marcan --x/--y es el CENTRO de la flor, no su esquina: los dos
   márgenes negativos la recogen medio ancho hacia arriba y hacia la izquierda.
   Se hace así, y no con un translate(-50%,-50%), porque translate ya está
   ocupado por el mecido y se pisarían. */
/* --f encoge el jardín entero en pantallas estrechas sin tocar la tabla del
   HTML: multiplica el ancho y los dos márgenes a la vez, así que la flor
   sigue centrada en su punto. */
.flor{--f:1;
  position:absolute;left:var(--x);top:var(--y);
  width:calc(var(--w) * var(--f));height:calc(var(--w) * var(--f));
  margin-left:calc(var(--w) * var(--f) / -2);margin-top:calc(var(--w) * var(--f) / -2);
  color:var(--c);opacity:var(--o,1);
  animation:florBrota 1.1s cubic-bezier(.16,1,.3,1) var(--espera,0s) backwards,
            florMece var(--dur,20s) ease-in-out var(--espera,0s) infinite}
.flor svg{display:block;width:100%;height:100%;
  animation:florGira var(--giro,50s) linear infinite var(--dir,normal)}

@keyframes florBrota{from{scale:0;opacity:0}to{scale:1;opacity:var(--o,1)}}
@keyframes florMece{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes florGira{to{rotate:360deg}}

/* Con movimiento reducido el jardín NO se esconde, al revés que la red de
   formas de servicios.html: allí el elemento es la animación, aquí el dibujo
   se sostiene solo. El bloque del final de estilos.css ya deja toda animación
   en .01ms, así que las flores aparecen ya crecidas y quietas — que es
   exactamente lo que pide quien ha desactivado el movimiento. */

@media (prefers-reduced-motion:reduce){
  .e404-salidas a{transition:background .18s ease,color .18s ease}
  .e404-salidas a:hover{transform:none}
}

@media (max-width:820px){
  .nav__mark img{width:150px}
  /* en vertical la fila de píldoras cabe justa: sin esto la última cae sola
     en su propia línea y desequilibra el bloque */
  .e404-salidas a{padding:13px 22px;font-size:14.5px}
  /* las cuatro últimas caen en el tercio derecho, que en vertical ya no
     existe: se quitan en vez de amontonarlas */
  .flor--extra{display:none}
  .flor{--f:.6}
  .jardin{height:clamp(170px,28vh,240px);margin-top:clamp(26px,5vw,44px)}
}