@charset "UTF-8";
/* ==========================================================================
   EDERA — el armazón.

   Lo que comparten el sello y ATLAS: la paleta, la tipografía, la barra
   superior, el menú de móvil, el pie y la marca. Las dos aplicaciones cargan
   ESTE fichero primero y después el suyo.

   ATLAS no es otra web: es una sección de EDERA con su propio front
   controller. Por eso la barra y el pie son los mismos objetos, no dos copias
   que se parecen. Lo que cambia entre las dos es el idioma de las etiquetas y
   qué enlace va marcado como activo, y eso lo decide app/chrome.php.

   La paleta la escribe herramientas/paleta.py entre sus marcas: no se edita
   a mano.
   ========================================================================== */

/* --- Tipografía autoalojada ----------------------------------------------- */
/* Outfit, la tipografía de la casa: la misma en el sello y en ATLAS. Variable
   de 300 a 700 en un solo fichero de 31 KB, OFL, servida desde este dominio.

   El encargo pedía una serif de display (Cormorant o EB Garamond) para
   titulares. Se cambió a Outfit por decisión del estudio, para que sello y
   producto hablen con la misma voz. Volver a una serif es cambiar --display. */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fuentes/outfit-latin-300-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fuentes/outfit-latin-ext-300-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* La monoespaciada. La usan los códigos del catálogo y las pistas del
   buscador, que salen en las dos aplicaciones: vive aquí, no en una de ellas. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fuentes/plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fuentes/plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Fichas de la casa ---------------------------------------------------- */

/* La paleta no se edita aqui: es la misma en EDERA y en ATLAS y la escribe
   herramientas/paleta.py en las dos hojas. Tocarla a mano en un solo fichero
   es como divergen dos webs que tienen que parecerse. */
/* === PALETA EDERA (canonica: herramientas/paleta.py) ==================== */
:root {
  --gordons:   #273837;   /* tinta, texto, fondos oscuros */
  --picholine: #546b6a;   /* verde estructural, texto secundario, bordes */
  --upnorth:   #839e9d;   /* acento; nunca texto pequeno */
  --moncur:    #abc0bf;   /* tramas, texto secundario sobre oscuro */
  --echo:      #dbe8e7;   /* separadores, fondos de tarjeta */
  --hueso:     #eaf1f1;   /* fondo general, el 70% de la superficie */

  /* Derivados: siempre la tinta con transparencia, nunca un gris nuevo. */
  --tinta-rgb: 39, 56, 55;
  --papel-rgb: 234, 241, 241;

  /* El material de la interfaz: cristal sobre el papel. Lo usan la barra y el
     buscador, que son de las dos aplicaciones. */
  --vidrio:        rgba(255, 255, 255, 0.55);
  --vidrio-fuerte: rgba(255, 255, 255, 0.72);
  --vidrio-borde:  rgba(255, 255, 255, 0.6);
  --filete:        rgba(var(--tinta-rgb), 0.16);
  --filete-suave:  rgba(var(--tinta-rgb), 0.08);
  --hueco:         rgba(var(--tinta-rgb), 0.045);

  /* Los nombres con los que el buscador llama a la paleta. ATLAS los declara
     igual en su hoja; escribirlos aquí es lo que hace que el componente
     funcione también en el sello. */
  --tinta:       var(--gordons);
  --crema:       var(--hueso);
  --gris:        var(--picholine);
  --yedra:       var(--gordons);
  --yedra-media: var(--picholine);
  --yedra-clara: var(--moncur);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --aureo: 1.618;

  /* Lo que ocupa todo lo que va por encima del buscador: la barra del sitio
     MAS el relleno superior del contenido. De esto depende que el campo caiga
     en el centro exacto de la pantalla, asi que se mide, no se estima: barra
     de 57 px mas 40 de relleno en movil. ATLAS lo pisa en su hoja, porque
     alli hay ademas una barra de seccion. */
  --tope: 6rem;
}
/* === FIN PALETA ========================================================= */

:root {

  --display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto:   "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --paso:  1.25rem;
  --ancho: 72rem;

  /* Nada por encima de 200ms. */
  --tiempo: 200ms;

  /* El cristal: es el material de la barra superior, igual que en ATLAS. */
  --desenfoque: blur(16px) saturate(1.1);
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--gordons); color: var(--hueso);
  padding: 0.75rem 1.25rem;
}
.saltar:focus { left: 0; top: 0; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--paso);
}

/* --- Barra superior ------------------------------------------------------- */

.topbar {
  border-bottom: 1px solid var(--echo);
  background: var(--hueso);
}

/* Cristal, como en ATLAS: al bajar por la pagina el contenido pasa por debajo
   difuminado. Con respaldo opaco si el navegador no lo soporta.

   El filtro va en un ::before y NO en la barra. Un elemento con
   backdrop-filter se convierte en bloque contenedor de sus descendientes
   fijos, y el panel del menu de movil es position:fixed: con el filtro en la
   barra, inset:0 dejaba de medir la pantalla y pasaba a medir la barra —56 px
   de alto, con los dos primeros enlaces fuera—. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: transparent; }
  .topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(var(--papel-rgb), 0.72);
    -webkit-backdrop-filter: var(--desenfoque);
            backdrop-filter: var(--desenfoque);
  }
}

.topbar {
  /* Pegajosa: en una pagina larga de movil, tener que subir del todo para
     cambiar de seccion es el mayor coste de navegacion que hay. */
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}

.marca {
  display: inline-flex;
  /* Por arriba, no centrado: lo que tiene que cuadrar es la altura de la E con
     la del simbolo, y debajo cuelga el apellido. */
  align-items: flex-start;
  /* El hueco crece con la marca: a este cuerpo, 0,6rem fijos dejaban el
     simbolo pegado a la E. */
  gap: calc(var(--marca-alto) * 0.28);
  /* Objetivo tactil de 44 px sin engordar la marca: el area la da el enlace. */
  min-height: 44px;
}
.marca:hover { color: inherit; }
/* La marca es un rectángulo vertical (0,664 de ancho por alto). Se le da
   el ALTO y el ancho sale solo: fijar los dos la deformaría, y fijar solo el
   ancho la haría crecer hacia abajo. */
.marca__simbolo {
  height: var(--marca-alto);
  width: auto;
  flex: 0 0 auto;
  display: block;
  /* La tipografia deja un hueco por encima de la mayuscula —el sitio del
     acento— que en Outfit son 0,151 del cuerpo, medido en el navegador. El
     simbolo baja lo mismo para arrancar justo donde arranca la E, y como mide
     el alto del conjunto, termina justo en la linea base de ARTWARE. */
  margin-top: calc(var(--marca-alto) / 1.3104 * 0.140);
}

/* El logotipo se compone con la serif de display, en versalitas y con el
   tracking muy abierto. El símbolo viene en PNG del estudio; no hay SVG. */
/* El logotipo va en caja alta y baja. No lleva text-transform: lo que se
   escribe en chrome.php es lo que se ve, para poder probar otra forma sin
   pelearse con el CSS. El tracking de versalitas (0,24em) en minúsculas
   separaba las letras hasta deshacer la palabra.

   LA ALTURA DE LA E ES LA DEL SÍMBOLO. Outfit tiene una altura de mayúscula
   de 0,71 del cuerpo —medido en el navegador, no estimado—, así que para que
   la E mida lo mismo que el símbolo el cuerpo tiene que ser el alto del
   símbolo dividido entre 0,71. Se calcula con calc() a partir de la misma
   variable, para que cambiar el tamaño de la marca no descuadre el logotipo.

   Y la caja del texto no empieza donde empieza la mayúscula: por encima queda
   el hueco del acento. Ese desfase se corrige con --logo-ajuste, medido
   también en el navegador. */
:root {
  /* Altura del CONJUNTO: el simbolo mide lo mismo que las dos palabras juntas,
     de la mayuscula de "Edera" a la linea base de "ARTWARE". Todo lo demas
     sale de aqui. */
  --marca-alto: 38px;
  --logo-ajuste: 0px;
}

.marca__nombre {
  display: block;
  font-family: var(--display);
  /* El cuerpo sale de la altura del conjunto: las dos palabras juntas, con su
     interlinea corta, ocupan 1,3104 veces el cuerpo de "Edera" —medido en el
     navegador con la tipografia real—, asi que el cuerpo es el alto entre esa
     constante. Si se cambia el tamano del apellido o su margen, hay que
     volver a medirla. */
  font-size: calc(var(--marca-alto) / 1.3104);
  line-height: 1;
  transform: translateY(var(--logo-ajuste));
}

.marca__nombre-pila {
  display: block;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* El apellido: mismo ancho optico, la mitad de presencia. Fino, pequeno y con
   el tracking abierto, que es lo que sostiene una palabra a este cuerpo sin
   que parezca un descuido. */
.marca__apellido {
  display: block;
  font-size: 0.52em;
  font-weight: 300;
  /* ARTWARE mide EXACTAMENTE lo que mide Edera. No es un tracking elegido a
     ojo: a su cuerpo, la palabra sin espaciar ocupa 4,6409 veces el cuerpo y
     "Edera" ocupa 2,8116 veces el suyo (medido en el navegador, con la
     tipografia real). Igualar las dos deja el espaciado en 0,2915em. Como
     todo va en em, la igualdad se mantiene a cualquier tamano. */
  letter-spacing: 0.0996em;
  /* El tracking abre por la derecha y descentra la palabra: se compensa. */
  margin-right: -0.0996em;
  /* Y los dos bordes se cuadran por la MANCHA, no por la caja: la A fina y la
     E negra no tienen el mismo blanco lateral, y sin esto ARTWARE arrancaba
     dos pixeles antes que Edera. Medido sobre la captura, a doble resolucion. */
  text-indent: 0.0929em;
  text-transform: uppercase;
  color: var(--picholine);
  /* Interlinea corta: la caja de linea de "Edera" deja por debajo el sitio de
     los descendentes, que aqui no hace falta porque la palabra no tiene
     ninguno. El margen negativo recupera ese hueco y junta las dos palabras.
     El hueco que queda, de la linea base de Edera a la mayuscula de ARTWARE,
     es de 0,17 del cuerpo: lo justo para que respire sin separarse. */
  margin-top: -0.02em;
}
.marca--pie .marca__apellido { color: var(--moncur); }

/* --- Menú de móvil -------------------------------------------------------
   Sin JavaScript el menú es una fila desplazable: los cuatro enlaces siguen
   ahí y se llega a todos. Con JavaScript se convierte en un panel oscuro a
   pantalla completa, que es lo que pide un móvil: enlaces grandes, un objetivo
   por dedo y nada más compitiendo por la atención. */

.menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 1.1rem;
  font-size: 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-right: calc(var(--paso) * -1);
  padding-right: var(--paso);
}
.menu::-webkit-scrollbar { display: none; }

/* --- Selector de idioma ---------------------------------------------------
   Dos siglas, un filete entre ellas y el actual en tinta. Ocupa lo que ocupa
   una palabra y no se parece a nada más de la barra, que es justo lo que hace
   que se encuentre. */

.idiomas {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.idioma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  min-height: 44px;
  padding: 0 0.35rem;
  color: var(--picholine);
  transition: color var(--tiempo) ease;
}
.idioma + .idioma { border-left: 1px solid var(--echo); }
.idioma:hover { color: var(--gordons); }
.idioma--activo { color: var(--gordons); font-weight: 600; }
.menu > a {
  padding: 0.7rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

/* El botón solo existe si hay JavaScript: lo crea edera.js y marca el body. */
.menu__boton { display: none; }

body.con-menu .menu__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  /* Se sale del margen para que el icono quede alineado con el borde óptico
     del texto, no con el borde de su caja. */
  margin-right: -0.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gordons);
  cursor: pointer;
}

/* Tres barras dibujadas con bordes: nada de icono ni de librería. */
.menu__barras,
.menu__barras::before,
.menu__barras::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--tiempo) ease, opacity var(--tiempo) ease;
}
.menu__barras { position: relative; }
.menu__barras::before,
.menu__barras::after { content: ""; position: absolute; left: 0; }
.menu__barras::before { top: -7px; }
.menu__barras::after  { top: 7px; }

/* Abierto: las barras se cruzan en aspa. */
body.menu-abierto .menu__barras { background: transparent; }
body.menu-abierto .menu__barras::before { transform: translateY(7px) rotate(45deg); }
body.menu-abierto .menu__barras::after  { transform: translateY(-7px) rotate(-45deg); }
body.menu-abierto .menu__boton { color: var(--hueso); z-index: 2; }

/* El panel. Con JavaScript el menú se esconde hasta que se pide. */
body.con-menu .menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0 var(--paso);
  background: var(--gordons);
  overflow: hidden;
  /* Oculto de verdad para el teclado y los lectores mientras está cerrado. */
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--tiempo) ease, visibility 0s linear var(--tiempo);
}

body.menu-abierto .menu {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--tiempo) ease;
}

body.con-menu .menu > a {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  /* Sobre Gordons Green el texto va en Echo: Moncur no llega a AA. */
  color: var(--echo);
  padding: 0.7rem 0;
  border-bottom: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
}
body.con-menu .menu > a:hover { color: var(--moncur); }

/* En el panel de móvil el selector se separa del resto: no es una sección
   más del sitio, es un ajuste. */
body.con-menu .idiomas {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--papel-rgb), 0.2);
  font-size: 0.9rem;
}
body.con-menu .idioma { color: var(--moncur); }
body.con-menu .idioma--activo { color: var(--hueso); }
body.con-menu .idioma + .idioma { border-left-color: rgba(var(--papel-rgb), 0.2); }
body.con-menu .menu > a:focus-visible { outline-color: var(--moncur); }
/* La página actual, marcada con un filete a la izquierda en vez de subrayado:
   a este cuerpo, el subrayado pesa demasiado. */
body.con-menu .menu .menu__activo {
  color: var(--hueso);
  border-left: 2px solid var(--upnorth);
  padding-left: 0.9rem;
  margin-left: -0.9rem;
}
.menu > a:hover { border-bottom-color: var(--picholine); }
.menu__activo { border-bottom-color: var(--gordons); }
.menu__activo:hover { border-bottom-color: var(--gordons); }

/* --- Pie ------------------------------------------------------------------ */

.pie {
  background: var(--gordons);
  color: var(--echo);
  padding: 3.5rem 0 3rem;
}
/* En movil, cuatro columnas apiladas son una tira interminable; en dos
   columnas el pie cabe casi de una vez. */
.pie__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }
/* La marca y su nota ocupan el ancho entero. */
.pie__col:first-child { grid-column: 1 / -1; }
.pie__col { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.marca--pie { color: var(--echo); margin-bottom: 0.5rem; }
/* En el pie la pareja va mas pequena, pero con la misma relacion. */
.marca--pie { --marca-alto: 34px; }
.marca--pie:hover { color: var(--moncur); }
.pie__titulo {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moncur);
  margin-bottom: 0.3rem;
}
.pie__col a {
  font-size: 0.95rem;
  /* Los enlaces del pie son navegacion, no texto corrido: 44 px enteros. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.pie__col a:hover { color: var(--moncur); }
.pie__nota { font-size: 0.9rem; color: var(--echo); margin: 0; }

/* El crédito del grupo: cierra el pie, en una línea y sin peso. Es un
   crédito, no una segunda marca compitiendo con la de la casa. */
.pie__grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  border-top: 1px solid rgba(var(--papel-rgb), 0.15);
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--moncur);
}
.pie__grupo-texto { letter-spacing: 0.02em; }

.grupo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--moncur);
  /* Objetivo táctil entero, sin engordar el texto. */
  min-height: 44px;
}
.grupo:hover, .grupo:focus-visible { color: var(--echo); }
.grupo__galon { display: block; flex: 0 0 auto; }
.grupo__nombre {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
}


/* ==========================================================================
   EL BUSCADOR

   El mismo componente en la portada del sello y en ATLAS: mismas clases,
   mismo cristal, misma animación. El campo arranca centrado sobre un campo de
   niebla y, en cuanto se escribe, sube y deja sitio al catálogo de colores.

   Estaba escrito en la hoja de ATLAS. Al pedir que la portada se comportara
   igual, la salida fácil era copiarlo; copiado, las dos versiones divergen a
   la primera. Vive aquí y lo usan las dos.
   ========================================================================== */

/* ==========================================================================
   PORTADA — el buscador como centro de la pagina

   El campo arranca centrado en vertical sobre un campo de degradado y sube
   con animacion en cuanto se escribe algo.

   Sobre el degradado: el criterio del libro es que las muestras sean lo unico
   saturado de la pagina. Este lo cumple porque es crema, gris-azul y arena,
   todos desaturados y emparentados con el gris de apoyo. Da profundidad sin
   competir con el color del catalogo.
   ========================================================================== */

.escena { position: relative; }

/* La niebla se sale por los lados a proposito para llegar al borde de la
   pantalla. El recorte va en el <main>, que SI ocupa el ancho entero: puesto
   en .escena recortaba justo lo que se queria que sobresaliera, y volvia el
   marco. clip y no hidden: hidden crea un contexto de desplazamiento y rompe
   lo pegajoso de dentro. */
body { overflow-x: clip; }

.escena__campo {
  position: absolute;
  /* A sangre por los lados: el contenido va dentro de un contenedor con
     margenes, y una niebla que respetara esos margenes se lee como un MARCO
     alrededor del hero. Se sale justo lo que mide el margen. */
  /* De borde a borde de la PANTALLA. El contenido va en una caja centrada de
     72rem; una niebla del ancho de esa caja se lee como un recuadro flotando
     en medio de la pagina, que es justo lo que pasaba en escritorio. */
  top: -8rem;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: 100svh;
  max-height: 900px;
  z-index: -1;
  pointer-events: none;
  /* Tres manchas radiales sobre el crema. Nada de degradados lineales duros:
     la referencia es niebla, no un fondo de plantilla. */
  background:
    radial-gradient(58% 46% at 18% 12%, rgba(114, 158, 126, 0.30), transparent 68%),
    radial-gradient(46% 40% at 86% 22%, rgba(145, 170, 171, 0.26), transparent 70%),
    radial-gradient(70% 52% at 50% 88%, rgba(55, 86, 71, 0.16), transparent 72%);
  /* Se desvanece hacia abajo para que los resultados se lean sobre crema
     limpio y el degradado no invada la lista. */
  /* Y se difumina por los CUATRO lados, no solo por abajo: cualquier borde
     recto de la niebla vuelve a parecer un marco. */
  -webkit-mask-image: radial-gradient(115% 78% at 50% 26%, #000 45%, transparent 100%);
          mask-image: radial-gradient(115% 78% at 50% 26%, #000 45%, transparent 100%);
  transition: opacity 0.6s ease;
}

body.buscando .escena__campo { opacity: 0.42; }

/* --- El hero ---------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* El hero ocupa la pantalla menos la cabecera. Dentro, el bloque de arriba
     (titulo y subtitulo) y el de abajo (pistas) tienen el MISMO peso de
     crecimiento, asi que el campo de busqueda queda en el centro exacto de la
     pantalla, no el conjunto. Centrar el bloque entero dejaba el titulo en el
     medio y el campo por debajo.
     Se anima min-height y no un transform porque los resultados van justo
     debajo y tienen que ocupar el sitio que deja libre. */
  /* El hero arranca a --tope del borde superior. Para que su punto medio
     coincida con el de la PANTALLA y no con el del hueco que queda, tiene que
     medir el doble de lo que se le ha quitado por arriba. */
  /* Con tope, para que en una pantalla ancha y baja no quede medio metro de
     niebla vacia entre el buscador y lo que se vende. El escaparate tiene que
     asomar: esto es una tienda. */
  min-height: min(calc(100svh - 2 * var(--tope)), 30rem);
  /* Sin relleno inferior: con box-sizing de caja de borde, ese relleno se
     comia parte de la altura util y bajaba el punto medio del contenido, con
     lo que el campo quedaba siete pixeles por encima del centro. El aire de
     debajo lo pone ahora el bloque siguiente. */
  padding-bottom: 0;
  transition: min-height 0.62s cubic-bezier(0.22, 0.72, 0.24, 1);
}

.hero__arriba {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* pegado al campo, empujando desde arriba */
  align-items: center;
  min-height: 0;
  padding-bottom: 1.75rem;
}

/* Buscando: el hero se queda en lo justo para que quepa el campo, y sin aire
   ni por arriba ni por abajo. Lo que se quiere ver son los colores. */
body.buscando .hero {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
/* El aire que antes ponia el hero. */
.resultados, .explorar { margin-top: 1.5rem; }
body.buscando .explorar { margin-top: 0; }
body.buscando .resultados { margin-top: 0.75rem; }
/* Y el contenido deja de guardar su aire de cabecera: buscando, el campo va
   pegado a la barra. Se pidio asi: arriba del todo, sin huecos. */
body.buscando #app,
body.buscando #principal { padding-top: 0.6rem; }
/* Y la escena deja de reservar la pantalla entera. */
body.buscando .escena__campo { height: 60vh; }

/* Al buscar dejan de empujar: el campo sube del todo. */
body.buscando .hero__arriba,
body.buscando .hero__pistas { flex: 0 0 auto; padding-bottom: 0; }

.hero__titulo {
  font-size: clamp(2rem, 7vw, 3.4rem);
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin-bottom: 0.5rem;
  transition: font-size 0.5s cubic-bezier(0.22, 0.72, 0.24, 1),
              opacity 0.4s ease, margin 0.5s ease;
}

.hero__entrada {
  color: var(--gris);
  font-size: 1rem;
  max-width: 34ch;
  margin-bottom: 1.75rem;
  transition: opacity 0.35s ease, max-height 0.5s ease, margin 0.5s ease;
}

/* Al buscar, el titulo y el subtitulo se apartan: a partir de ahi lo que
   importa es el campo y lo que devuelve. */
/* El titulo se va del todo: mientras se busca no aporta nada y lo unico que
   hacia era dejar un hueco por encima del campo. */
body.buscando .hero__titulo {
  font-size: 0;
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}
body.buscando .hero__entrada {
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- El campo --------------------------------------------------------- */

.campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 36rem;
  /* Mas aire dentro: la pieza principal de la pagina no puede ir apretada. */
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.68) 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  -webkit-backdrop-filter: var(--desenfoque);
          backdrop-filter: var(--desenfoque);
  /* El filo de luz de arriba y el velo de abajo: es lo que hace que un
     cristal parezca cristal. Van por dentro, no como sombra difusa. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(var(--tinta-rgb), 0.06);
  transition: border-color 0.25s ease, background 0.25s ease,
              box-shadow 0.25s ease;
}

/* Al enfocar, el anillo lo dibuja la propia pieza: un contorno del navegador
   por fuera de un borde redondeado de 999px queda siempre mal. */
.campo:focus-within {
  border-color: rgba(var(--tinta-rgb), 0.22);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.86) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 3px rgba(var(--tinta-rgb), 0.08);
}
.campo input:focus-visible { outline: 0; }

.campo input {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-family: var(--mono);
  /* 16px exactos: por debajo, iOS hace zoom al enfocar el campo. */
  font-size: 16px;
  letter-spacing: 0.02em;
  padding: 0.85rem 0;
}
.campo input::placeholder {
  color: var(--upnorth);
  letter-spacing: 0.04em;
}
.campo input:focus { outline: 0; }
/* La cruz nativa de Safari y Chrome sobra: ya hay un boton de limpiar. */
.campo input::-webkit-search-cancel-button { display: none; }

/* [hidden] pone display:none, pero cualquier regla de display posterior lo
   pisa por orden de cascada. Sin esto, el boton de limpiar se ve con el campo
   vacio. Se declara antes y con !important para que gane siempre. */
.campo [hidden] { display: none !important; }

.campo__enviar,
.campo__limpiar {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.campo__enviar {
  width: 48px;
  height: 48px;
  /* Cristal verde. Es el unico elemento saturado de la interfaz, y lo es
     porque es la accion principal del sitio. Translucido de verdad: el
     degradado del fondo pasa por debajo. El filo claro de arriba y el oscuro
     de abajo son lo que le da volumen sin recurrir a una sombra, que el
     criterio del libro no admite. */
  background:
    linear-gradient(160deg,
      rgba(114, 158, 126, 0.88) 0%,
      rgba(55, 86, 71, 0.92) 100%);
  color: #F2F6F1;
  -webkit-backdrop-filter: var(--desenfoque);
          backdrop-filter: var(--desenfoque);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(16, 19, 17, 0.24);
  transition: filter 0.2s ease, transform 0.14s ease;
}
.campo__enviar:hover { filter: brightness(1.1) saturate(1.08); transform: scale(1.04); }
.campo__enviar:active { transform: scale(0.94); }
.campo__enviar:focus-visible { outline: 2px solid var(--gordons); outline-offset: 3px; }

.campo__limpiar {
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--gris);
}
.campo__limpiar:hover { background: var(--hueco); color: var(--tinta); }

/* --- Pistas de ejemplo ------------------------------------------------ */

.hero__pistas {
  /* Contrapeso de .hero__arriba: mismo peso, para que el campo quede centrado. */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 0.4rem;
  /* Separacion por padding y no por margin: el margin de un elemento flex
     queda FUERA de su caja y consume espacio libre, con lo que el reparto
     dejaba de ser simetrico y el campo subia siete pixeles. */
  margin: 0;
  padding-top: 1.1rem;
  transition: opacity 0.35s ease, margin 0.45s ease;
}

body.buscando .hero__pistas {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.pista {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.68) 0%,
      rgba(255, 255, 255, 0.52) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: var(--desenfoque);
          backdrop-filter: var(--desenfoque);
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pista:hover {
  color: var(--yedra);
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.85);
}
.pista:active { transform: scale(0.97); }


/* La rejilla del catálogo de colores: tantas columnas como quepan. Es la
   misma en la portada y en el atlas. */
.rejilla-color {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}

.ficha-color {
  position: relative;
  /* Un filo claro por dentro despega la muestra del fondo sin usar sombra,
     que el criterio del libro no admite. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Aureo apaisado. Marca de la casa: toda muestra del catalogo va en
     1:1,618, en una orientacion o en la otra, nunca cuadrada. */
  aspect-ratio: var(--muestra);
  padding: 0.7rem;
  border: 1px solid rgba(17, 17, 16, 0.08);
  overflow: hidden;
  animation: aparecer 0.45s cubic-bezier(0.22, 0.72, 0.24, 1) both;
}
.ficha-color:hover, .ficha-color:focus-visible { text-decoration: none; }

.ficha-color--claro  { color: rgba(255, 255, 255, 0.94); }
.ficha-color--oscuro { color: rgba(0, 0, 0, 0.74); }

.ficha-color__codigo {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.ficha-color__pie {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
}
.ficha-color__delta { opacity: 0.72; }

/* Cuadrado de carga: ocupa el mismo hueco que el resultado y late, para que
   la rejilla no de un salto cuando llegan los datos. */
.ficha-color--carga {
  background: rgba(17, 17, 16, 0.06);
  border-color: transparent;
  animation: latir 1.15s ease-in-out infinite,
             aparecer 0.35s cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

@keyframes latir {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}


/* --- Obras encontradas ------------------------------------------------ */

.lista-obras { display: grid; gap: 0.5rem; margin-top: 1.5rem; }

.obra-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--vidrio-borde);
  border-radius: 14px;
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
          backdrop-filter: var(--desenfoque);
  animation: aparecer 0.45s cubic-bezier(0.22, 0.72, 0.24, 1) both;
}
.obra-item:hover, .obra-item:focus-visible {
  text-decoration: none;
  border-color: rgba(16, 17, 19, 0.28);
}

.obra-item__tira { display: flex; gap: 2px; flex: 0 0 8rem; }
.obra-item__tira span {
  flex: 1 1 0;
  aspect-ratio: var(--muestra);
  min-width: 0;
}
.obra-item__texto { display: flex; flex-direction: column; min-width: 0; }
.obra-item__codigo {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--gris);
}
.obra-item__titulo { font-size: 1.05rem; }
.obra-item__meta { font-size: 0.8rem; color: var(--gris); }


/* ==========================================================================
   768px hacia arriba — el único punto de ruptura del armazón
   ========================================================================== */

/* En horizontal, el recorte de la pantalla se comería el margen lateral. */
@supports (padding: max(0px)) {
  .contenedor {
    padding-left: max(var(--paso), env(safe-area-inset-left));
    padding-right: max(var(--paso), env(safe-area-inset-right));
  }
}

@media (min-width: 768px) {
  :root { --paso: 2.5rem; }

  body.con-menu .menu__boton { display: none; }
  body.con-menu .menu {
    position: static;
    flex-direction: row;
    background: transparent;
    padding: 0;
    visibility: visible;
    opacity: 1;
    overflow: visible;
    gap: 0 1.5rem;
    font-size: 0.95rem;
  }
  body.con-menu .menu > a {
    position: relative;
    font-family: var(--texto);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--picholine);
    padding: 0.4rem 0;
    min-height: 0;
    border-bottom: 0;
  }
  body.con-menu .menu > a:hover { color: var(--gordons); }
  /* El mismo subrayado que crece de izquierda a derecha que en ATLAS. */
  body.con-menu .menu > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--upnorth);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--tiempo) cubic-bezier(0.22, 0.72, 0.24, 1);
  }
  body.con-menu .menu > a:hover::after,
  body.con-menu .menu > a:focus-visible::after,
  body.con-menu .menu .menu__activo::after { transform: scaleX(1); }
  /* Fuera del panel oscuro, el selector vuelve a sus colores y deja de
     necesitar 44 px de objetivo tactil: aqui hay raton, y esos 44 px estaban
     estirando la barra a 89 px de alto. */
  body.con-menu .idiomas {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 0.78rem;
  }
  body.con-menu .idioma { color: var(--picholine); min-height: 0; padding: 0.35rem; }
  body.con-menu .idioma:hover { color: var(--gordons); }
  body.con-menu .idioma--activo { color: var(--gordons); }
  body.con-menu .idioma + .idioma { border-left-color: var(--echo); }

  body.con-menu .menu .menu__activo {
    color: var(--gordons);
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  /* La marca lleva cinco huecos dentro y a poco tamano se empastan; en
     escritorio, donde hay sitio, se le da algo mas. */
  :root { --marca-alto: 42px; }
  .topbar__fila { min-height: 4.5rem; gap: 1.5rem; }
  /* En escritorio: barra de 73 px mas 80 de relleno. */
  :root { --tope: 9.5rem; }
  .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
  .pie__col:first-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar *, .menu, .menu * { transition: none !important; }
}