/*
 * La landing de «Invierta en oro»: lo que sostiene a las piezas.
 *
 * Poco y deliberado. El encabezado, la barra y las tarjetas traen su propio
 * CSS, y de «Cómo trabajamos» hacia abajo la página usa `relojes.css` con sus
 * clases `rl-`. Esto es sólo el andamio de lo que queda en el medio —el aire
 * entre secciones y la caja de lectura de las familias— para que cada bloque no
 * tenga que saber qué hay antes ni después de él.
 */

.iv-main {
  --iv-ancho: 128rem;
  --iv-gutter: var(--section-padding-x, clamp(2rem, 3.824vw + .776rem, 6rem));
  --iv-aire: clamp(5rem, 5vw + 3rem, 9rem);
  --iv-ink: var(--color-base, #212121);
  --iv-oro: var(--landing-primary, #b59c67);
  /*
   * El oro para leer, que no es el de marca.
   *
   * El #b59c67 da 2,65:1 sobre el blanco: alcanza para un filete o un ícono,
   * no para una palabra. Éste da 4,80 y despeja incluso el 4,5 que pide un
   * texto de cuerpo normal, que es el margen que hace falta acá porque el
   * título va en peso fino: un trazo delgado se lee más claro de lo que el
   * número dice.
   */
  --iv-oro-texto: #8a6f1c;

  display: block;
  /*
   * Sin espacio reservado arriba, y es a propósito.
   *
   * La barra es fija y arranca invisible: reservarle lugar dejaba una franja
   * blanca del alto de un encabezado que todavía no está. Cuando se arma, flota
   * sobre el contenido —para eso es fija— y para entonces la apertura ya quedó
   * atrás, así que no tapa nada que se esté leyendo.
   */
  padding-top: 0;
}

.iv-familia {
  padding-block: var(--iv-aire);
}

.iv-familia__caja {
  max-inline-size: var(--iv-ancho);
  margin-inline: auto;
  padding-inline: var(--iv-gutter);
}

/*
 * El encabezado de cada familia: el sello y el título.
 *
 * La misma medalla que la cinta del hero. Arriba acredita el rubro y acá cada
 * familia, así quien bajó y ya perdió de vista la cinta no se queda sin la
 * garantía justo cuando está mirando precios.
 *
 * Alineado a la izquierda y no centrado: encabeza una lista, y una lista se lee
 * desde el margen.
 */
.iv-familia__sello {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 1vw + .8rem, 1.8rem);
  margin-block-end: clamp(2.4rem, 2vw + 1.6rem, 4rem);
}

.iv-familia__medalla {
  /* Del alto de dos renglones del rótulo: más grande le ganaba al texto que
     acredita, que es al revés de lo que un sello tiene que hacer. */
  inline-size: clamp(2.6rem, .9vw + 2.3rem, 3.4rem);
  block-size: auto;
  flex: none;
  color: var(--iv-oro-texto);
}

/*
 * El título, en el mismo rótulo que el `h1` de la apertura.
 *
 * Estaba en Playfair 700 a 42px y en tinta, y ese bold es un titular de diario:
 * pesaba más que las piezas que encabeza. Ahora es la misma pieza tipográfica
 * que el rótulo del hero —Montserrat, versalitas, holgura abierta, oro— porque
 * las dos hacen el mismo trabajo: nombrar lo que sigue sin taparlo.
 *
 * **Peso 400 y no 300, y no es conformismo.** El sitio carga cuatro faces de
 * Montserrat —100, 400, 700 y 900—, así que pedir 200 o 300 sirve el Thin, que
 * a este cuerpo se rompe. Comprobado midiendo el ancho de la misma palabra en
 * los nueve pesos: 100, 200 y 300 dan 513,6px y 400 y 500 dan 516,4. El 400 es
 * además lo que el rótulo del hero dibuja de verdad.
 *
 * Del mismo tamaño que aquél, a propósito. Lo que los distingue no es el cuerpo
 * sino el lugar: el `h1` va solo y centrado bajo la marca; éste va al margen con
 * la medalla al lado y una grilla debajo. Dos rótulos del mismo sistema.
 */
.iv-familia__titulo {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(1.5rem, .7vw + 1.33rem, 2.2rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--iv-oro-texto);
  text-wrap: balance;
}

/* ── El contacto que flota ───────────────────────────────────────────────── */

/*
 * Sólo para lectores de pantalla. En el teléfono el botón pierde la palabra y se
 * queda con el glifo, y un enlace cuyo contenido visible es un dibujo no tiene
 * nombre para quien no lo ve.
 */
.iv-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 de contacto, fijo abajo a la derecha.
 *
 * La barra lleva el suyo, pero se va en el primer scroll y no vuelve hasta que
 * la apertura queda atrás. Entre medio están las dos grillas de piezas, que es
 * exactamente donde alguien decide preguntar un precio.
 *
 * **De contorno y no macizo.** Un botón verde relleno flotando sobre una página
 * de oro es el widget de otro sitio pegado encima; el contorno dorado sobre el
 * noche de la casa pertenece a ésta. El fondo es opaco igual —no transparente—
 * porque abajo pasan un papel crema, una sección negra, la foto de la vidriera y
 * un mapa: un contorno sin fondo se pierde en dos de los cuatro.
 *
 * Va en 30: por encima de la página y por debajo del panel de secciones, que
 * está en 50 y tiene que taparlo cuando se abre.
 */
.iv-flota {
  position: fixed;
  inset-block-end: clamp(1.6rem, 1.5vw + 1.2rem, 2.8rem);
  inset-inline-end: clamp(1.6rem, 1.5vw + 1.2rem, 2.8rem);
  z-index: 30;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
   * Redondo y con el glifo solo, en cualquier pantalla.
   *
   * Llegó a llevar la palabra en escritorio. La casa lo prefiere mudo: apoyado
   * sobre la esquina, un botón con texto es una barra corta flotando sobre el
   * contenido, y lo que tapa es el precio de la pieza que se está mirando. El
   * glifo de WhatsApp no necesita que le expliquen qué hace.
   *
   * La palabra no se pierde: sigue en `.iv-sr` para quien no ve el dibujo.
   */
  inline-size: 5.6rem;
  block-size: 5.6rem;
  padding: 0;

  border: 1px solid rgb(181 156 103 / .55);
  border-radius: 999px;
  background: rgb(22 19 14 / .92);
  /* Detrás del botón la página se difumina, así el contorno se despega sin
     necesidad de una sombra dura. Donde no esté soportado, el fondo opaco de
     arriba ya alcanza. */
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgb(22 19 14 / .28);

  /* 10,9:1 contra el fondo del botón. El oro de marca daba 4,4, que alcanza para
     un texto de este cuerpo pero no deja margen cuando el botón se achica. */
  color: #dcc48f;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  transition: background-color .25s ease, border-color .25s ease, translate .25s ease;
}

.iv-flota:is(:hover, :focus-visible) {
  background: rgb(22 19 14 / .98);
  border-color: rgb(181 156 103 / .9);
  color: #dcc48f;
  /* Se levanta apenas, que es lo que un botón que flota puede hacer. */
  translate: 0 -2px;
}

.iv-flota:focus-visible {
  outline: 2px solid #dcc48f;
  outline-offset: 3px;
}

/* La palabra sale de la pantalla y se queda en `.iv-sr`, que es donde sigue
   nombrando al enlace para quien no ve el glifo. */
.iv-flota__texto {
  display: none;
}

.iv-flota__icono {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
}

/* En el teléfono, un toque más chico: la esquina es más chica también. */
@media (max-width: 47.9375em) {
  .iv-flota {
    inline-size: 5.2rem;
    block-size: 5.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iv-flota { transition: none; }
  .iv-flota:is(:hover, :focus-visible) { translate: none; }
}

/*
 * Dónde para la página cuando salta a un ancla.
 *
 * `relojes.css` declara `scroll-padding-top: 10rem` y esa hoja se encola acá
 * también, así que hasta ahora regía. Son cien pixeles pensados para la barra de
 * aquella landing; la de ésta mide 80 armada y 64 en el teléfono, así que cada
 * salto desde el menú dejaba veinte pixeles de aire entre la barra y el borde de
 * la sección —medido— antes de que empezara el respiro propio de la sección, que
 * son otros sesenta. La suma se leía como un salto mal calculado.
 *
 * El número es el alto de la barra y nada más. El aire que sigue lo pone cada
 * sección, que es de quien tiene que ser: si mañana una respira distinto, esto
 * no se entera.
 */
html {
  scroll-padding-top: 8rem;
}

@media (max-width: 47.9375em) {
  html {
    scroll-padding-top: 6.4rem;
  }
}