/* Mortend para el contenido; Aesthetic Moment Italic para los fondos decorativos. */
@font-face {
  font-family: 'Aesthetic';
  src: url('../assets/fonts/aesthetic-moment-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mortend';
  src: url('../assets/fonts/mortend/mortend-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mortend';
  src: url('../assets/fonts/mortend/mortend-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mortend';
  src: url('../assets/fonts/mortend/mortend-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mortend';
  src: url('../assets/fonts/mortend/mortend-extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: 'Mortend', sans-serif;
  --serif: 'Mortend', sans-serif;
}

body {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
}

button, input, textarea, select, summary { font-family: var(--font); }

/* La familia ya es extendida: se ajusta la escala, sin comprimir los glifos. */
.block__head h2 { font-stretch: normal; font-weight: 800; }
.block__head h2 { font-size: clamp(2rem, 4.2vw, 4.5rem); line-height: 1.15; }
.sign__row { font-family: 'Aesthetic', serif; font-style: italic; font-weight: 400; font-synthesis: none; letter-spacing: -0.01em; line-height: 1.12; }
.sign__row--serif { font-weight: 400; font-size: clamp(2.5rem, 6.2vw, 7rem); }
.sign__row--grotesk { font-size: clamp(2rem, 4.8vw, 5.5rem); }

/* Se mantienen la cápsula y los menús existentes. */
.nav { gap: 1.1rem; }
.nav__links { gap: 1.6rem; }
.nav__links a { font-size: 0.75rem; font-weight: 400; letter-spacing: 0; }
.btn { font-size: 0.75rem; font-weight: 400; }
.btn--sm { font-size: 0.75rem; }
.lang__toggle,
.lang__list a,
.menu__toggle { font-size: 0.75rem; font-weight: 400; }
.viewer__close { font-family: var(--font); font-size: 0.75rem; }

.clients__title { font-size: clamp(1rem, 1.65vw, 1.7rem); line-height: 1.4; font-weight: 700; }
.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillars li, .pillars a { min-width: 0; }
.pillars strong {
  font-size: clamp(0.875rem, 1.35vw, 1.35rem);
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
  text-wrap: balance;
}
.pillars em {
  font-family: var(--font);
  font-size: clamp(0.75rem, 0.9vw, 1rem);
  font-style: normal;
  font-weight: 300;
  line-height: 1.7;
  white-space: normal;
}
.pillars__reel { font-family: var(--font); font-size: 0.75rem; font-weight: 300; line-height: 1.8; }

.tv h3 { font-size: clamp(0.75rem, 0.9vw, 1rem); font-weight: 400; line-height: 1.65; }
.tv h3::before { font-size: 0.75rem; }
.tv > p, .poster h3 { font-size: 0.75rem; line-height: 1.7; font-weight: 300; }

.footer { font-size: 0.75rem; line-height: 1.8; }
.footer__brand p { font-family: var(--font); font-size: clamp(0.75rem, 1vw, 1rem); font-weight: 300; font-style: normal; line-height: 1.85; }
/* Only the © is left in the base line: it sits centred, like the rest of the footer */
.footer__base { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem 1.5rem; justify-items: center; }
.footer__base > p { grid-column: 1 / -1; text-align: center; }
.footer__nav, .footer__more { gap: 1.4rem; }

@media (min-width: 901px) and (max-width: 1100px) {
  .nav { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; }
  .nav__links { justify-content: center; gap: 1rem; }
  .footer__base { grid-template-columns: 1fr auto; }
  .footer__base > p { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
}

/* The header with «Menú»: a phone, or a window too narrow for the shortcuts around the logo (css/inicio.css) */
@media (max-width: 900px), (max-width: 60em) {
  .nav { gap: 0.65rem; }
  .menu__links a:not(.btn), .menu__links .btn { font-size: 0.875rem; }
}

@media (max-width: 760px) {
  .nav__end { gap: 0.25rem; }
  .lang__toggle { gap: 0.3rem; padding-inline: 0.5rem; }
  .menu__toggle { min-width: 4.6rem; padding-inline: 0.7rem; }
  .clients__title { font-size: 1rem; line-height: 1.45; }
  .pillars strong { font-size: 0.9375rem; line-height: 1.4; }
  .pillars em, .pillars__reel { font-size: 0.75rem; }
  .pillars em { line-height: 1.6; }
  .block__head h2 { font-size: clamp(1.75rem, 7.6vw, 2.5rem); line-height: 1.25; }
  .tv h3, .tv > p, .poster h3 { font-size: 0.75rem; }
  .footer__base { grid-template-columns: minmax(0, 1fr); }
  .footer__nav, .footer__more { gap: 1.3rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .clients__title { font-size: 0.875rem; }
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillars strong, .pillars em, .pillars__reel { font-size: 0.75rem; }
  .pillars strong { line-height: 1.45; }
  .pillars em { line-height: 1.6; }
}

@media (min-width: 1921px) {
  .clients__title { font-size: 1.4vw; }
  .pillars strong { font-size: 1.125vw; }
  .pillars em, .pillars__reel { font-size: 0.78vw; }
  .sign__row--serif { font-size: 6.2vw; }
  .sign__row--grotesk { font-size: 4.8vw; }
}