/* legal.css - Los tres textos legales (15-08-2026):
   aviso legal y politica de privacidad (la de cookies se quito: la
   web no usa ninguna, ver js/model.js).

   LOS TRES COMPARTEN ESTA MISMA SECCION (#legal): el contenido lo
   cambia view.js segun a cual se entre, asi que no hay tres bloques
   casi iguales repetidos. Los textos estan en js/model.js.

   Se llega por los enlaces del pie, no por el menu de arriba (ese es
   para su trabajo). A diferencia del resto de la web, ESTA SECCION SI
   SE DESPLAZA: son textos largos de leer, no fotos. */

#legal {
  padding-top: var(--nav);
  padding-bottom: 60px;
}

.legal-wrap {
  /* Ancho de lectura comodo: una linea muy larga cansa. Es el mismo
     criterio del aviso de derechos del pie (max-width 640). */
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* El titulo del documento, con la misma tipografia y el mismo aire que
   los titulos de las demas secciones */
.legal-titulo {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: 22px;
  color: var(--negro);
  margin-bottom: 34px;
}

/* Cada apartado ("Data controller", "Your rights"...). Mismo estilo que
   los titulos de apartado del CV: pequeño, en mayusculas y con una
   linea fina debajo, para que se reconozcan como la misma familia. */
.legal-apartado {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700;
  color: var(--negro);
  padding-bottom: 10px;
  margin: 28px 0 12px;
  border-bottom: 1px solid var(--gris-claro);
}
/* El primero no necesita separarse tanto: ya viene del titulo */
.legal-cuerpo > .legal-apartado:first-child { margin-top: 0; }

/* Texto mas pequeño, mas junto y en un gris mas claro que el resto de
   la web (peticion de Alicia, 21-08-2026): estos textos son letra
   pequeña legal, no contenido para leer con calma como el CV o la
   presentacion, asi que no hace falta que pesen tanto como aquellos
   (que van en var(--negro), #4a4a4a). var(--gris) es el mismo gris que
   usan ya los subtextos del CV y del pie. */
.legal-parrafo {
  font-size: 12px;
  line-height: 1.6;
  color: var(--gris);
  /* JUSTIFICADO, en caja (Alicia, 28-08-2026: "en legal y privacy
     justificamos el texto en caja, no a la izquierda"). Es el mismo
     criterio que ya sigue el aviso de derechos del pie: un texto legal
     en columna, con los dos bordes rectos. El ultimo renglon se queda
     pegado a la izquierda por defecto, que es lo normal. */
  text-align: justify;
  margin-bottom: 8px;
}

.legal-lista {
  margin: 0 0 8px;
  padding-left: 18px;
}
.legal-lista li {
  text-align: justify;      /* mismo criterio que .legal-parrafo */
  font-size: 12px;
  line-height: 1.6;
  color: var(--gris);
  margin-bottom: 6px;
}

/* El "© 2026 alicia f. barranco. All rights reserved." con el que
   Alicia cierra los tres textos */
.legal-firma {
  margin-top: 40px;
  font-size: 11px;
  /* Del mismo gris que el AVISO DE DERECHOS del mosaico (Alicia,
     28-08-2026: "el texto -all right...- lo ponemos del mismo color que
     en el mosaico principal esta la copyright notice"). Antes seguia a
     la firma del pie, que era mas oscura; ahora las dos van en este
     mismo gris, asi que la referencia se mantiene igual. */
  color: var(--gris-suave);
}

/* En estos textos el pie sobra: el aviso de derechos que lleva es de
   las fotos del mosaico, y aqui no hay fotos. Ademas repetiria los
   enlaces legales dentro de un texto legal. */
body:has(#legal.active) .pie { display: none; }

/* LA BARRA, OPACA AQUI. Desde el 24-08-2026 estas paginas llevan la
   clase "sin-marca" para esconder el nombre de arriba (peticion de
   Alicia), pero esa clase ademas deja la barra TRANSPARENTE -en el
   About tiene sentido, porque alli no se desplaza nada-. Aqui si se
   desplaza, y son textos largos: sin fondo, los parrafos se verian
   pasar por detras de los dos iconos, que es justo lo que Alicia ya
   dio por malo en su dia en el About de movil (v5.74).
   El !important es necesario porque nav.css pone el fondo transparente
   con selectores mas concretos (body.sin-marca, body.bajado). */
body:has(#legal.active) nav { background: var(--fondo) !important; }

/* ---- LOS ENLACES DEL PIE ---- */

/* La fila de "Legal notice · Privacy policy" (ya sin "Cookie policy",
   ver js/model.js). Alineada a la derecha, con el icono del menu
   (peticion de Alicia, 21-08-2026): antes iba centrada, junto al aviso
   de derechos y la firma.
   OJO: esto NO es "position:fixed" -se probo asi primero y quedaban
   flotando todo el rato sobre el mosaico, tapando fotos al pasar por
   detras (aviso de Juan, 21-08-2026: "los pones que se ven siempre...
   debe de verse solo cuando se baja al final de la pagina"). Sigue
   siendo parte del pie normal, dentro de su flujo: solo se ve al
   llegar abajo del todo, como el resto del pie. Lo unico que cambia es
   que, DENTRO de esa fila, quedan pegados al borde derecho en vez de
   centrados -"justify-content:flex-end" en vez de "center"-, y como
   ".pie" no lleva max-width (a diferencia de ".pie-derechos", que si
   lo lleva y va centrado), ese borde derecho coincide con el padding
   derecho del pie, que es el mismo var(--pad) que usa la barra: por
   eso quedan alineados con el icono del menu sin necesitar posicion
   fija ni calculo aparte. */
/* VAN DEBAJO DE LA FIRMA, EN TODAS LAS VERSIONES (23-08-2026). Se hizo
   primero solo para movil -donde los dos enlaces, pegados a la derecha,
   caian justo encima del "© 2026 alicia f. barranco" centrado y se
   leian como parte de el- y, al verlo, Alicia pidio lo mismo en PC y
   tablet: "los dos avisos de final de la web, asi como en el movil
   vertical estan bien; me gustaria que en version PC y TABLET tambien
   esten asi: debajo de la firma, a la derecha (alineado con menu)".
   Esto sustituye a lo que pidio el 21-08 ("respetando el copyright con
   mi firma debajo, como estaba"): ahora es al reves en todas partes.
   SE HACE CON "order" Y NO CAMBIANDO EL HTML: en el codigo siguen entre
   el aviso de derechos y la firma, que es su orden logico de lectura.
   Para que "order" surta efecto el pie tiene que ser flex; en columna
   se comporta igual que como bloque normal, asi que no cambia nada mas
   -el aviso de derechos sigue centrado por sus margenes automaticos y
   la firma por el text-align del pie-. */
.pie {
  display: flex;
  flex-direction: column;
}
/* ALINEADOS CON EL AVISO DE DERECHOS, NO CON EL BORDE DE LA PAGINA
   (Alicia, 30-08-2026: "el legal notice y el privacy, que en vez de
   alineado con el menu, lo ponemos alineado con el texto de copyright
   notice a la derecha").
   Se consigue dandoles la MISMA CAJA que al aviso -640px centrados, ver
   .pie-derechos en base.css- y empujandolos dentro de ella a la
   derecha. Asi su borde derecho coincide exactamente con el del
   parrafo de encima, este la ventana como este.
   Ya no llevan "order": ese venia de cuando el pie era flex y la firma
   iba la ultima; ahora el orden lo da el propio HTML. */
.pie-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 18px;
  /* EL ANCHO, EXPLICITO. El pie es un contenedor flex en columna, asi
     que sin esto la fila de enlaces se encoge a lo que ocupan las dos
     palabras y el "auto" del margen la deja centrada: alinearla a la
     derecha no servia de nada porque su caja ya terminaba donde el
     texto. Con el 100% ocupa el mismo ancho que el aviso de encima -y
     el mismo tope de 640px-, y ahi si, el flex-end la lleva a su borde
     derecho. */
  width: 100%;
  max-width: 640px;
  margin: 12px auto 0;
}
.pie-legal-enlace {
  font-size: 10.5px;
  letter-spacing: .06em;
  /* Del mismo gris que el aviso de derechos que tienen encima (Alicia,
     28-08-2026): asi los tres textos del pie -aviso, enlaces y firma-
     van al mismo tono y el bloque se lee como uno solo. */
  color: var(--gris-suave);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
/* Se subraya y se oscurece al pasar el raton. Solo con raton de verdad:
   en tactil el ":hover" se queda pegado tras tocar (mismo motivo que en
   .nav-icon, ver nav.css). */
@media (hover: hover) and (pointer: fine) {
  .pie-legal-enlace:hover {
    color: var(--negro);
    border-bottom-color: var(--gris-claro);
  }
}

/* En movil los tres enlaces no caben en una linea: se apilan solos por
   el "flex-wrap" de arriba, solo hace falta apretar un poco el hueco. */
@media (max-width: 768px) {
  /* AQUI HABIA UN "margin-right: -22px" y se quita. Estaba para que la
     fila de enlaces alineara con EL ICONO DEL MENU de la barra, que en
     movil usa un padding mas estrecho. Alicia cambio esa referencia el
     30-08-2026: "en vez de alineado con el menu, lo ponemos alineado
     con el texto de copyright notice a la derecha". Con el margen
     negativo puesto se salian 22px por fuera del aviso. */
  .pie-legal { gap: 4px 14px; }
  .pie-legal-enlace { font-size: 10px; }
  .legal-titulo { font-size: 19px; }
}


/* AQUI ESTABAN LOS ESTILOS DEL ENLACE "BACK" (.legal-volver), que se
   quito entero el 24-08-2026 a peticion de Alicia: para salir de un
   texto legal se usa el punto negro de la barra. Ver index.php. */

/* DEGRADADO BLANCO AL PIE, SOLO EN HORIZONTAL (Alicia, 28-08-2026):
   "con la tablet en horizontal añadimos degradado blanco en el apartado
   legal notice y en privacy; tambien con el movil horizontal".
   El motivo es el mismo que en el CV: tumbado, el alto util se queda en
   nada -en un movil, unos 300px para un texto de varias pantallas- y el
   texto llega al borde cortado en seco, sin que se vea que sigue. Con
   el desvanecido se lee como lo que es, un documento largo.
   NO HACE FALTA EN VERTICAL: ahi entra texto de sobra en pantalla y se
   ve solo que continua.
   VA FIJO AL BORDE DE LA PANTALLA y no al final del texto, porque esta
   seccion desplaza la pagina entera en vez de tener una caja con
   scroll propio (a diferencia del CV): lo que hay que desvanecer es
   donde la pantalla corta, no donde acaba el documento. Se puede usar
   position:fixed aqui dentro porque la animacion de entrada de las
   secciones es solo de opacidad; un transform habria roto el fixed.
   Sin pointer-events, que por debajo se sigue desplazando. */
@media (hover: none) and (orientation: landscape) {
  #legal.active::after {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, .75) 55%,
                var(--fondo) 100%);
    pointer-events: none;
    z-index: 5;
  }
  /* Y hueco de sobra al final, para que la ultima linea del documento
     no se lea a traves del desvanecido: al llegar abajo del todo tiene
     que quedar por encima de el. Mismo emparejamiento que en el CV: si
     se toca la altura del degradado, hay que tocar esto. */
  #legal { padding-bottom: 84px; }
}