/* ==========================================================================
   MOIRE - base
   --------------------------------------------------------------------------
   Variables, reset, el contenedor que centra el contenido y algun
   componente que se repite en mas de un sitio de la pagina (el selector de
   idioma, ver mas abajo). Lo carga toda pagina, siempre antes de los CSS
   de componente.

   La tipografia NO se declara aqui: vive en fonts.css, que ya define
   --font-display y los tres pesos.
   ========================================================================== */

:root {
  /* --- Paleta, sacada del diseno ---------------------------------------- */
  --c-burdeos: #400f17;   /* texto principal, tema del navegador */
  --c-crema:   #f1efe7;   /* fondo del pie */
  --c-rosa:    #e9bab6;   /* acento: campo del mail list */
  --c-rojo:    #e42529;   /* "Rancid Red": nombre de la fragancia */
  --c-blanco:  #ffffff;
  --c-negro:   #000000;

  /* --- Retícula de /collections, medida sobre el diseño ----------------- */
  /* 1920 = 80 + 565,33x3 + 32x2 + 80. Las cuentas cuadran exactas, asi que
     son valores intencionados y no aproximaciones. */
  --margen-pagina: 80px;
  --medianil-x: 32px;
  --medianil-y: 48px;   /* OJO: distinto del horizontal, a proposito */
  --ancho-maximo: 1920px;

  /* --- Escala de espaciado ---------------------------------------------- */
  --paso-1: 8px;
  --paso-2: 16px;
  --paso-3: 20px;
  --paso-4: 30px;
  --paso-5: 40px;

  /* --- Cabecera de escritorio --------------------------------------------
     Alto de la fila donde viven "MENU" y el selector de idioma (222:1467).
     Una sola variable para que las dos cajas se centren en la misma linea
     por construccion: si solo una de las dos leyera un numero fijo (o si
     cada una tuviera el suyo, aunque hoy coincidieran), cambiar el tamaño
     de letra de una la desalinearia de la otra sin que nada avisara. Ver
     el uso en nav.css. */
  --nav-fila: 26px;
}

/* --- Reset acotado -------------------------------------------------------
   Ni normalize ni reset completo: solo lo que estorba de verdad. */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, figure, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, picture, video {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

html {
  /* Que los anclas no queden pegados al borde superior. */
  scroll-behavior: smooth;

  /* EL HUECO DE LA BARRA DE DESPLAZAMIENTO SE RESERVA SIEMPRE, la haya o no.

     Sin esto, al abrir el menu el logo daba un salto a la derecha. El menu
     bloquea el desplazamiento con overflow:hidden en el body (ver nav.css),
     la barra desaparece y la ventana se ensancha esos 15px que ocupaba; como
     el logo va centrado en escritorio, se movia la mitad. Medido: 7px.

     SE ARREGLA AQUI Y NO EN nav.css a proposito. El salto no es del menu: lo
     daria cualquier cosa que bloquee el desplazamiento -un aviso de cookies,
     una galeria a pantalla completa- y arreglarlo dentro del menu seria
     arreglar un sintoma. Reservado el hueco, esa clase de salto no puede
     volver a ocurrir en ninguna pagina.

     LO QUE CUESTA, para que se sepa: en pantallas sin barra flotante
     -Windows y Linux, no macOS ni los moviles- una pagina que no llegue a
     desplazarse enseñara 15px de margen vacio a la derecha. En este sitio
     solo podria pasar en /links, que es una pagina pensada para el movil,
     donde la barra ya es flotante y esto no reserva nada. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-display);
  font-weight: var(--peso-regular);
  color: var(--c-burdeos);
  background: var(--c-blanco);
  -webkit-font-smoothing: antialiased;

  /* --- Pie siempre abajo -------------------------------------------------
     header.nav, main y footer.pie son los tres hijos directos de body, en
     flujo normal (ver inc/head.php, collections.php e inc/footer.php): con
     eso ya sobra para un pie que se queda abajo con poco contenido y se va
     detras con mucho, sin trucos de position:absolute/sticky. body pasa a
     columna con una altura minima de pantalla, y main (mas abajo, selector
     de etiqueta simple porque solo hay un <main> por pagina) se estira con
     flex:1 para ocupar lo que sobre; header y footer se quedan con su alto
     de contenido, que es lo que display:flex hace por defecto.

     DOS veces la altura, a proposito: 100vh primero como respaldo, 100dvh
     despues para quien la entienda. En movil, 100vh se calcula como si la
     barra de direcciones estuviera siempre oculta, asi que la pagina queda
     mas alta que la pantalla visible y aparece un scroll de unos pixeles
     que no lleva a ningun sitio. 100dvh (alto de viewport "dinamico") se
     ajusta al alto que de verdad se ve en cada momento. La linea de
     100dvh va DESPUES: un navegador que no conoce esa unidad descarta la
     declaracion entera y se queda con la de 100vh; uno que si la conoce
     aplica esta ultima, que es lo que se busca.

     El Coming Soon (index.html) no carga base.css -tiene su propio
     body a pantalla completa en coming-soon.css- asi que esto no lo toca. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;    /* respaldo para navegadores sin 100dvh */
  min-height: 100dvh;   /* alto de pantalla realmente visible */
}

main {
  flex: 1 0 auto;   /* se estira para empujar el pie hacia abajo cuando sobra alto */
}

/* --- Contenedor ----------------------------------------------------------
   El margen lateral se estrecha en pantallas pequenas: 80px de margen en un
   movil de 375 dejaria 215 de contenido. */

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.2vw, var(--margen-pagina));
}

/* --- Accesibilidad -------------------------------------------------------
   Texto solo para lectores de pantalla. No usar display:none, que lo
   esconde tambien de ellos. */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Selector de idioma (componente compartido) --------------------------
   MAQUETACION PROPIA: no esta en ningun frame de Figma (ver los comentarios
   de inc/nav.php e inc/footer.php).

   Este componente sale DOS VECES en la pagina: en la cabecera
   (.nav__idiomas/.nav__idioma, ver nav.css) y en el pie
   (.pie__idiomas/.pie__idioma, ver footer.css). Su aspecto -flex, hueco,
   tipografia, color, que idioma se atenua y el separador "/"- es identico
   en los dos sitios, asi que vive aqui UNA sola vez en vez de en cada hoja
   de su componente.

   POR QUE AQUI Y NO EN nav.css O footer.css: nav.css y footer.css son dos
   consumidores hermanos del mismo selector de idioma, y ninguno de los dos
   deberia ser el dueño del otro (poner el aspecto compartido en uno de
   ellos obligaria al otro a depender de que esa hoja se cargue tambien, una
   dependencia que ninguna estructura del proyecto garantiza: $css es una
   lista que cada pagina escribe a mano). base.css, en cambio, es la unica
   hoja que head.php enlaza siempre, sin que ninguna pagina tenga que
   pedirla: es el sitio donde algo compartido no puede faltar por olvido.

   Cada hoja de componente se queda solo con lo que le es propio y no puede
   compartirse: DONDE se coloca ese selector dentro de su cabecera o de su
   pie (position/top/right), que no puede ser lo mismo porque son cajas de
   formas y anchos distintos. */

.nav__idiomas,
.pie__idiomas {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;   /* antes 12px: mas pequeño que sus vecinos (16px en
                        los dos sitios donde aparece: "MENU" en la
                        cabecera, los enlaces del pie) sin ningun motivo
                        de diseno para serlo */
  font-weight: var(--peso-medium);
  color: var(--c-burdeos);
  /* SIN letter-spacing: a 12px llevaba 0.05em (0.6px) para separar dos
     palabras cortas en mayusculas; a 16px, comparado a ojo con y sin
     tracking, ya no se aprecia diferencia -la "/" separadora hace ese
     trabajo de sobra- y es una propiedad menos que mantener en un
     componente que no viene del diseno. */
}

.nav__idioma[aria-current],
.pie__idioma[aria-current] {
  opacity: 1;
}

.nav__idioma:not([aria-current]),
.pie__idioma:not([aria-current]) {
  opacity: 0.55;   /* el idioma que NO es el actual, mas apagado */
}

/* Separador "/" entre EN y ES. Es puramente decorativo (una barra, no una
   palabra), asi que va por CSS y no compite con el texto real que sale de
   t() y de idioma()/otro_idioma(). */
.nav__idioma + .nav__idioma::before,
.pie__idioma + .pie__idioma::before {
  content: "/";
  margin-right: 4px;
  opacity: 0.55;
}

/* --- Respeto por quien pide menos movimiento --------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}