/* base.css - Variables, reset y tipografia */

:root {
  /* SOLO DOS COLORES DE TEXTO en toda la web (peticion de Alicia):
     --negro: gris muy oscuro, NO negro puro (aclarado un pelin mas
              en la revision de julio 2026)
     --gris:  el gris de siempre, para subtextos y parrafos */
  --negro: #4a4a4a;
  --gris: #777;
  --gris-claro: #ccc;
  /* El gris mas discreto de la web: el del aviso de derechos del pie.
     Mas oscuro que --gris-claro pero sin llegar a --gris. Alicia lo
     tomo de referencia para varias cosas mas (28-08-2026), asi que
     deja de estar suelto en .pie-derechos y pasa a la paleta. */
  --gris-suave: #aaa;
  --borde: #eaeaea;
  --fondo: #fff;
  --fondo-foto: #ececec;

  /* Tipografia de palo para todo el contenido */
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Tipografia del nombre y titulos. Lista de Alicia, en orden de prueba:
     1) Baskerville (actual, via "Libre Baskerville" de Google Fonts)
     2) 'Cormorant'   3) 'EB Garamond'
     (cambiar tambien el <link> de Google Fonts en index.html) */
  --titulo: 'Libre Baskerville', 'Baskerville', Georgia, 'Times New Roman', serif;

  --nav: 108px;
  --pad: 40px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--negro);
  background: var(--fondo);
  font-size: 14px;
  /* AQUI ESTABA "-webkit-font-smoothing: antialiased", y se quita.
     Suena a mejora y en realidad ADELGAZA el texto: apaga el
     renderizado por subpixel y deja letras mas finas y con menos
     contraste. En movil no se notaba -ahi los navegadores ya pintan
     asi- pero en el ordenador si, y es parte de lo que Alicia veia
     (30-08-2026): "la tipografia fina se lee perfecta en movil y tablet,
     pero en pantalla del PC no... en movil se ve siempre mas oscuro".
     Sin esta linea, cada sistema pinta el texto como mejor sabe. */
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--sans); }

/* SIN EL RECUADRO AZUL/GRIS DE TOCAR EN MOVIL (v5.90): algunos
   navegadores moviles (sobre todo Android/Chrome) marcan cualquier
   enlace o boton tocado con un recuadro de color mientras dura el
   toque, por debajo de cualquier estilo propio -aviso de Alicia sobre
   el menu: "que no se vea un rectangulo azul de haber clicado"-. Va
   aqui, en el reset general, para que no vuelva a aparecer en ningun
   otro enlace o boton de la web (miniaturas del mosaico, iconos de la
   barra, flechas...), no solo en el menu. El "aclarado" o "crecido"
   propios de cada elemento al tocarlo (:hover, :active, .active) no
   dependen de esto y se ven igual. */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* Placeholder cuando falta una foto */
.vacio { position: relative; background: var(--fondo-foto); }
.vacio::after {
  content: "foto";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.18);
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
}

section { display: none; }
/* Cambio de seccion con fundido: la seccion actual se funde a blanco
   (.saliendo, la pone el JS un instante antes de cambiar) y la nueva
   entra en fundido. Nada de cortes a golpes. */
section.active { display: block; animation: seccion-entrar .5s ease both; }
section.active.saliendo { animation: seccion-salir .24s ease both; }
@keyframes seccion-entrar {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes seccion-salir {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Cabecera comun de cada seccion */
.sec-header { padding: 46px var(--pad) 10px; }
.sec-eyebrow {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 6px;
}
.sec-header h2 {
  font-family: var(--titulo);
  font-weight: 400; font-size: 30px; color: var(--negro);
  letter-spacing: .01em; margin-bottom: 6px;
}
.sec-header p { color: var(--gris); font-size: 13px; max-width: 520px; line-height: 1.6; }

/* Las miniaturas de la principal son enlaces: sin decoracion */
/* Las miniaturas son enlaces, salvo las de los trabajos aun en proceso,
   que se pintan como <div> para que no se pueda entrar en ellos */
.trabajo-item { display: block; color: inherit; text-decoration: none; }

/* Pie de pagina minimo */
.pie {
  padding: 26px var(--pad) 30px;
  text-align: center;
  font-size: 10.5px; letter-spacing: .14em; text-transform: lowercase;
  /* Del mismo gris que el aviso de derechos de encima (Alicia,
     28-08-2026: "en el copyright notice, ponemos mi firma del mismo
     gris claro que ese mismo texto"). Antes iba en --gris, mas oscuro
     que el parrafo al que acompaña. */
  color: var(--gris-suave);
}
/* LA FIRMA, LA PRIMERA DEL PIE (Alicia, 30-08-2026: "primero mi firma,
   centrado; despues el copyright notice"). Antes cerraba el bloque; al
   subirla necesita su propio respiro hasta el parrafo de abajo, que
   antes se lo daba el margen del aviso. Centrada, gris y tamaño los
   hereda de .pie. */
.pie-firma { margin-bottom: 14px; }

/* Aviso de derechos (peticion de Alicia): AUN MAS pequeño y discreto
   que el "© year nombre" de debajo, y SIN heredar el text-transform en
   mayusculas/espaciado del pie (es un parrafo legal normal, no una
   etiqueta de diseño). Ancho limitado y centrado para que no se
   convierta en una linea kilometrica en pantallas anchas. */
.pie-derechos {
  max-width: 640px;
  margin: 0 auto 12px;
  /* Ha ido creciendo por peticion de Alicia: 9px -> 10px -> 10.5px ->
     11px. Con este ultimo paso ya es del tamaño del "© 2026 alicia f.
     barranco" de debajo -incluso un pelin mayor, para compensar que va
     en un gris mas claro-, que es justo lo que pidio: "que se parezca
     un poco a lo que aparece debajo". No conviene subirlo mas: sigue
     siendo un parrafo legal, no un texto de lectura.
     JUSTIFICADO en vez de centrado -texto en columna, con los dos
     bordes rectos, no cada linea centrada por su cuenta-. El ultimo
     renglon de un justify se queda pegado a la izquierda por defecto,
     que es lo normal y no hace falta forzarlo. */
  font-size: 11px; letter-spacing: normal; text-transform: none;
  line-height: 1.6;
  text-align: justify;
  /* Un poco mas oscuro que --gris-claro (#ccc), pero sin llegar al
     --gris (#777) de la firma: sigue siendo el texto mas discreto de
     la pagina (peticion de Alicia, 10-08-2026). */
  color: var(--gris-suave);
}


/* LA TIPOGRAFIA PEQUEÑA, UN PUNTO MAS DENSA EN EL ORDENADOR.
   Toda la web va en peso 300 (Light), que es lo que le da su aire. En
   los textos pequeños, en mayusculas y muy espaciados -PHOTOGRAPHY, el
   SEND, las etiquetas del formulario- ese peso aguanta bien en movil,
   donde la pantalla es densa y las letras salen compactas, pero en un
   monitor de ordenador se queda lavado: son 10-13px repartidos en mucho
   espacio, asi que hay poca tinta por letra y encima estirada.
   Alicia lo noto y ademas acerto con el diagnostico: "pense que era por
   el gris, por eso pedi cambiarlo a como esta ahora... he observado que
   en movil/tablet se ve siempre mas oscuro".
   No era el color, era el PESO. Y no hace falta negrita -que ya se
   probo en el SEND y ella misma la quito-: basta con pasar de 300 a
   400, el peso normal. En movil no se toca nada, porque alli ya se ve
   como ella quiere. */
@media (hover: hover) and (pointer: fine) {
  .marca-subtitulo,      /* PHOTOGRAPHY, bajo el nombre */
  .nav-subtitulo,        /* el mismo, dentro del menu */
  .sec-eyebrow,          /* los rotulos de seccion */
  .campo-etiqueta,       /* las etiquetas del formulario */
  .contacto-enviar,      /* SEND */
  .pie,                  /* la firma del pie */
  .pie-legal-enlace {    /* legal notice / privacy policy */
    font-weight: 400;
  }
}