/* ============================================================================
   EL PIE, COMPARTIDO POR TODAS LAS PAGINAS PUBLICAS
   ----------------------------------------------------------------------------
   ⚑⚑ ESTA HOJA EXISTE PARA NO CARGAR `landing.css` EN LAS PAGINAS LEGALES. El pie lo llevan la
   portada, contacto, los cuatro documentos legales y la baja de correo; `landing.css` trae ademas
   todo el estilo de la portada y comparte clases con los legales (`.doc`, `.lsection`, `h2`), asi
   que meterla ahi les cambiaria el aspecto. Aqui solo esta el pie.
   ⚑ Los colores salen de los tokens de `legal/legal.css`, que cargan todas.
   ⚑⚑ EL MARCADO DEL PIE ESTA DUPLICADO EN CADA PAGINA, porque el sitio es HTML estatico sin
   ningun paso de construccion. Si se cambia un enlace hay que cambiarlo en TODAS. La lista esta en
   LANDING.md.
   ============================================================================ */

/* ⚑⚑ EL PIE ES EL CAMPO DE FLORES, Y EL PERFIL DE LAS MONTANIAS LO PONE EL PROPIO PNG. No
   hace falta ninguna mascara: `flower_field_v2` es RGBA y trae el cielo TRANSPARENTE por encima de
   las montanias (medido: los picos empiezan en el 35.9% del alto y desde el 49.5% ya no queda ni
   una columna transparente). Como fondo de un elemento SIN color de fondo, ese cielo transparente
   deja ver la pagina, asi que el borde de arriba del pie es la silueta y no una raya.
   ⚑ Por eso se va el `border-top`, que era justo la raya recta que sobraba, y por eso NO puede
   haber `background-color` aqui: rellenaria el cielo y se acabo la silueta.
   ⚑⚑ Y por eso mismo NO lleva `background-attachment:fixed`. Con `fixed` el fondo se coloca
   respecto a la VENTANA, no al elemento: la silueta dejaria de estar pegada al borde superior del
   pie y se pasearia con el scroll. Las dos cosas —fondo fijo y montanias haciendo de borde— se
   excluyen; se ha elegido la silueta, que es la que se pidio por escrito.
   ⚑ El relleno de arriba baja el contenido POR DEBAJO del valle mas hondo (27.84vw), para que
   los enlaces caigan sobre el campo y no sobre el cielo transparente. Va en `vw` porque la imagen
   escala con el ancho: cualquier tope en px descuadraria la relacion en pantallas grandes. */
.lfoot{
  /* ⚑ Poco margen: el hueco entre los botones de los planes y las montanias lo hacen TRES cosas
     sumadas —el relleno inferior de la ultima seccion, este margen y el cielo vacio de la propia
     foto— y la tercera era la gorda. Ver abajo. */
  margin-top:clamp(6px, 0.8vw, 14px);
  /* ⚑⚑ LA FOTO VA RECORTADA POR ARRIBA. El PNG trae 268 filas de cielo TRANSPARENTE por encima
     del pico mas alto, y como el fondo escala con el ancho esa banda vacia metia mas de 300 px de
     crema entre los botones y la primera montania. Recortada, el pico queda a 0.59vw del borde y el
     valle mas hondo al 22.4% del alto pintado. La relacion alto/ancho pasa de 0.5626 a 0.3663.

     ⚑⚑ `cover` Y NO `100% auto`, Y ESTO ES LO QUE QUITA LA FRANJA MARRON. Con `100% auto` el alto
     de la foto lo manda el ANCHO —es un paisaje de 2.7:1— mientras que el alto del pie lo manda su
     contenido, unos 340-380 px casi constantes. Por debajo de ~1010 px de ventana la foto se
     quedaba mas corta que el pie y lo que sobraba se rellenaba de marron liso: medido, 234 px a
     375, 77 a 700, 54 a 785, 28 a 885 y 0 a partir de 1009. Con `cover` la foto se escala hasta
     taparlo entero y se recorta por los lados; las montanias siguen arriba porque la posicion es
     `top center`. Por encima de 1010 `cover` da EXACTAMENTE lo mismo que `100% auto` —la foto ya
     era mas alta que el pie— asi que no cambia nada donde ya estaba bien. Y desaparece la capa de
     relleno, que existia solo para tapar ese hueco.

     ⚑⚑ EL RELLENO SUPERIOR ES UN `max()` DE DOS CUENTAS, una por cada regimen:
       · foto mas alta que el pie (pantallas anchas): el valle cae a 8.21vw del borde.
       · pie mas alto que la foto (pantallas estrechas): el alto pintado ES el del pie, asi que el
         valle cae al 22.4% de el; con el contenido midiendo C hace falta P >= 0.2887*C, que
         medido son 78-94 px. El `clamp` cubre eso con margen.
     Con el `max()` no hay salto en ningun ancho: manda la que toca en cada tramo. */
  background:url("images/web/flower_field_v2-1365.webp") top center / cover no-repeat;
  padding-top:max(calc(8.21vw + clamp(16px, 2vw, 40px)), clamp(97px, 26vw, 150px));
  /* ⚑⚑ El halo del pie es OSCURO, al reves que el del resto de la pagina: aqui la tinta pasa a
     ser clara porque el fondo es una foto. El 0.65 no es a ojo — medido sobre la banda donde cae
     el contenido, con 0.50 quedaba el 1.6% de la superficie por debajo de 4.5:1 y con 0.62 ya es
     cero; se deja 0.65 de margen. */
  --halo-pie:rgba(22, 13, 11, .65);
}

.lfoot-in{ max-width:1040px; margin:0 auto; padding:34px 22px 44px; text-align:center; }
/* Official brand marks (Simple Icons, CC0), not hand-drawn: two attempts at approximating the
   Threads glyph produced an unrecognisable swirl. These are filled paths, so no stroke. */
.lfoot .social{ display:flex; gap:14px; justify-content:center; margin:0 0 10px; }
.lfoot .social a{
  /* ⚑ Dos escalones (x1.2656), los mismos que el texto del pie: 42 -> 53 el circulo y 19 -> 24
     el icono, para que no se queden pequenios al lado de unos enlaces de 17.76 px. */
  display:inline-flex; align-items:center; justify-content:center; width:53px; height:53px;
  border:1px solid var(--line); border-radius:999px; color:var(--ink-soft);
  background:var(--bg); transition:.15s;
}
.lfoot .social a:hover{ color:var(--rose-deep); border-color:var(--rose-deep); }
.lfoot .social svg{ width:24px; height:24px; fill:currentColor; }
/* ⚑ Dos escalones arriba en la escala de 1.125 del proyecto (x1.2656), aplicados por igual a
   todo el texto del pie para no descuadrar su jerarquia interna. */
.lfoot .social-handle{ font-size:1.11rem; color:var(--ink-soft); margin:0 0 18px; }
.lfoot nav{ display:flex; gap:8px 18px; justify-content:center; flex-wrap:wrap; margin:0 0 16px; }
.lfoot nav a{ color:var(--ink-soft); font-size:1.11rem; text-decoration:none; }
.lfoot nav a:hover{ color:var(--rose-deep); text-decoration:underline; }
.lfoot .fine{ font-size:1.04rem; color:var(--ink-faint); line-height:1.6; margin:0; }
.lfoot .fine a{ color:var(--ink-soft); }
/* ⚑⚑ EL TEXTO DEL PIE PASA A SER CLARO, y no es una preferencia: medido sobre la foto, en la
   banda donde cae el contenido, `--ink-soft` daba una media de 2.2:1 con el 100% de la superficie
   por debajo de 4.5:1, y `--ink-faint` un 88-97%. Tampoco basta con aclararlo: el campo tiene
   flores muy claras y sombras muy oscuras a la vez (luminancia de fondo del 0.009 al 0.518), asi
   que NINGUNA tinta plana pasa — el blanco puro falla en el 42.6%. Lo que resuelve es el halo, que
   garantiza el contraste en el CONTORNO de cada letra. Mismos desplazamientos que en la arboleda,
   para que las dos secciones con foto detras se lean igual. */
.lfoot .social-handle,
.lfoot nav a,
.lfoot .fine,
.lfoot .fine a{
  color:#FBF9F5;
  text-shadow:
    -1px 1px 0 var(--halo-pie), -2px 2px 0 var(--halo-pie),
    0 0 2px var(--halo-pie),
    -3px 3px 10px rgba(22, 13, 11, .45);
}
.lfoot nav a:hover, .lfoot .fine a:hover{ color:#FFFFFF; }
/* ⚑ Este bloque va DESPUES de todas las reglas `.lfoot ...` a proposito. Lo puse primero junto a
   `.lfoot` y el color no se aplicaba: `.lfoot nav a{ color:var(--ink-soft) }` tiene la MISMA
   especificidad y estaba mas abajo, asi que ganaba por orden. La sombra si se veia —nadie mas la
   declara— y eso disimulaba el fallo. */

/* ---------------------------------------------------------------------------------
   Las paginas que NO son la portada (contacto, baja de correo y los cuatro legales)
   montan el texto dentro de `.wrap`, que es una columna de 720px con 64px de aire por
   debajo. Ese aire lo puso ahi el pie viejo, que era una linea de texto pegada al
   final de la columna. El pie de ahora es una franja de borde a borde con su propio
   margen, asi que los 64px se suman a el y abren un hueco que no pinta nada.
   `:has(+ .lfoot)` lo recorta SOLO donde el pie va detras: si algun dia una pagina se
   queda sin pie, recupera su aire sola y no hay que acordarse de nada. */
.wrap:has(+ .lfoot){ padding-bottom:22px; }

/* La marca del copyright es el enlace de vuelta al inicio. Va sin subrayado en reposo
   para que la linea legal siga leyendose como una frase y no como una barra de menu;
   el subrayado aparece al pasar por encima, que es cuando hace falta saber que es un
   enlace. Hereda el color y el halo de `.lfoot .fine` de arriba, asi que no se repinta
   aqui: si cambia el color del pie, cambia con el. */
.lfoot .fine .marca{ text-decoration:none; }
.lfoot .fine .marca:hover,
.lfoot .fine .marca:focus-visible{ text-decoration:underline; text-underline-offset:3px; }

/* En una pagina CORTA —darse de baja, contacto, un legal breve en una pantalla alta— el
   contenido no llega abajo, pero `body` mide `min-height:100vh`, asi que el pie acababa
   antes que el body y asomaba una franja de degradado por debajo. No es un margen que
   quitar: es sitio que hay que rellenar, y solo lo sabe el navegador al maquetar. La
   columna flexible se lo da a `.wrap`, que crece hasta empujar el pie al final; cuando el
   texto ya es largo, `flex-grow` no tiene nada que repartir y no cambia nada.
   El selector pide `.wrap + .lfoot` a proposito: la portada no tiene `.wrap`, asi que
   queda fuera y su heroe pegajoso no se entera de esta regla. */
body:has(> .wrap + .lfoot){ display:flex; flex-direction:column; min-height:100svh; }
body:has(> .wrap + .lfoot) > .wrap{ flex:1 0 auto; }