/*
 * La barra de «Invierta en oro».
 *
 * El mismo gesto que la de relojes —sólo el logo sobre el hero, la barra entera
 * al bajar— con el tema dado vuelta: allá el logo va en blanco sobre secciones
 * oscuras, acá en tinta sobre papel.
 *
 * Lo que aparece al scrollear no es decoración: son el claim y el botón. Arriba
 * de todo la página ya se está presentando sola y una barra llena compite con
 * ella; más abajo, cuando alguien está mirando piezas, tener a mano cómo
 * escribir es lo único que importa.
 */

.hd-header {
  --hd-oro: var(--landing-primary, #b59c67);
  --hd-oro-hover: #c9ad74;
  --hd-ink: var(--color-base, #212121);
  --hd-papel: #fbf9f4;
  --hd-ancho: 128rem;
  --hd-gutter: var(--section-padding-x, clamp(2rem, 3.824vw + .776rem, 6rem));

  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  transition: background-color .35s ease, box-shadow .35s ease;
}

/*
 * Armada: fondo oscuro, sombra y el desenfoque de lo que pasa por debajo.
 *
 * Los mismos valores que la barra de relojes, para que las dos landings tengan
 * la misma barra y no dos parecidas.
 *
 * En negro y no en papel: la apertura de esta página es clara, y una barra clara
 * flotando sobre un fondo claro se lee como un bloque que se despegó. El
 * contraste la separa de la página y le dice al ojo que está por encima.
 *
 * El fondo no es opaco del todo. Al 94% se sigue intuyendo que hay página
 * moviéndose atrás, que es lo que distingue una barra flotante de una franja
 * pegada arriba.
 */
.hd-header.is-stuck {
  background-color: rgb(22 19 14 / .94);
  box-shadow: 0 .4rem 2rem rgb(0 0 0 / .3);
  backdrop-filter: blur(10px);
}

.hd-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  max-inline-size: var(--hd-ancho);
  margin-inline: auto;
  padding: 1.8rem var(--hd-gutter);
}

.hd-header__logo {
  display: block;
  flex: none;
  line-height: 0;
}

.hd-header__logo img {
  width: clamp(13rem, 10vw, 18rem);
  height: auto;
}

/*
 * La barra entera espera abajo del borde y entra cuando se arma. El logo
 * incluido.
 *
 * Acá el logo también se esconde, y ahí se separa de la barra de relojes: en
 * aquella página el logo chico es lo único que identifica al sitio sobre el
 * video del hero. En ésta, la apertura ya tiene el nombre en grande justo
 * debajo, y una segunda marca en la esquina lo dice dos veces en la misma
 * pantalla.
 *
 * `visibility` además de `opacity`: un elemento sólo transparente sigue
 * recibiendo el foco del teclado, y tabular hacia algo que no se ve es peor que
 * no tenerlo. La transición la incluye para que se apague al final del
 * recorrido y no de entrada.
 */
.hd-header__logo,
.hd-header__claim,
/*
 * Los dos botones, alineados por su centro.
 *
 * Era un bloque, así que sus hijos se acomodaban como texto en línea: por la
 * base de la palabra. El de contacto tiene una y el del menú no, así que cada
 * uno resolvía su base por su cuenta y el segundo quedaba unos pixeles arriba.
 * Con flex la referencia deja de ser la letra y pasa a ser la caja.
 */
.hd-header__acciones {
  display: flex;
  align-items: center;
  gap: .8rem;
  /*
   * Se corre hacia afuera lo que el botón del menú tiene de aire adentro.
   *
   * El margen del encabezado es de 60px por lado, pero un margen se mide contra
   * lo que se ve y no contra lo que se declara: del lado izquierdo lo primero es
   * el logo, que empieza en su propio borde, y del derecho lo último es un glifo
   * de 26px centrado en un botón de 44, con nueve pixeles de aire alrededor.
   * Medido: 60 a la izquierda contra 69 a la derecha.
   *
   * Los nueve son la mitad de la diferencia entre el botón y su dibujo, no un
   * número elegido. El área de toque queda intacta: lo que se mueve es dónde se
   * apoya, no cuánto mide.
   */
  margin-inline-end: -.9rem;

  opacity: 0;
  visibility: hidden;
  translate: 0 -.8rem;
}

/*
 * Las transiciones recién cuando el script dijo que la barra está resuelta.
 *
 * Sin esto, el primer estado que el observador fija cuenta como un cambio y se
 * anima: al cargar la página se veía el logo un instante y después se
 * desvanecía, como si algo hubiera fallado. La barra tiene que *aparecer*
 * cuando alguien baja, no *desaparecer* cuando alguien llega.
 *
 * La clase la pone el JS después de medir. Si el script no corre, la barra
 * queda sin animación pero funcionando, que es la degradación correcta.
 */
.hd-header.is-listo :is(.hd-header__logo, .hd-header__claim, .hd-header__acciones) {
  transition: opacity .35s ease, translate .35s ease, visibility .35s;
}

.hd-header.is-stuck .hd-header__logo,
.hd-header.is-stuck .hd-header__claim,
.hd-header.is-stuck .hd-header__acciones {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* Sobre el fondo oscuro, y con el trazo fino que usa la barra de relojes: el
   claim acompaña, no anuncia. */
.hd-header__claim {
  margin: 0;
  font-size: clamp(1.3rem, .4vw + 1.2rem, 1.6rem);
  font-weight: 200;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .82);
}

/*
 * Cuando la fila deja de entrar, el claim se va.
 *
 * Si se queda, cae a un renglón propio y la barra pasa a ocupar dos filas: una
 * franja fija del doble de alto comiéndose la parte de arriba de cada scroll, a
 * cambio de una frase.
 *
 * Se oculta del todo y no sólo a la vista, porque lo mismo dice el encabezado
 * unas pantallas más arriba. Dejarlo para lectores de pantalla sería contarle a
 * unos algo que a otros se les esconde.
 *
 * **1023 y no 767, que era el número de antes.** Ese venía de la landing de
 * relojes, cuya barra lleva un botón menos. Con el del menú sumado, la fila pasó
 * a necesitar 987px —medido: 167 de logo, 419 de claim, 221 de acciones, 60 de
 * separación y 120 de márgenes— así que entre 768 y 986 la barra se partía en
 * dos y nada avisaba.
 *
 * En `em`, que dentro de un media query valen 16px y no los 10 de este archivo.
 */
@media (max-width: 63.9375em) {
  .hd-header__claim { display: none; }
}

/*
 * El botón. Dorado y no verde, por lo mismo que en las piezas: en esta página
 * el verde sería lo único que no es oro.
 *
 * Con la etiqueta en tinta y no en blanco. El dorado de marca con texto blanco
 * da 2,65:1 —medido, y axe lo marcó— contra los 4,5 que pide un texto de este
 * cuerpo; oscurecer el oro hasta que aguante blanco deja de ser el oro de la
 * casa. Con la etiqueta oscura son 6,07:1 y el color no se toca. Es la misma
 * salida que el proyecto ya usa para el verde de WhatsApp en `.rl-btn--wa`.
 *
 * Y el hover va hacia un oro más claro, no más oscuro: con texto en tinta,
 * aclarar el fondo sube el contraste en vez de bajarlo.
 */
.hd-btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.1rem 2.2rem;
  border-radius: 999px;
  border: 0;
  background: var(--hd-oro);
  color: var(--hd-ink);
  font-size: clamp(1.4rem, .3vw + 1.3rem, 1.6rem);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease;
}

.hd-btn:is(:hover, :focus-visible) {
  background: var(--hd-oro-hover);
  color: var(--hd-ink);
}

.hd-btn__icono {
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
}

/* En oro y no en tinta: la barra armada es oscura, y un contorno negro sobre
   negro es un foco que no está. */
.hd-header :focus-visible {
  outline: 2px solid var(--hd-oro);
  outline-offset: 3px;
  border-radius: 2px;
}

/*
 * El salto al contenido: invisible hasta que el teclado lo alcanza.
 *
 * No se oculta con `display: none` ni con `visibility`, que lo sacarían también
 * del recorrido — la idea es justamente que sea lo primero que reciba el foco.
 */
.hd-skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--hd-ink);
  color: #fff;
  text-decoration: none;
}

.hd-skip:focus {
  width: auto;
  height: auto;
  padding: 1.5rem 2rem;
  clip-path: none;
}

/*
 * La franja que dispara el cambio.
 *
 * Fuera del flujo, y esto no es un detalle: en el flujo ocupaba su alto —media
 * pantalla— y dejaba un hueco blanco enorme entre la barra y el encabezado. Es
 * una regla que se mide, no que se ve, así que no tiene por qué empujar nada.
 *
 * Se posiciona contra el bloque inicial, arriba de todo, que es donde tiene que
 * estar para preguntar «¿la primera pantalla quedó atrás?».
 */
.hd-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--hd-alto, 70vh);
  pointer-events: none;
}

/* ── Sólo para lectores de pantalla ──────────────────────────────────────── */

/*
 * Lo que se dice y no se muestra.
 *
 * Con `clip-path` y no con `display: none`: aquello lo sacaría también del árbol
 * de accesibilidad, que es justo lo contrario de lo que se busca.
 */
.hd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── El botón del menú ───────────────────────────────────────────────────── */

/*
 * Al hueso: el glifo y nada más.
 *
 * Sin recuadro ni relleno, al lado de un botón que sí los tiene. Son dos cosas
 * distintas —uno abre una conversación, el otro abre un cajón— y darles el mismo
 * peso obligaría a elegir entre dos píldoras iguales. El área de toque es la que
 * pide un dedo aunque el dibujo sea chico.
 */
.hd-menu-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--hd-oro);
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}

.hd-menu-boton:is(:hover, :focus-visible) {
  color: var(--hd-oro-hover);
  background: rgb(181 156 103 / .12);
}

.hd-menu-boton__icono {
  width: 2.6rem;
  height: 2.6rem;
}

/* ── El panel ────────────────────────────────────────────────────────────── */

/*
 * El velo que apaga la página detrás.
 *
 * `visibility` además de la opacidad: sin ella el velo sigue estando y se come
 * los clics de toda la página cuando el panel está cerrado. Y va en la
 * transición para que no desaparezca antes de terminar de desvanecerse.
 */
.hd-velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(22 19 14 / .55);
  opacity: 0;
  visibility: hidden;
}

.hd-velo.is-abierto {
  opacity: 1;
  visibility: visible;
}

/*
 * El cajón, desde el borde derecho.
 *
 * `translate` y no `right`: el navegador lo resuelve en el compositor y la
 * apertura no obliga a recalcular el layout de la página en cada cuadro.
 *
 * Cerrado va con `visibility: hidden`, y eso es lo que lo saca del recorrido con
 * teclado: sin ella los seis enlaces se siguen tabulando desde afuera de la
 * pantalla, y el foco se va a un lugar que nadie ve.
 */
.hd-panel {
  /*
   * Sus propios tokens, y no es repetir por repetir.
   *
   * El panel vive fuera del `header` —tiene que cubrir la pantalla y aquél mide
   * 78px— así que las variables declaradas allá no le llegan. Sin esto, cada
   * `var(--hd-oro)` de acá abajo cae en la nada: la cruz de cerrar se quedaba
   * sin color y el botón de contacto del pie sin su fondo dorado, los dos en
   * silencio, que es como fallan las variables que no existen.
   *
   * El fondo es el noche del sitio escrito entero y no `--hd-ink`: aquél es la
   * tinta del texto, #212121, y un panel gris no es el mismo panel.
   */
  --hd-oro: var(--landing-primary, #b59c67);
  --hd-oro-hover: #c9ad74;
  --hd-noche: #16130e;

  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 50;

  display: flex;
  flex-direction: column;
  gap: clamp(2.4rem, 2vw + 1.8rem, 4rem);
  inline-size: min(32rem, 82vw);
  /*
   * Arriba, lo que deja la cruz de cerrar a la altura del glifo que abrió el
   * panel: el dedo cierra donde abrió, sin moverse.
   *
   * Es el mismo respiro que la barra le da a sus botones, y sale de la
   * geometría: los dos arrancan en el borde de arriba de la ventana y los dos
   * botones miden lo mismo, así que el mismo padding pone los dos centros en 40.
   *
   * Anotado porque costó: medido con la barra en su estado de reposo el glifo
   * del menú parece estar ocho pixeles más arriba, y no lo está. Es el
   * `translate: -.8rem` con que las acciones entran cuando la barra todavía no
   * se armó. Compensar esos ocho acá deja la cruz desalineada justo en el
   * momento en que alguien la puede ver, que es con la barra armada.
   */
  padding: 1.8rem clamp(2.4rem, 2vw + 1.8rem, 3.6rem) clamp(2.4rem, 2vw + 1.8rem, 3.6rem);

  background: var(--hd-noche);
  box-shadow: -12px 0 40px rgb(22 19 14 / .35);
  /* El texto del panel, para que lo que no declare color no herede el de la
     página, que está pensado para papel. */
  color: rgb(255 255 255 / .88);
  overflow-y: auto;
  overscroll-behavior: contain;

  translate: 100% 0;
  visibility: hidden;
}

/*
 * Las transiciones, recién cuando el script dice que el estado inicial ya se
 * dibujó.
 *
 * Es el mismo problema que la barra resolvió con `is-listo` y por el mismo
 * motivo: cerrado es como el panel *arranca*, no un cambio. Sin esta espera, el
 * primer estado contaba como transición y al cargar la página el cajón se veía
 * un instante abierto y después deslizarse hacia afuera, como si alguien lo
 * hubiera cerrado.
 *
 * La clase la pone el script sobre el panel. Si no corre, el panel abre y cierra
 * de golpe pero funciona, que es la degradación correcta.
 */
.hd-panel.is-listo {
  transition: translate .32s cubic-bezier(.22, .61, .36, 1), visibility .32s;
}

.hd-velo.is-listo {
  transition: opacity .3s ease, visibility .3s;
}

.hd-panel.is-abierto {
  translate: 0 0;
  visibility: visible;
}

/* La cruz, al margen y arriba: el pulgar que abrió del lado derecho cierra del
   mismo lado. */
.hd-panel__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--hd-oro);
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}

.hd-panel__cerrar:is(:hover, :focus-visible) {
  color: var(--hd-oro-hover);
  background: rgb(181 156 103 / .12);
}

.hd-panel__cruz {
  width: 2.4rem;
  height: 2.4rem;
}

.hd-panel__lista {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Cada destino.
 *
 * En versalitas espaciadas, que es el rótulo que la página ya usa para el `h1` y
 * para el encabezado de cada familia. Un menú con la tipografía de la casa se lee
 * como parte de la pieza; uno con la del tema se lee como un plugin.
 *
 * El filete de abajo aparece con el cursor y no está siempre: seis subrayados
 * fijos son una tabla, y esto es una lista de lugares.
 */
.hd-panel__enlace {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-block: 1.2rem;
  border-block-end: 1px solid rgb(181 156 103 / .18);

  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(1.4rem, .4vw + 1.3rem, 1.6rem);
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(255 255 255 / .88);

  transition: color .2s ease, padding-inline-start .2s ease;
}

.hd-panel__enlace:is(:hover, :focus-visible) {
  color: var(--hd-oro);
  /* Se corre apenas, como un renglón que se adelanta al ser señalado. */
  padding-inline-start: .6rem;
}

/*
 * El glifo de cada destino.
 *
 * En oro y no en el blanco del texto: son seis dibujos en una columna y al mismo
 * color del renglón se leerían como parte de la palabra. En oro son la marca del
 * margen, y el nombre sigue siendo lo que se lee.
 *
 * `flex: none` porque un `svg` en un flex se deja aplastar cuando el texto de al
 * lado pide lugar, y «Cómo trabajamos» lo pide en el ancho de un teléfono.
 */
.hd-panel__icono {
  width: 2rem;
  height: 2rem;
  flex: none;
  color: var(--hd-oro);
  opacity: .8;
  transition: opacity .2s ease;
}

.hd-panel__enlace:is(:hover, :focus-visible) .hd-panel__icono {
  opacity: 1;
}

/*
 * El contacto vuelve a aparecer abajo del cajón.
 *
 * En el teléfono, el botón de la barra queda reducido a un glifo, así que ésta es
 * la única vez que la palabra «Contáctenos» está escrita en toda la barra. Va al
 * pie del panel y no arriba: primero el índice, que es a lo que se vino.
 */
.hd-panel__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-block-start: auto;
  padding: 1.2rem 2.2rem;
  border-radius: 999px;
  background: var(--hd-oro);
  color: var(--hd-noche);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color .25s ease;
}

.hd-panel__wa:is(:hover, :focus-visible) {
  background: var(--hd-oro-hover);
  color: var(--hd-noche);
}

.hd-panel__wa-icono {
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
}

.hd-panel :focus-visible {
  outline: 2px solid var(--hd-oro);
  outline-offset: 3px;
  border-radius: 2px;
}

/*
 * Mientras el panel está abierto, la página de atrás no se mueve.
 *
 * La clase la pone el script en el `html`. Sin esto, el dedo que arrastra sobre
 * el velo scrollea el documento y el panel queda flotando sobre un fondo que se
 * desplaza.
 */
html.hd-quieto {
  overflow: hidden;
}

/* ── El teléfono ─────────────────────────────────────────────────────────── */

/*
 * El botón de contacto pierde la píldora y queda en glifo.
 *
 * Con la palabra puesta, los dos botones y el logo no entran en 360px y la barra
 * se parte en dos filas. Reducido al dibujo entra al lado del menú, y la palabra
 * no se pierde: sigue en `.hd-sr` para quien no ve el glifo, y escrita entera al
 * pie del panel para quien sí.
 *
 * Se mantiene el área de toque en 44px aunque el dibujo mida 22: lo que un dedo
 * necesita acertar no es lo mismo que lo que el ojo tiene que ver.
 */
@media (max-width: 767px) {
  /*
   * La franja se achica.
   *
   * Con el respiro de escritorio la barra medía 80px en un teléfono: en una
   * pantalla de 800 de alto es un décimo de todo lo que se ve, fijo, para
   * siempre. El logo ya trae su propio aire y no necesita el doble.
   */
  .hd-header__inner {
    padding-block: 1rem;
  }

  .hd-btn {
    inline-size: 4.4rem;
    block-size: 4.4rem;
    padding: 0;
    justify-content: center;
    background: none;
    color: var(--hd-oro);
  }

  .hd-btn:is(:hover, :focus-visible) {
    background: rgb(181 156 103 / .12);
    color: var(--hd-oro-hover);
  }

  .hd-btn__texto {
    display: none;
  }

  /*
   * Los dos glifos, más grandes.
   *
   * Sin la palabra al lado, el dibujo es todo lo que queda del botón: a 22px se
   * leía como un ícono de estado y no como algo que se toca. A 26 se ve qué es
   * antes de tener que adivinarlo, y sigue entrando holgado en el área de 44 que
   * un dedo necesita — que no se toca, porque lo que hay que acertar y lo que
   * hay que ver son dos medidas distintas.
   */
  .hd-btn__icono {
    width: 2.6rem;
    height: 2.6rem;
  }

  .hd-menu-boton__icono {
    width: 2.8rem;
    height: 2.8rem;
  }

  /* Los dos juntos y contra el margen derecho, sin nada entre ellos. */
  .hd-header__acciones {
    gap: .4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-velo,
  .hd-panel,
  .hd-panel__enlace,
  .hd-menu-boton,
  .hd-panel__cerrar { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-header,
  .hd-header__claim,
  .hd-header__acciones,
  .hd-btn { transition: none; }
}