/* ==========================================================================
   MI TEMA — Typography
   @font-face + estilos base tipográficos
   ========================================================================== */

/* --------------------------------------------------------------------------
   @FONT-FACE — Bebas Neue (solo regular, es display)
   Archivo esperado: /assets/fonts/bebas-neue-regular.woff2
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/bebas-neue-v16-latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   @FONT-FACE — Montserrat VARIABLE (14-10-2026)

   Un solo archivo para los pesos 400-700 en lugar de uno por peso: antes cada
   página bajaba 4-5 archivos estáticos de ~42 KB (latin + latin-ext juntos) y
   los de 500 y 700 se descubrían tarde, desde el CSS (auditoría del 14-10,
   rendimiento 10). Es la misma versión (v31) de Google Fonts, partida por
   unicode-range: el latín (~38 KB) basta para catalán, castellano e inglés,
   y el latin-ext solo se baja si una página usa un carácter suyo (la «ŀ»).

   Comparado con capturas de página entera (portada, fichas, carrito y checkout,
   móvil y PC): mismos altos y mismos saltos de línea; solo cambia el
   suavizado de algún píxel de los bordes de las letras.

   Los .woff2 estáticos de antes (montserrat-v31-latin_latin-ext-*) se quedan una
   versión más por si alguna página cacheada aún pide la hoja vieja; se pueden
   borrar en la siguiente.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-variable-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-variable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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: 'Montserrat';
  src: url('../fonts/montserrat-v31-variable-italic-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-variable-italic-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  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;
}

/* --------------------------------------------------------------------------
   ENCABEZADOS
   -------------------------------------------------------------------------- */

h1 {
  font-size: var(--mt-font-size-5xl);     /* 64px */
  letter-spacing: var(--mt-letter-spacing-wide);
}

h2 {
  font-size: var(--mt-font-size-4xl);     /* 48px */
  letter-spacing: var(--mt-letter-spacing-wide);
}

h3 {
  font-size: var(--mt-font-size-3xl);     /* 40px */
  letter-spacing: var(--mt-letter-spacing-normal);
}

h4 {
  font-size: var(--mt-font-size-2xl);     /* 32px */
  letter-spacing: var(--mt-letter-spacing-normal);
}

h5 {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-lg);      /* 20px */
  font-weight: var(--mt-font-weight-semibold);
  line-height: var(--mt-line-height-snug);
}

h6 {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-md);      /* 18px */
  font-weight: var(--mt-font-weight-semibold);
  line-height: var(--mt-line-height-snug);
}

/* --------------------------------------------------------------------------
   CUERPO DE TEXTO
   -------------------------------------------------------------------------- */

p {
  font-size: var(--mt-font-size-base);
  line-height: var(--mt-line-height-relaxed);
  color: var(--mt-color-text-body);
}

p + p:not(.form-row):not(.woocommerce-form-row) {
  margin-top: var(--mt-space-4);
}

/* --------------------------------------------------------------------------
   ÉNFASIS Y UTILIDADES INLINE
   -------------------------------------------------------------------------- */

strong, b {
  font-weight: var(--mt-font-weight-bold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--mt-font-size-sm);
  line-height: var(--mt-line-height-normal);
}

mark {
  background-color: var(--mt-color-primary-light);
  color: var(--mt-color-primary-dark);
  padding: 0.1em 0.25em;
  border-radius: var(--mt-radius-sm);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* --------------------------------------------------------------------------
   LISTAS CON ESTILO (dentro de contenido editorial)
   -------------------------------------------------------------------------- */

.mt-content ul,
.mt-content ol {
  padding-left: var(--mt-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-2);
}

.mt-content ul {
  list-style: disc;
}

.mt-content ol {
  list-style: decimal;
}

.mt-content li {
  font-size: var(--mt-font-size-base);
  line-height: var(--mt-line-height-relaxed);
  color: var(--mt-color-text-body);
}

/* --------------------------------------------------------------------------
   BLOCKQUOTE
   -------------------------------------------------------------------------- */

blockquote {
  border-left: 4px solid var(--mt-color-primary);
  padding: var(--mt-space-4) var(--mt-space-6);
  background-color: var(--mt-color-primary-light);
  border-radius: 0 var(--mt-radius-md) var(--mt-radius-md) 0;
}

blockquote p {
  font-size: var(--mt-font-size-md);
  font-style: italic;
  color: var(--mt-color-text-heading);
}

blockquote cite {
  display: block;
  margin-top: var(--mt-space-3);
  font-size: var(--mt-font-size-sm);
  font-style: normal;
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-primary-dark);
}

blockquote cite::before {
  content: '— ';
}

/* --------------------------------------------------------------------------
   CÓDIGO
   -------------------------------------------------------------------------- */

code {
  background-color: var(--mt-color-bg-light);
  border: var(--mt-border);
  border-radius: var(--mt-radius-sm);
  padding: 0.15em 0.4em;
  font-size: 0.875em;
  color: var(--mt-color-primary-dark);
}

pre {
  background-color: var(--mt-color-text-heading);
  color: var(--mt-color-bg-light);
  border-radius: var(--mt-radius-md);
  padding: var(--mt-space-6);
  overflow-x: auto;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: var(--mt-font-size-sm);
}

/* --------------------------------------------------------------------------
   ENLACES EN CONTENIDO EDITORIAL
   -------------------------------------------------------------------------- */

/* primary-dark y no primary: el turquesa de marca sobre blanco se queda en 2,49:1
   y AA pide 4,5:1 para texto (D-014). */
.mt-content a {
  color: var(--mt-color-primary-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: var(--mt-transition-colors);
}

.mt-content a:hover {
  color: var(--mt-color-primary-darker);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   CLASES UTILITARIAS DE TIPOGRAFÍA
   -------------------------------------------------------------------------- */

.mt-text-xs       { font-size: var(--mt-font-size-xs); }
.mt-text-sm       { font-size: var(--mt-font-size-sm); }
.mt-text-base     { font-size: var(--mt-font-size-base); }
.mt-text-md       { font-size: var(--mt-font-size-md); }
.mt-text-lg       { font-size: var(--mt-font-size-lg); }
.mt-text-xl       { font-size: var(--mt-font-size-xl); }
.mt-text-2xl      { font-size: var(--mt-font-size-2xl); }

.mt-font-heading  { font-family: var(--mt-font-heading); }
.mt-font-body     { font-family: var(--mt-font-body); }

.mt-font-regular  { font-weight: var(--mt-font-weight-regular); }
.mt-font-medium   { font-weight: var(--mt-font-weight-medium); }
.mt-font-semibold { font-weight: var(--mt-font-weight-semibold); }
.mt-font-bold     { font-weight: var(--mt-font-weight-bold); }

.mt-text-left     { text-align: left; }
.mt-text-center   { text-align: center; }
.mt-text-right    { text-align: right; }

/* Sobre fondo claro: primary-dark. La utilidad .mt-text-primary con el turquesa de
   marca daba 2,49:1 sobre blanco. Sobre fondo oscuro hay que usar
   .mt-text-primary-on-dark, que sí puede llevar el turquesa (8,45:1). */
.mt-text-primary         { color: var(--mt-color-primary-dark); }
.mt-text-primary-on-dark { color: var(--mt-color-primary); }
.mt-text-secondary { color: var(--mt-color-text-secondary); }
.mt-text-heading   { color: var(--mt-color-text-heading); }
.mt-text-body      { color: var(--mt-color-text-body); }

.mt-uppercase  { text-transform: uppercase; letter-spacing: var(--mt-letter-spacing-wider); }
.mt-capitalize { text-transform: capitalize; }

.mt-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mt-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.mt-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — reducir tamaños en móvil
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  h1 { font-size: var(--mt-font-size-4xl); }   /* 64 → 48px */
  h2 { font-size: var(--mt-font-size-3xl); }   /* 48 → 40px */
  h3 { font-size: var(--mt-font-size-2xl); }   /* 40 → 32px */
  h4 { font-size: var(--mt-font-size-xl); }    /* 32 → 24px */
}

@media (max-width: 480px) {
  h1 { font-size: var(--mt-font-size-3xl); }   /* → 40px */
  h2 { font-size: var(--mt-font-size-2xl); }   /* → 32px */
  h3 { font-size: var(--mt-font-size-xl); }    /* → 24px */
}