@font-face {
  font-family: "Imperial Script";
  src: url("/fonts/imperialscript-regular-webfont.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

/*
  POSICIONES:
  X positivo = derecha
  X negativo = izquierda
  Y positivo = abajo
  Y negativo = arriba
*/

/* =========================================================
   CONTROLES DEL TÍTULO — RELOJES
   ========================================================= */

body.page-watches-list {
  /* Título principal */
  --title-main-size: clamp(2rem, 5.2vw, 4.9rem);       /* Tamaño */
  --title-main-position-x: 0px;                        /* Izquierda / derecha */
  --title-main-position-y: 0px;                        /* Arriba / abajo */
  --title-main-letter-spacing: 1em;                /* Espacio entre letras */

  /* Imperial Script */
  --title-script-size: clamp(8.15rem, 25.4vw, 30.6rem); /* Tamaño */
  --title-script-position-x: -120px;                     /* Izquierda / derecha */
  --title-script-position-y: -20px;                     /* Arriba / abajo */
  --title-script-letter-spacing: 0em;                   /* Espacio entre letras */
  --title-script-opacity: 0.07;                         /* Opacidad */
}

/* =========================================================
   CONTROLES DEL TÍTULO — MARCAS
   ========================================================= */

body.page-brands-list {
  /* Título principal */
  --title-main-size: clamp(2rem, 5.2vw, 4.9rem);       /* Tamaño */
  --title-main-position-x: 0px;                        /* Izquierda / derecha */
  --title-main-position-y: 0px;                        /* Arriba / abajo */
  --title-main-letter-spacing: 1em;                /* Espacio entre letras */

  /* Imperial Script */
  --title-script-size: clamp(8.15rem, 25.4vw, 30.6rem); /* Tamaño */
  --title-script-position-x: -120px;                     /* Izquierda / derecha */
  --title-script-position-y: -20px;                     /* Arriba / abajo */
  --title-script-letter-spacing: 0em;                   /* Espacio entre letras */
  --title-script-opacity: 0.1;                         /* Opacidad */
}

/* =========================================================
   CONTROLES DEL TÍTULO — SOBRE NOSOTROS
   ========================================================= */

body.page-about {
  /* Título principal */
  --title-main-size: clamp(2.5rem, 5.6vw, 6.6rem);     /* Tamaño */
  --title-main-position-x: 0px;                        /* Izquierda / derecha */
  --title-main-position-y: 0px;                        /* Arriba / abajo */
  --title-main-letter-spacing: 0.5em;               /* Espacio entre letras */

  /* Imperial Script */
  --title-script-size: clamp(7.4rem, 20.6vw, 30.5rem);   /* Tamaño */
  --title-script-position-x: 50px;                     /* Izquierda / derecha */
  --title-script-position-y: -10px;                    /* Arriba / abajo */
  --title-script-letter-spacing: 0em;                  /* Espacio entre letras */
  --title-script-opacity: 0.05;                        /* Opacidad */
}

/* =========================================================
   COMPONENTE BASE — NO EDITAR PARA AJUSTAR CADA PÁGINA
   ========================================================= */

.page-title-composition {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
}

:is(body.page-watches-list, body.page-brands-list, body.page-about)
  .page-title-composition
  :is(.catalog-title, h1) {
  position: relative;
  z-index: 1;
  font-size: var(--title-main-size);
  letter-spacing: var(--title-main-letter-spacing);
  line-height: 0.98;
  transform: translate(
    var(--title-main-position-x),
    var(--title-main-position-y)
  );
}

body.page-about .page-title-composition h1 {
  line-height: 0.94;
}

.page-title-script {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  display: block;
  width: max-content;
  max-width: min(92vw, 72rem);
  margin: 0;
  color: var(--watches-catalog-muted, currentColor);
  font-family: "Imperial Script", cursive;
  font-size: var(--title-script-size);
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--title-script-letter-spacing);
  line-height: 1;
  opacity: var(--title-script-opacity);
  pointer-events: none;
  text-align: center;
  text-transform: none;
  transform:
    translate(-50%, -50%)
    translate(
      var(--title-script-position-x),
      var(--title-script-position-y)
    );
  user-select: none;
  white-space: nowrap;
}

.page-title-composition--about {
  width: min(100%, 930px);
}

.page-title-script--about {
  color: var(--watches-catalog-muted, currentColor);
  max-width: min(90vw, 68rem);
}

/* =========================================================
   CONTROLES RESPONSIVE
   ========================================================= */

@media (max-width: 899px) {
  /* SOBRE NOSOTROS — TABLET */
  body.page-about {
    /* Título principal */
    --title-main-size: clamp(2.15rem, 8vw, 4.8rem);    /* Tamaño */
    --title-main-position-x: 0px;                      /* Izquierda / derecha */
    --title-main-position-y: 0px;                      /* Arriba / abajo */
    --title-main-letter-spacing: -0.052em;             /* Espacio entre letras */

    /* Imperial Script */
    --title-script-size: clamp(4.4rem, 7.6vw, 7.5rem); /* Tamaño */
    --title-script-position-x: 50px;                   /* Izquierda / derecha */
    --title-script-position-y: -10px;                  /* Arriba / abajo */
    --title-script-letter-spacing: 0em;                /* Espacio entre letras */
    --title-script-opacity: 0.38;                      /* Opacidad */
  }

  body.page-about .page-title-composition h1 {
    line-height: 0.98;
  }
}

@media (max-width: 620px) {
  /* RELOJES — MÓVIL */
  body.page-watches-list {
    /* Título principal */
    --title-main-size: clamp(2rem, 5.2vw, 4.9rem);     /* Tamaño */
    --title-main-position-x: 0px;                      /* Izquierda / derecha */
    --title-main-position-y: 0px;                      /* Arriba / abajo */
    --title-main-letter-spacing: -0.52em;              /* Espacio entre letras */

    /* Imperial Script */
    --title-script-size: clamp(3.4rem, 17vw, 5.1rem);  /* Tamaño */
    --title-script-position-x: 34px;                   /* Izquierda / derecha */
    --title-script-position-y: -7px;                   /* Arriba / abajo */
    --title-script-letter-spacing: 0em;                /* Espacio entre letras */
    --title-script-opacity: 0.38;                      /* Opacidad */
  }

  /* MARCAS — MÓVIL */
  body.page-brands-list {
    /* Título principal */
    --title-main-size: clamp(2rem, 5.2vw, 4.9rem);     /* Tamaño */
    --title-main-position-x: 0px;                      /* Izquierda / derecha */
    --title-main-position-y: 0px;                      /* Arriba / abajo */
    --title-main-letter-spacing: -0.52em;              /* Espacio entre letras */

    /* Imperial Script */
    --title-script-size: clamp(3.4rem, 17vw, 5.1rem);  /* Tamaño */
    --title-script-position-x: 34px;                   /* Izquierda / derecha */
    --title-script-position-y: -7px;                   /* Arriba / abajo */
    --title-script-letter-spacing: 0em;                /* Espacio entre letras */
    --title-script-opacity: 0.38;                      /* Opacidad */
  }

  /* SOBRE NOSOTROS — MÓVIL */
  body.page-about {
    /* Título principal */
    --title-main-size: clamp(1.55rem, min(10.5vw, 5.2vh), 3.35rem); /* Tamaño */
    --title-main-position-x: 0px;                      /* Izquierda / derecha */
    --title-main-position-y: 0px;                      /* Arriba / abajo */
    --title-main-letter-spacing: -0.052em;             /* Espacio entre letras */

    /* Imperial Script */
    --title-script-size: clamp(2.55rem, 11.2vw, 4rem); /* Tamaño */
    --title-script-position-x: 26px;                   /* Izquierda / derecha */
    --title-script-position-y: -5px;                   /* Arriba / abajo */
    --title-script-letter-spacing: 0em;                /* Espacio entre letras */
    --title-script-opacity: 0.38;                      /* Opacidad */
  }

  body.page-about .page-title-script--about {
    max-width: 92vw;
  }
}

@media (max-height: 680px) and (min-width: 621px) {
  /* SOBRE NOSOTROS — PANTALLA BAJA */
  body.page-about {
    --title-main-size: clamp(2.2rem, 5vw, 4.5rem);     /* Tamaño */
  }
}