/* ========================= */
/* View Transitions (MPA)     */
/* ========================= */

@view-transition {
  navigation: auto;
}

main {
  view-transition-name: main-content;
}

::view-transition-old(main-content) {
  animation: 0.3s ease both vt-slide-out;
}

::view-transition-new(main-content) {
  animation: 0.35s ease both vt-slide-in;
}

/* Root (header, footer) — instant, no animation */
::view-transition-group(root) { animation: none; }
::view-transition-old(root)   { animation: none; opacity: 0; }
::view-transition-new(root)   { animation: none; }

/* ========================= */
/* SPA page transitions       */
/* ========================= */

@keyframes vt-slide-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes vt-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

main.page-exit {
  animation: vt-slide-out 0.25s ease both;
}

main.page-enter {
  animation: vt-slide-in 0.3s ease both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  main.page-exit,
  main.page-enter,
  ::view-transition-old(main-content),
  ::view-transition-new(main-content) {
    animation: none;
  }
}

/* ========================= */
/* Global — Base & Typography */
/* ========================= */

/* ─── @font-face ─── */
@font-face {
  font-family: 'Artegra Sans';
  src: url('../assets/fonts/ArtegraSans-Light.woff2') format('woff2'),
       url('../assets/fonts/ArtegraSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Artegra Sans';
  src: url('../assets/fonts/ArtegraSans_regular.woff2') format('woff2'),
       url('../assets/fonts/ArtegraSans_regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Artegra Sans';
  src: url('../assets/fonts/ArtegraSansMedium.woff2') format('woff2'),
       url('../assets/fonts/ArtegraSansMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Artegra Sans';
  src: url('../assets/fonts/ArtegraSans_semibold.woff2') format('woff2'),
       url('../assets/fonts/ArtegraSans_semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Artegra Sans';
  src: url('../assets/fonts/ArtegraSansBold.woff2') format('woff2'),
       url('../assets/fonts/ArtegraSansBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Butler';
  src: url('../assets/fonts/Butler_Regular.woff2') format('woff2'),
       url('../assets/fonts/Butler_Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Butler';
  src: url('../assets/fonts/Butler_Medium.woff2') format('woff2'),
       url('../assets/fonts/Butler_Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Butler';
  src: url('../assets/fonts/Butler_Bold.woff2') format('woff2'),
       url('../assets/fonts/Butler_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../assets/fonts/MetaSerifPro-Book.woff2') format('woff2'),
       url('../assets/fonts/MetaSerifPro-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Reset essentials ─── */
*, *::before, *::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* ─── Base ─── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ff-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg-white);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
}

/* ─── Typography ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-primary);
  color: var(--color-text);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

h1 {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-4xl);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
}

h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-card);
}

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-2xl);
}

h5 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-card);
}

p {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
}

a {
  color: var(--color-text);
  transition: opacity var(--transition-base);
}

a:hover {
  opacity: 0.7;
}

strong, b {
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

/* ─── Desktop-only line breaks ─── */
.br-desktop {
  display: none;
}
@media (min-width: 768px) {
  .br-desktop {
    display: inline;
  }
}

/* ─── Mobile overrides ─── */
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  h1 {
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
    letter-spacing: var(--ls-mobile);
  }
  h2 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-lg);
  }
  h3 {
    font-size: var(--fs-lg);
  }
  h4 {
    font-size: var(--fs-md);
  }
  .stat-number {
    font-size: var(--fs-5xl);
    line-height: var(--lh-5xl);
    letter-spacing: var(--ls-mobile-sm);
  }
}

/* ─── Utilidades reutilizadas en 3+ páginas ─── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── Divider line — reutilizado en múltiples páginas ─── */
.divider {
  width: 100%;
  height: var(--divider-width);
  background-color: var(--divider-color);
}

/* ─── Accent bar (hero) — reutilizado en todas las páginas ─── */
.accent-bar {
  width: var(--bar-width);
  height: var(--bar-height);
  display: block;
}

/* ─── Stat number — reutilizado en 3+ páginas ─── */
.stat-number {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-6xl);
  letter-spacing: var(--ls-number);
  white-space: nowrap;
  color: var(--color-text);
}

.stat-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  letter-spacing: 0;
  color: var(--color-text);
  font-feature-settings: 'liga' 0;
  margin-top: -8px;
}

/* ─── Focus-visible — keyboard accessibility ─── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── Touch: minimum tap target ─── */
@media (pointer: coarse) {
  button,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ─── Scroll-driven section reveal ─── */
@supports (animation-timeline: view()) {
  @keyframes sectionReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Auto-apply to content sections (skip heroes and tall stat sections) */
  section:not([class*="hero"]):not(.mn-oferta) {
    animation: sectionReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
}