/* ==========================================================================
   GrupoMTM — Base compartida (tokens, fuentes, azulejo)
   Se carga en todas las páginas. Rutas relativas a assets/styles/css/.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap");

@font-face {
  font-family: "Aston Script";
  src: url("../../fonts/Aston%20Script.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "NewYork";
  src: url("../../fonts/NewYork%20PERSONAL%20USE.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Perfect Romantic";
  src: url("../../fonts/PerfectRomantic-Regular.otf") format("opentype"),
       url("../../fonts/PerfectRomantic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Billa Mount";
  src: url("../../fonts/BillaMount-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Motague";
  src: url("../../fonts/Motague%20DEMO%20VERSION.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Motague";
  src: url("../../fonts/Motague%20Italic%20DEMO%20VERSION.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Color */
  --mtm-red: #b01424;
  --mtm-red-deep: #780a18;
  --mtm-cream: #f4f1ec;
  --mtm-paper: #f3f1ea;
  --mtm-ink: #111111;
  --mtm-white: #ffffff;

  /* Tipografía */
  --mtm-font-body: "Jost", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --mtm-font-script: "Aston Script", "Perfect Romantic", cursive;
  --mtm-font-serif: "NewYork", Georgia, "Times New Roman", serif;

  /* Azulejo rojo */
  --mtm-azulejo: url("../../images/azulejo/azulejo-rojo.webp");
  --mtm-azulejo-size: clamp(160px, 18vw, 280px);

  --mtm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fondo de azulejo reutilizable: agregar la clase a cualquier contenedor
   con position (relative/absolute). El patrón queda detrás del contenido. */
.mtm-azulejo {
  position: relative;
  isolation: isolate;
}

.mtm-azulejo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--mtm-azulejo);
  background-size: var(--mtm-azulejo-size);
  background-repeat: repeat;
  opacity: var(--mtm-azulejo-opacity, 0.08);
  pointer-events: none;
}