/* ─────────────────────────────────────────
   TOKENS — UI Kit
───────────────────────────────────────── */
:root {
  /* Color styles — nombres alineados con Figma */
  --color-main-brand-100:        rgba(218, 237, 237, 0.90);
  --color-main-brand-75:         rgba(218, 237, 237, 0.75);
  --color-main-brand-50:         rgba(218, 237, 237, 0.50);
  --color-main-brand-25:         rgba(218, 237, 237, 0.25);
  --color-main-text:             rgba(218, 237, 237, 0.90);
  --color-secondary-text:        rgba(218, 237, 237, 0.90);
  --color-main-accent:           #7755DE;
  --color-secondary-accent:      #A689FF;
  --color-clic-accent:           #5533BB;
  --color-accent-positive:       #3ECF6E;
  --color-accent-alert:          #F5A623;
  --color-main-background:       #222324;
  --color-secondary-background:  #262B31;
  --color-clic-background:       #1A1A19;

  /* Color aliases — compatibilidad con componentes actuales */
  --color-bg-main:          var(--color-main-background);
  --color-bg-secondary:     var(--color-secondary-background);
  --color-text-main:        var(--color-main-text);
  --color-text-secondary:   var(--color-secondary-text);
  --color-brand:            var(--color-main-brand-100);
  --color-brand-100:        var(--color-main-brand-100);
  --color-brand-75:         var(--color-main-brand-75);
  --color-brand-50:         var(--color-main-brand-50);
  --color-brand-25:         var(--color-main-brand-25);
  --color-accent-main:      var(--color-main-accent);
  --color-accent-secondary: var(--color-secondary-accent);
  --color-accent-clic:      var(--color-clic-accent);
  --color-positive:         var(--color-accent-positive);
  --color-alert:            var(--color-accent-alert);

  /* Border radius — nombres alineados con Figma */
  --radius-none: 0px;
  --radius-xs: 8px;
  --radius-s: 16px;
  --radius-m: 20px;
  --radius-l: 32px;
  --radius-xl: 40px;

  /* Border radius aliases — compatibilidad con componentes actuales */
  --border-radius-large: var(--radius-l);
  --border-radius-small: var(--radius-s);
  --radius-pill: 100px;

  --font-title: 'Inter', sans-serif;
  --font-body:  'Inter', sans-serif;

  /* ── Type scale — valores exactos Figma ── */

  /* Títulos — Inter Bold (700) */
  --text-title-hero: 72px;  --lh-title-hero: 80px;   /* H1 home */
  --text-title-xl:   56px;  --lh-title-xl:   64px;   /* sección grande */
  --text-title-l:    40px;  --lh-title-l:    50px;   /* H2 secciones */
  --text-title-m:    32px;  --lh-title-m:    40px;   /* H3 / casos */
  --text-title-s:    26px;  --lh-title-s:    32.5px; /* labels sección */
  --text-title-xs:   20px;  --lh-title-xs:   25px;   /* headings compactos */

  /* Body — Inter Light (300) */
  --text-body-xl:   25px;  --lh-body-xl:   35px;
  --text-body-l:    18px;  --lh-body-l:    25px;
  --text-body-m:    16px;  --lh-body-m:    21.6px;
  --text-body-s:    12px;  --lh-body-s:    16.2px;
  --font-weight-body: 300;

  /* Botones — Inter Bold (700) */
  --text-btn-l:     18px;  --lh-btn-l:     22px;
  --text-btn-m:     16px;  --lh-btn-m:     19px;
  --text-btn-s:     12px;  --lh-btn-s:     14px;

  /* Captions — Inter Light (300) */
  --text-cap-l:     16px;  --lh-cap-l:     20px;
  --text-cap-m:     12.8px; --lh-cap-m:    16px;
  --text-cap-s:     10px;  --lh-cap-s:     12.5px;

  /* ── Grid — Column-Desktop (Figma) ── */
  /* Márgenes fijos 218px · columnas fluidas · contenido crece con la pantalla */
  --spacing-hero:       160px;

  --sidenav-width:      180px;
  --grid-columns:       12;
  --grid-gutter:        10px;
  /* Margin tokens — nombres alineados con Figma */
  --margin-desktop: 218px;
  --margin-tablet: 80px;
  --margin-mobile: 16px;

  --grid-margin-left:   var(--margin-desktop);  /* sidenav + espacio contenido */
  --grid-margin-right:  var(--margin-desktop);  /* margen derecho */

  /* Spacing tokens — nombres alineados con Figma */
  --space-none: 0px;
  --space-micro: 2px;
  --space-nano: 4px;
  --space-xxs: 6px;
  --space-xs: 8px;
  --space-ss: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-huge: 80px;
  --space-mega: 120px;
  --space-hero: 160px;

  /* Motion */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.76, 0, 0.24, 1);
  --dur-micro: 150ms;
  --dur-mid:   300ms;
  --dur-page:  500ms;
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body-m);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────
   GRID SYSTEM
   Márgenes fijos 218px · columnas fluidas · contenido crece con la pantalla
───────────────────────────────────────── */
.container {
  width: 100%;
  padding: 0 var(--grid-margin-right) 0 var(--grid-margin-left);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 1024px) {
  .container { padding: 0 60px 0 80px; }
}

@media (max-width: 768px) {
  .container  { padding: 0 var(--space-l); }
  .grid-12    { grid-template-columns: repeat(4, 1fr); }
  .col-5, .col-6, .col-7 { grid-column: span 4; }
  .col-4 { grid-column: span 2; }
}

@media (max-width: 480px) {
  .container  { padding: 0 var(--space-s); }
  .grid-12    { grid-template-columns: repeat(2, 1fr); }
  [class^="col-"] { grid-column: span 2; }
}

/* ─────────────────────────────────────────
   SITE HEADER — isotipo + btn-contact fijo
───────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-m);
  background: transparent;
  transition: opacity var(--dur-mid) var(--ease-in-out);
}
.btn-contact.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.logotype {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.isotipo {
  width: 100px;
  height: 100px;
  display: block;
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 0;
  padding-top: var(--space-hero);
  padding-bottom: var(--space-xxl);
  padding-left: var(--grid-margin-left);
  padding-right: var(--grid-margin-right);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-xl);
}

/* Sidenav estándar — fijo a la izquierda, acompaña el scroll */
.site-sidenav {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidenav-width);
  height: 100vh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(148px + var(--space-m)) var(--space-m) var(--space-m);
  background: var(--color-bg-main);
  border-right: 1px solid var(--color-brand-25);
}
.site-sidenav__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}
.site-sidenav__link {
  display: block;
}
.language-toggle {
  --language-toggle-option-width: 54px;
  display: inline-flex;
  align-items: center;
  position: relative;
  width: calc(var(--language-toggle-option-width) * 2);
  height: 31px;
  padding: 0;
  background: var(--color-text-secondary);
  border: 1px solid var(--color-text-main);
  border-radius: var(--radius-s);
  overflow: hidden;
  color: var(--color-bg-main);
}
.language-toggle__option {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: var(--language-toggle-option-width);
  min-width: var(--language-toggle-option-width);
  height: 100%;
  padding: 0 var(--space-s);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: inherit;
  font: 700 var(--text-btn-m)/var(--lh-btn-m) var(--font-body);
  cursor: pointer;
}
.language-toggle__active-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, var(--language-toggle-option-width));
  background: var(--color-accent-clic);
  color: var(--color-text-main);
  clip-path: inset(0 var(--language-toggle-option-width) 0 0 round var(--radius-s));
  pointer-events: none;
  transition: clip-path 500ms cubic-bezier(0.7, 0, 0.3, 1);
}
.language-toggle[data-active-language="es"] .language-toggle__active-labels {
  clip-path: inset(0 1px 0 53px round var(--radius-s));
}
.language-toggle__active-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 var(--text-btn-m)/var(--lh-btn-m) var(--font-body);
}
.language-toggle__option:focus-visible {
  z-index: 3;
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .language-toggle__active-labels {
    transition: none;
  }
}
/* Estado activo — sección actual */
.home-sidenav__link.is-active {
  color: var(--color-text-secondary);
  text-decoration-color: var(--color-text-secondary);
  pointer-events: none;
}
.home-sidenav__link.is-active::after { display: none; }

/* Contenido principal del hero */
.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
}

/* Home entrance — lectura coreografiada, 0–495ms */
.hero-title-line {
  display: block;
  overflow: hidden;
}
.hero-title-line > span {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled:not(.motion-entered) .home-header .logotype,
  .motion-enabled:not(.motion-entered) .home-header .btn-contact,
  .motion-enabled:not(.motion-entered) .home-sidenav__link,
  .motion-enabled:not(.motion-entered) .home-sidenav .language-toggle,
  .motion-enabled:not(.motion-entered) .hero-location,
  .motion-enabled:not(.motion-entered) .hero-subtitle,
  .motion-enabled:not(.motion-entered) .hero-scroll-hint {
    opacity: 0;
    transform: translateY(12px);
  }
  .motion-enabled:not(.motion-entered) .hero-title-line > span {
    opacity: 0;
    transform: translateY(105%);
  }

  .motion-enabled .home-header .logotype,
  .motion-enabled .home-header .btn-contact,
  .motion-enabled .home-sidenav__link,
  .motion-enabled .home-sidenav .language-toggle,
  .motion-enabled .hero-location,
  .motion-enabled .hero-subtitle,
  .motion-enabled .hero-scroll-hint,
  .motion-enabled .hero-title-line > span {
    transition-property: transform, opacity;
    transition-duration: 280ms;
    transition-timing-function: var(--ease-out);
  }

  .motion-enabled .home-header .logotype { transition-delay: 0ms; }
  .motion-enabled .home-header .btn-contact { transition-delay: 20ms; }
  .motion-enabled .home-sidenav__link:nth-child(1) { transition-delay: 20ms; }
  .motion-enabled .home-sidenav__link:nth-child(2) { transition-delay: 45ms; }
  .motion-enabled .home-sidenav__link:nth-child(3) { transition-delay: 70ms; }
  .motion-enabled .home-sidenav__link:nth-child(4) { transition-delay: 95ms; }
  .motion-enabled .hero-location { transition-delay: 40ms; }
  .motion-enabled .hero-title-line:nth-child(1) > span { transition-delay: 80ms; }
  .motion-enabled .hero-title-line:nth-child(2) > span { transition-delay: 125ms; }
  .motion-enabled .hero-subtitle { transition-delay: 170ms; }
  .motion-enabled .home-sidenav .language-toggle { transition-delay: 190ms; }
  .motion-enabled .hero-scroll-hint { transition-delay: 215ms; }
}

/* Language switch — replay the same information hierarchy */
@media (prefers-reduced-motion: no-preference) {
  html:not(.language-entered) body :is(h1,h2,h3,p,li,figcaption,.hero-location,.about-hero-label,.cs-back,.cs-hero-metadata,.btn,.btn-primary,.cs-feedback-btn,.site-footer__item) { opacity:0; transform:translateY(8px); }
  body :is(h1,h2,h3,p,li,figcaption,.hero-location,.about-hero-label,.cs-back,.cs-hero-metadata,.btn,.btn-primary,.cs-feedback-btn,.site-footer__item) { transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out); }
  body :is(.hero-location,.about-hero-label,.cs-back) { transition-delay:0ms; }
  body h1 { transition-delay:45ms; }
  body :is(h2,.cs-hero-metadata) { transition-delay:90ms; }
  body :is(h3,p,li,figcaption) { transition-delay:135ms; }
  body :is(.btn,.btn-primary,.cs-feedback-btn,.site-footer__item) { transition-delay:180ms; }
}

/* Internal page entrances — same hierarchy and timing as Home */
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled:not(.motion-entered) .cs-topbar .logotype,
  .motion-enabled:not(.motion-entered) .cs-topbar .btn-contact,
  .motion-enabled:not(.motion-entered) .sidenav .site-sidenav__link,
  .motion-enabled:not(.motion-entered) .sidenav .language-toggle,
  .motion-enabled:not(.motion-entered) .cs-back,
  .motion-enabled:not(.motion-entered) .cs-title,
  .motion-enabled:not(.motion-entered) .cs-hero-metadata > *,
  .motion-enabled:not(.motion-entered) .cs-hero-ctas,
  .motion-enabled:not(.motion-entered) .cs-hero-right,
  .motion-enabled:not(.motion-entered) .about-hero-label,
  .motion-enabled:not(.motion-entered) .about-hero-title,
  .motion-enabled:not(.motion-entered) .about-hero-sub,
  .motion-enabled:not(.motion-entered) .error-header .logotype,
  .motion-enabled:not(.motion-entered) .error-header .btn-contact,
  .motion-enabled:not(.motion-entered) .error-return,
  .motion-enabled:not(.motion-entered) .error-sidenav .language-toggle,
  .motion-enabled:not(.motion-entered) .error-code,
  .motion-enabled:not(.motion-entered) .error-title,
  .motion-enabled:not(.motion-entered) .error-description,
  .motion-enabled:not(.motion-entered) .error-home,
  .motion-enabled:not(.motion-entered) .error-watermark {
    opacity: 0;
    transform: translateY(12px);
  }

  .motion-enabled .cs-topbar .logotype,
  .motion-enabled .cs-topbar .btn-contact,
  .motion-enabled .sidenav .site-sidenav__link,
  .motion-enabled .sidenav .language-toggle,
  .motion-enabled .cs-back,
  .motion-enabled .cs-title,
  .motion-enabled .cs-hero-metadata > *,
  .motion-enabled .cs-hero-ctas,
  .motion-enabled .cs-hero-right,
  .motion-enabled .about-hero-label,
  .motion-enabled .about-hero-title,
  .motion-enabled .about-hero-sub,
  .motion-enabled .error-header .logotype,
  .motion-enabled .error-header .btn-contact,
  .motion-enabled .error-return,
  .motion-enabled .error-sidenav .language-toggle,
  .motion-enabled .error-code,
  .motion-enabled .error-title,
  .motion-enabled .error-description,
  .motion-enabled .error-home,
  .motion-enabled .error-watermark {
    transition-property: transform, opacity;
    transition-duration: 280ms;
    transition-timing-function: var(--ease-out);
  }

  .motion-enabled .cs-topbar .logotype,
  .motion-enabled .error-header .logotype { transition-delay: 0ms; }
  .motion-enabled .cs-topbar .btn-contact,
  .motion-enabled .error-header .btn-contact { transition-delay: 20ms; }
  .motion-enabled .sidenav .site-sidenav__link:nth-child(1),
  .motion-enabled .error-return { transition-delay: 20ms; }
  .motion-enabled .sidenav .site-sidenav__link:nth-child(2) { transition-delay: 45ms; }
  .motion-enabled .sidenav .site-sidenav__link:nth-child(3) { transition-delay: 70ms; }

  .motion-enabled .cs-back,
  .motion-enabled .about-hero-label,
  .motion-enabled .error-code { transition-delay: 40ms; }
  .motion-enabled .cs-title,
  .motion-enabled .about-hero-title,
  .motion-enabled .error-title { transition-delay: 85ms; }
  .motion-enabled .cs-hero-metadata > *:nth-child(1),
  .motion-enabled .about-hero-sub,
  .motion-enabled .error-description { transition-delay: 130ms; }
  .motion-enabled .cs-hero-metadata > *:nth-child(2) { transition-delay: 155ms; }
  .motion-enabled .cs-hero-ctas,
  .motion-enabled .error-home { transition-delay: 175ms; }
  .motion-enabled .sidenav .language-toggle,
  .motion-enabled .error-sidenav .language-toggle { transition-delay: 190ms; }
  .motion-enabled .cs-hero-right,
  .motion-enabled .error-watermark { transition-delay: 215ms; }
}

/* Ubicación */
.hero-location {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-s);
  font-size: var(--text-body-l);
  font-weight: var(--font-weight-body);
  line-height: var(--lh-body-l);
  color: var(--color-text-main);
}
.hero-location-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Headline — 56px, dos líneas */
.hero-title {
  font-family: var(--font-title);
  font-size: var(--text-title-hero);
  line-height: var(--lh-title-hero);
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0;
}
.hero-title-accent {
  color: var(--color-accent-secondary);
  display: block;
}

/* Subtitle */
.hero-subtitle {
  font-size: var(--text-body-l);
  font-weight: var(--font-weight-body);
  line-height: var(--lh-body-l);
  color: var(--color-text-main);
  max-width: none;
  margin: 0;
}

/* Scroll hint — se oculta al hacer scroll */
.hero-scroll-hint {
  align-self: flex-start;
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-nano);
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: opacity var(--dur-mid) var(--ease-in-out);
}
.hero-scroll-hint > span:first-child {
  text-decoration: none;
}
.hero-scroll-arrow {
  display: flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  animation: hero-scroll-arrow-loop 2s linear infinite;
}
.hero-scroll-arrow img {
  display: block;
  width: 10px;
  height: 5px;
}
.hero-scroll-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes hero-scroll-arrow-loop {
  0% { translate: 0 0; }
  5% { translate: 0 2.874px; }
  10% { translate: 0 5.02px; }
  15% { translate: 0 6px; }
  20% { translate: 0 5.739px; }
  25% { translate: 0 4.761px; }
  30% { translate: 0 2.559px; }
  35% { translate: 0 -1.494px; }
  40% { translate: 0 -5.082px; }
  45% { translate: 0 -6px; }
  50% { translate: 0 -5.739px; }
  55% { translate: 0 -4.761px; }
  60% { translate: 0 -2.557px; }
  65% { translate: 0 1.497px; }
  70% { translate: 0 5.083px; }
  75% { translate: 0 6px; }
  80% { translate: 0 5.063px; }
  85% { translate: 0 2.93px; }
  90%, 100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow {
    animation: none;
  }
}

@media (max-width: 1024px) {
  .hero { padding-left: 80px; padding-right: 60px; }
  .site-sidenav { display: none; }
  .hero-title-line {
    overflow: visible;
  }
}
@media (max-width: 768px) {
  .hero-title {
    font-size: var(--text-title-l);
    line-height: var(--lh-title-l);
  }
}
.scroll-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  writing-mode: vertical-rl;
  opacity: 0.5;
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn-primary {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-btn-m);
  color: var(--color-text-main);
  background: var(--color-accent-main);
  border: none;
  padding: 14px 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

.button-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  background: var(--color-bg-secondary);
  transition:
    background-color var(--dur-micro) var(--ease-in-out),
    transform var(--dur-micro) var(--ease-in-out);
}

.button-arrow::before,
.button-arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-micro) var(--ease-in-out);
}

.button-arrow::before {
  width: 15px;
  height: 8px;
  background-image: url('../assets/Icons/button-chevron-20.svg');
  opacity: 1;
}

.button-arrow::after {
  width: 15px;
  height: 15px;
  background-image: url('../assets/Icons/button-arrow-20.svg');
  opacity: 0;
}

.button-arrow--small {
  width: 36px;
  height: 36px;
  padding: var(--space-xs);
}

.button-arrow--mute {
  background: var(--color-bg-secondary);
}

.button-arrow--mute:hover,
.button-arrow--mute:active {
  background: var(--color-bg-secondary);
}

.button-arrow:hover::before,
.button-arrow:active::before {
  opacity: 0;
}

.button-arrow:hover::after,
.button-arrow:active::after {
  opacity: 1;
}
.btn-primary:hover {
  background: var(--color-accent-secondary);
  transform: translateY(-2px);
}
.btn-primary .arrow {
  transition: transform var(--dur-micro) var(--ease-out);
}
.btn-primary:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-btn-m);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--dur-micro) var(--ease-out);
}
.btn-ghost:hover { color: var(--color-text-main); }

/* ─────────────────────────────────────────
   SECTION NUMBERS (REF-01 Wibify)
───────────────────────────────────────── */
.section-number {
  font-family: monospace;
  font-size: var(--text-cap-m);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent-main);
  text-transform: uppercase;
  margin-bottom: var(--space-s);
  display: block;
}

/* ─────────────────────────────────────────
   WORK SECTION
───────────────────────────────────────── */
.section-work {
  height: auto;
  padding: var(--space-xxl) 0;
  position: relative;
}

.section-work .container {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

/* Título */
.sw-title {
  font-family: var(--font-title);
  font-size: var(--text-title-l);   /* 40px */
  line-height: 50px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: var(--space-xl);
}

/* Lista de casos */
.sw-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Fila: timeline + contenido */
.sw-item {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  opacity: 1;
}

/* Columna timeline — diamante + línea vertical */
.sw-timeline {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.sw-diamond {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--color-text-main);
  transform: rotate(45deg);
  margin-top: 4px;
  transition: background-color var(--dur-micro) var(--ease-in-out);
}

.sw-diamond::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-accent-secondary);
  opacity: 0;
}

.sw-item:hover .sw-diamond {
  background: var(--color-accent-secondary);
}

.sw-item:hover .sw-diamond::after {
  animation: sw-diamond-pulse 1.8s linear infinite;
}

.sw-line {
  flex: 1;
  width: 1px;
  background: var(--color-brand-25);
  margin: 4px 0;
}

.sw-line--end {
  background: var(--color-brand-25);
}

/* Columna de contenido */
.sw-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding-bottom: var(--space-l);
  min-width: 0;
}

.sw-item:last-child:not(.is-active) .sw-content {
  padding-bottom: var(--space-xs);
}

.sw-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.sw-header:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 8px;
}

.sw-heading {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0;
}

.sw-chevron {
  flex-shrink: 0;
  align-self: flex-end;
  width: 36px;
  height: 36px;
  transition: transform var(--dur-mid) var(--ease-in-out);
}

.sw-chevron img {
  display: none;
}

.sw-item.is-active .sw-chevron {
  transform: rotate(180deg);
}

.sw-item:hover .sw-chevron {
  animation: sw-chevron-float 1.8s linear infinite;
}

.sw-eyebrow {
  font-size: var(--text-cap-m);
  line-height: var(--lh-cap-m);
  font-weight: 300;
  color: var(--color-accent-secondary);
}

.sw-case-title {
  font-family: var(--font-title);
  font-size: var(--text-title-s);
  font-weight: 700;
  line-height: var(--lh-title-s);
  color: var(--color-text-main);
  transition: color var(--dur-micro) var(--ease-in-out);
}

.sw-item:hover .sw-case-title {
  color: var(--color-text-secondary);
}

.sw-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur-page) var(--ease-in-out),
              opacity var(--dur-mid) var(--ease-in-out);
}

.sw-item.is-active .sw-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sw-body {
  min-height: 0;
  padding-bottom: var(--space-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  font-size: var(--text-body-l);
  font-weight: var(--font-weight-body);
  line-height: var(--lh-body-l);
  color: var(--color-text-main);
  visibility: hidden;
  transition: visibility 0s var(--dur-page);
}

.sw-item.is-active .sw-body {
  visibility: visible;
  transition-delay: 0s;
}

.sw-item:not(.is-active) .sw-body {
  padding-bottom: 0;
}

.sw-body ul {
  padding-left: 20px;
  list-style: disc;
}

.sw-highlight {
  color: var(--color-accent-secondary);
  font-weight: 600;
}

.sw-project-button {
  margin-top: var(--space-xs);
  text-decoration: none;
}

.sw-project-button::after {
  display: none;
}

@keyframes sw-diamond-pulse {
  0% {
    opacity: 1;
    scale: 1;
    animation-timing-function: cubic-bezier(0.08, 0.5, 0, 1);
  }
  36.111% {
    opacity: 0;
    scale: 1.6;
  }
  100% {
    opacity: 0;
    scale: 1.6;
  }
}

@keyframes sw-chevron-float {
  0% { translate: 0 0; animation-timing-function: ease-out; }
  16.667% { translate: 0 6px; animation-timing-function: ease-in-out; }
  50% { translate: 0 -6px; animation-timing-function: ease-in-out; }
  83.333% { translate: 0 6px; animation-timing-function: ease-in; }
  100% { translate: 0 0; }
}

/* ─────────────────────────────────────────
   HOME ABOUT
───────────────────────────────────────── */
.section-home-about {
  min-height: 0;
  padding: var(--space-xxl) 0;
}

.section-home-about .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.home-about-title {
  margin-bottom: 0;
}

.home-about-layout {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
}

.home-about-image {
  flex: 0 0 227px;
  width: 227px;
  height: auto;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--color-text-main);
}

.home-about-image img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: 47% center;
  transform: none;
  filter: grayscale(1);
}

.home-about-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.home-about-actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
}

.home-about-action {
  color: var(--color-text-main);
  text-decoration: none;
}

.home-about-action[href] {
  transition: background-color var(--dur-micro) var(--ease-in-out),
              transform var(--dur-micro) var(--ease-in-out);
}

.home-about-action[href]:hover {
  background: var(--color-accent-secondary);
  transform: translateY(-1px);
}

.home-about-copy {
  color: var(--color-text-main);
  font-size: var(--text-body-l);
  font-weight: var(--font-weight-body);
  line-height: var(--lh-body-l);
}

.home-about-copy p + p {
  margin-top: 18px;
}

.sw-reveal {
  opacity: 1;
  transform: none;
}
.sw-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────
   ARTICLES — horizontal scroll section
───────────────────────────────────────── */
.section-articles {
  height: auto;
  padding: var(--space-xxl) 0;
  position: relative;
  overflow: visible;
}

.articles-scroll-sticky {
  position: relative;
  top: 0;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-xl);
}

.articles-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.articles-header .sw-title {
  margin-bottom: 0;
}

.articles-subtitle {
  display: none;
  font-size: var(--text-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-text-main);
}

.articles-carousel-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  width: 100%;
}

.articles-scroll-viewport {
  margin: 0 0 0 var(--grid-margin-left);
  overflow: visible;
}

.articles-scroll-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-hero);
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: var(--grid-margin-right);
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.articles-scroll-track::-webkit-scrollbar {
  display: none;
}

.article-item {
  flex: 0 0 627px;
  display: flex;
  width: 627px;
  gap: var(--space-s);
  align-items: flex-start;
  scroll-snap-align: start;
}

.article-img {
  flex: 0 0 227px;
  width: 227px;
  height: 227px;
  border-radius: 20px;
  overflow: hidden;
}

.article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 384px;
}

.article-title {
  font-family: var(--font-title);
  font-size: var(--text-title-s);
  line-height: var(--lh-title-s);
  font-weight: 700;
  color: var(--color-text-main);
}

.article-body {
  font-size: var(--text-body-l);
  font-weight: var(--font-weight-body);
  line-height: var(--lh-body-l);
  color: var(--color-text-main);
}

.article-link {
  color: var(--color-accent-secondary);
  text-decoration: none;
  white-space: nowrap;
  margin-left: var(--space-xs);
}

.article-link:hover {
  text-decoration: underline;
}

.articles-track-spacer {
  flex: 0 0 max(1px, calc(100vw - var(--grid-margin-left) - 627px));
  height: 1px;
}

.articles-carousel-controls {
  width: auto;
  margin: 0 0 0 var(--grid-margin-left);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-l);
}

.articles-carousel-arrow,
.articles-carousel-pill {
  border: 0;
  color: var(--color-text-main);
  cursor: pointer;
  font-family: var(--font-body);
}

.articles-carousel-arrow {
  width: 20px;
  height: 20px;
  font-size: 0;
  line-height: 0;
}

.articles-carousel-arrow.button-arrow--small {
  width: 36px;
  height: 36px;
}

.articles-carousel-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-nano) var(--space-xs);
  border-radius: var(--radius-s);
  background: var(--color-bg-secondary);
  font-size: var(--text-cap-s);
  font-weight: 400;
  line-height: var(--lh-cap-s);
}

.articles-carousel-pill.is-active {
  background: var(--color-accent-main);
}

.articles-carousel-line {
  display: none;
}

.articles-carousel-arrow--prev {
  transform: rotate(90deg);
}

.articles-carousel-arrow--next {
  transform: rotate(-90deg);
}

@media (max-width: 1024px) {
  .section-home-about {
    min-height: 0;
    padding: var(--space-xxl) 0;
  }

  .home-about-layout {
    flex-direction: column;
    gap: var(--space-l);
  }

  .home-about-content {
    gap: var(--space-m);
  }

  .section-work {
    height: auto;
    padding: var(--space-xxl) 0;
  }

  .section-work .container {
    position: relative;
    min-height: 0;
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }

  .sw-list {
    min-height: 0;
  }

  .section-articles { height: auto; }
  .articles-scroll-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }
  .articles-scroll-track {
    flex-direction: column;
    padding: 0 var(--space-l);
    gap: var(--space-xl);
  }
  .article-item { flex-direction: column; }
  .article-text { max-width: none; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .section-articles {
    height: auto;
    overflow: visible;
  }

  .articles-scroll-sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    justify-content: flex-start;
    gap: var(--space-l);
  }

  .articles-scroll-track {
    flex-direction: row;
    gap: var(--space-hero);
    overflow-x: auto;
    padding-left: 0;
    padding-right: var(--margin-tablet);
  }

  .article-item {
    width: 627px;
    flex: 0 0 627px;
    flex-direction: row;
    gap: var(--space-s);
  }

  .article-img {
    width: 227px;
    height: 227px;
    flex-basis: 227px;
    border-radius: var(--radius-m);
  }

  .article-text {
    width: 384px;
    max-width: 384px;
    gap: var(--space-m);
  }

  .article-title {
    font-size: var(--text-title-xs);
    line-height: var(--lh-title-xs);
  }

  .article-body {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }

  .article-link {
    display: inline-block;
    margin-left: 0;
  }

  .articles-track-spacer {
    display: block;
    flex: 0 0 max(1px, calc(100vw - var(--margin-tablet) - 627px));
  }

  .articles-carousel-controls {
    width: auto;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sw-item:hover .sw-diamond::after,
  .sw-item:hover .sw-chevron {
    animation: none;
  }
}

/* ─────────────────────────────────────────
   FACTS — horizontal scroll section
───────────────────────────────────────── */
.section-facts {
  height: calc(100vh * 6);
  position: relative;
}

.facts-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Mask — covers sidenav overlap on the left */
.facts-sidenav-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--grid-margin-left);
  height: 100%;
  background: var(--color-bg-main);
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .facts-sidenav-mask { display: none; }
}

/* Headline — anchored at top of sticky */
.facts-headline-wrap {
  flex-shrink: 0;
  padding: var(--space-xxl) var(--grid-margin-right) var(--space-l) var(--grid-margin-left);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  position: relative;
  z-index: 6;
  background: var(--color-bg-main);
}

.about-headline {
  font-family: var(--font-title);
  font-size: var(--text-title-xl);
  line-height: var(--lh-title-xl);
  font-weight: 700;
}
.about-headline em {
  font-style: normal;
  color: var(--color-accent-secondary);
}

.about-cta {
  padding: 0;
  width: fit-content;
}

/* Global scroll progress — top of viewport */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent-secondary);
  transition: width 0.05s linear;
}

/* Counter — bottom left */
.facts-counter {
  position: absolute;
  bottom: var(--space-l);
  left: var(--grid-margin-left);
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: monospace;
  font-size: var(--text-cap-m);
  font-weight: 700;
  color: var(--color-text-secondary);
  opacity: 0.4;
  z-index: 10;
  letter-spacing: 0.1em;
}
.facts-counter-sep { opacity: 0.4; }

@media (max-width: 1024px) {
  .facts-counter { left: 80px; }
}
@media (max-width: 768px) {
  .facts-counter { left: var(--space-l); }
}

/* Track — fills remaining height, horizontal flex */
.facts-track {
  flex: 1;
  display: flex;
  min-height: 0;
  will-change: transform;
}

/* Each slide — two-column: media block + content */
.fact-slide {
  min-width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: center;
  padding-left: var(--grid-margin-left);
  padding-right: var(--grid-margin-right);
}

/* Media block — 340×340px square, future image container */
.fact-slide-media {
  width: 340px;
  height: 340px;
  background: var(--color-bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* Content — mismo alto que el bloque, texto desde arriba */
.fact-slide-content {
  height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--space-l);
}

/* Fact text */
.fact-slide-text {
  font-family: var(--font-body);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  font-weight: 300;
  color: var(--color-text-main);
  max-width: 22ch;
  margin: 0;
  quotes: none;
}
.fact-slide-text em {
  font-style: normal;
  color: var(--color-text-main);
}

/* Link */
.fact-slide-link {
  margin-top: var(--space-l);
  font-size: var(--text-cap-m);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
  width: fit-content;
}
.fact-slide-link:hover { color: var(--color-text-main); }
.fact-slide.is-active .fact-slide-link { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 1024px) {
  .facts-headline-wrap { padding: var(--space-l) 60px var(--space-s) 80px; }
  .fact-slide          { padding-left: 80px; padding-right: 60px; grid-template-columns: 260px 1fr; }
}
@media (max-width: 768px) {
  .section-facts       { height: calc(100vh * 7); }
  .facts-headline-wrap { padding: var(--space-l) var(--space-l) var(--space-s); }
  .about-headline      { font-size: var(--text-title-m); line-height: var(--lh-title-m); }
  .fact-slide          { padding-left: var(--space-l); padding-right: var(--space-l); grid-template-columns: 120px 1fr; }
  .fact-slide-text     { font-size: var(--text-title-s); line-height: var(--lh-title-s); }
}

/* ─────────────────────────────────────────
   CASE DESC — bullet list reveal
───────────────────────────────────────── */
.case-desc {
  list-style: none;
  padding: 0;
}
.case-desc li {
  font-size: var(--text-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-text-main);
  padding-left: 14px;
  position: relative;
}
.case-desc li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent-main);
  font-size: 10px;
  top: 5px;
}
.case-desc li + li { margin-top: 4px; }

/* ─────────────────────────────────────────
   CLOSING / CONTACT CTA
───────────────────────────────────────── */
.section-closing {
  padding: var(--space-xxl) 0 var(--space-mega);
  background: var(--color-bg-main);
}

.closing-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
  width: 100%;
  max-width: none;
}

.closing-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
}

.closing-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-title-l);
  font-weight: 700;
  line-height: 50px;
  color: var(--color-text-main);
}

.closing-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  font-size: var(--text-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-text-main);
}

.closing-actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.contact-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 46px;
  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs);
  border: 1px solid var(--color-brand-25);
  border-radius: var(--radius-xs);
  background: var(--color-bg-main);
  color: var(--color-text-main);
  font-size: var(--text-btn-m);
  font-weight: 700;
  line-height: var(--lh-btn-m);
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.contact-action--email { width: 210px; }
.contact-action--linkedin { width: 194px; }
.contact-action--whatsapp { width: 230px; }

.contact-action img {
  flex-shrink: 0;
  object-fit: contain;
}

.contact-action--email img {
  width: 22px;
  height: 16px;
  margin: 6px 3px;
}

.contact-action--linkedin img,
.contact-action--whatsapp img {
  width: 20px;
  height: 20px;
  margin: 4px;
}

.contact-action span::after {
  display: none;
}

.contact-action:hover {
  background: var(--color-bg-secondary);
}

.contact-action:active {
  background: var(--color-clic-background);
}

.contact-action:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────
   SITE FOOTER
───────────────────────────────────────── */
.site-footer {
  min-height: 45px;
  background: var(--color-clic-background);
}

.site-footer__bottom {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 0 var(--space-s);
}

.home-page .site-footer__bottom,
.case-study-page .site-footer__bottom,
.article-page .site-footer__bottom {
  padding-left: calc(var(--sidenav-width) + var(--space-s));
}

.site-footer__copy,
.site-footer__credit {
  font-size: var(--text-cap-l);
  font-weight: var(--font-weight-body);
  line-height: var(--lh-cap-l);
  color: var(--color-text-main);
}

.site-footer__credit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin-left: auto;
  white-space: nowrap;
}

.site-footer__brand-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 19px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .site-footer {
    min-height: 62px;
  }

  .site-footer__bottom,
  .home-page .site-footer__bottom,
  .case-study-page .site-footer__bottom,
  .article-page .site-footer__bottom {
    min-height: 62px;
    padding: 10px 20px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }

  .site-footer__credit {
    margin-left: 0;
    gap: var(--space-xs);
  }

  .site-footer__brand-icon {
    width: 16px;
    height: 16px;
  }

  .site-footer__copy,
  .site-footer__credit {
    font-size: var(--text-cap-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-cap-m);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .case-study-page .site-footer__bottom,
  .article-page .site-footer__bottom {
    padding: 0 var(--space-s);
  }
}

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(0.7); }
}

.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.reveal.visible  { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ─────────────────────────────────────────
   CURSOR DOT
───────────────────────────────────────── */
.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--color-accent-secondary);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s var(--ease-out),
              opacity 0.2s var(--ease-out);
  transform: translate(-50%, -50%);
}
.cursor-dot.over-link {
  transform: translate(-50%, -50%) scale(4);
  opacity: 0.2;
}

/* ─────────────────────────────────────────
   RESPONSIVE ≤1499px — escala tipográfica
───────────────────────────────────────── */
@media (max-width: 1499px) {
  /* Header — isotipo vuelve al tamaño original */
  .isotipo {
    width: 88px;
    height: 88px;
  }

  /* Sidenav — conserva la columna fija y ajusta el offset interno al header más bajo */
  .site-sidenav {
    top: 0;
    padding-top: calc(136px + var(--space-m)); /* header: 88px isotipo + 2×24px padding */
  }

  /* Hero — ocupa las 12 columnas disponibles */
  .hero-content {
    max-width: none;
  }

  /* Hero — baja a title-xl para no ocupar 3 líneas */
  .hero-title {
    font-size: var(--text-title-xl);
    line-height: var(--lh-title-xl);
  }
  .hero-subtitle {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }
  .hero-location {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }
  .hero-scroll-hint {
    font-size: var(--text-cap-m);
    line-height: var(--lh-cap-m);
  }

  /* Secciones bajan 2 niveles (56→28px) para ampliar ratio vs hero (2:1) */
  .section-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }
  .about-headline {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }
  .closing-title {
    font-size: var(--text-title-l);
    line-height: 50px;
  }

  /* Body */
  .fact-slide-text {
    font-size: var(--text-body-l);
    line-height: var(--lh-body-l);
  }

  /* Selected work — misma escala intermedia que el resto de Home */
  .sw-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }
  .sw-case-title {
    font-size: var(--text-title-xs);
    line-height: var(--lh-title-xs);
  }
  .sw-body {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }
  /* About me — conserva el mismo salto tipográfico del resto de Home */
  .home-about-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }
  .home-about-copy {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }

  /* Articles — escala intermedia */
  .articles-header .sw-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }
  .articles-subtitle,
  .article-body {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }
  .article-title {
    font-size: var(--text-title-xs);
    line-height: var(--lh-title-xs);
  }

  /* Closing/contact — escala intermedia */
  .sw-title.closing-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }
  .closing-body {
    font-size: var(--text-body-l);
    line-height: var(--lh-body-l);
  }
  .section-closing .btn-contact__label {
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }
  .site-header .btn-contact__label {
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }
}

/* ═════════════════════════════════════════
   COMPONENTES DE UI — Sistema de diseño
   Alineados con Figma: Text link · Button · Button contact · Pill
   ═════════════════════════════════════════ */

/* ─────────────────────────────────────────
   PILL
   Variantes: main · alert · accent · secondary
───────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  white-space: nowrap;
  font-family: var(--font-body);
}

/* Primary variants — px-16 py-8, border-radius 32px, 16px regular, texto oscuro */
.pill--main    { background: #66CC99; padding: var(--space-xs) var(--space-s); border-radius: 32px; font-size: 16px; font-weight: 400; line-height: 20px; color: var(--color-bg-main); }
.pill--alert   { background: var(--color-alert);       padding: var(--space-xs) var(--space-s); border-radius: 32px; font-size: 16px; font-weight: 400; line-height: 20px; color: var(--color-bg-main); }
.pill--accent  { background: var(--color-accent-main); padding: var(--space-xs) var(--space-s); border-radius: 32px; font-size: 16px; font-weight: 400; line-height: 20px; color: var(--color-text-main); }

/* Secondary — p-8, border-radius 20px, 12.8px light, texto blanco */
.pill--secondary { background: var(--color-bg-secondary); padding: var(--space-xs); border-radius: 20px; font-size: 12.8px; font-weight: 400; line-height: 16px; color: var(--color-text-main); }

/* ─────────────────────────────────────────
   TEXT LINK
   Estados: idle · hover · active (sección actual) · clic
   — Underline siempre presente
   — Flecha → aparece en hover/clic con animación ease-in-out
   — Estado Place (sección activa): color secundario, sin flecha
───────────────────────────────────────── */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-btn-m);       /* 16px */
  line-height: var(--lh-btn-m);       /* 19px */
  color: var(--color-text-main);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-in-out);
  white-space: nowrap;
}

.text-link::after {
  content: ' →';
  display: inline-block;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition:
    opacity    var(--dur-mid) var(--ease-in-out),
    max-width  var(--dur-mid) var(--ease-in-out);
}

.text-link:hover::after,
.text-link:active::after {
  opacity: 1;
  max-width: 2em;
}

.text-link:active { color: var(--color-text-secondary); }

/* Estado Place — sección actual en el nav */
.text-link--place {
  color: var(--color-text-secondary);
  pointer-events: none;
}
.text-link--place::after { display: none; }


/* ─────────────────────────────────────────
   BUTTON
   Variantes: loud (filled) · mute (ghost)
   — Flecha → aparece en hover/clic
   — Loud: fondo Main-accent #7755DE
   — Mute: fondo transparente, texto Secondary-accent #A689FF
───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 0;
  font-family: var(--font-body);
  font-weight: 700;
  min-width: 180px;
  font-size: var(--text-btn-m);
  line-height: var(--lh-btn-m);
  padding: var(--space-ss) var(--space-s);
  border-radius: var(--radius-xs);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-in-out),
    color            var(--dur-micro) var(--ease-in-out),
    transform        var(--dur-micro) var(--ease-in-out);
}

.btn::after {
  content: '→';
  display: inline-block;
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  transition:
    opacity   var(--dur-mid) var(--ease-in-out),
    max-width var(--dur-mid) var(--ease-in-out),
    margin-left var(--dur-mid) var(--ease-in-out);
}

.btn:hover::after,
.btn:active::after {
  opacity: 1;
  max-width: 2em;
  margin-left: 8px;
}

/* Loud — filled */
.btn--loud {
  background: var(--color-accent-main);
  color: var(--color-text-main);
}
.btn--loud:hover  { background: var(--color-accent-main); transform: translateY(0); }
.btn--loud:active { background: var(--color-accent-clic); transform: translateY(0); }

/* Mute — ghost */
.btn--mute {
  background: var(--color-bg-main);
  color: var(--color-accent-secondary);
}
.btn--mute:hover  { background: var(--color-bg-secondary); transform: translateY(0); }
.btn--mute:active { background: var(--color-clic-background); color: var(--color-accent-main); transform: translateY(0); }

@media (max-width: 1499px) {
  .sw-project-button {
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }
}

/* ─────────────────────────────────────────
   BUTTON CONTACT — jerarquía especial
   — Borde 1px Main-brand 25%, border-radius 12px, altura fija 56px
   — Thumbnail foto 40×40px (border-radius 8px) + label
   — Flecha → aparece en hover/clic
───────────────────────────────────────── */
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);                /* 16px */
  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs);
  width: 223px;
  min-height: 56px;
  max-height: 56px;
  background: var(--color-bg-main);
  border: 1px solid var(--color-brand-25);
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-micro) var(--ease-in-out),
    transform        var(--dur-micro) var(--ease-in-out),
    opacity          var(--dur-mid)   var(--ease-in-out);
}

.btn-contact:hover  { background: var(--color-bg-secondary); transform: translateY(0); }
.btn-contact:active { background: var(--color-clic-background); transform: translateY(0); }

.btn-contact__thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.btn-contact__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.btn-contact__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-btn-l);       /* 18px */
  line-height: var(--lh-btn-l);       /* 22px */
  color: var(--color-text-main);
  white-space: nowrap;
  transition: letter-spacing var(--dur-mid) var(--ease-in-out);
}

.btn-contact__label::after {
  content: '→';
  display: inline;
  opacity: 0;
  margin-left: 0;
  transition:
    opacity var(--dur-mid) var(--ease-in-out),
    margin-left var(--dur-mid) var(--ease-in-out);
}

.mobile-menu-toggle,
.mobile-home-drawer {
  display: none;
}

.mobile-menu-dimmer {
  display: none;
}

.btn-contact:hover  .btn-contact__label::after,
.btn-contact:active .btn-contact__label::after {
  opacity: 1;
  margin-left: 8px;
}

@media (max-width: 1499px) {
  .section-closing .closing-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }

  .section-closing .closing-body {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }

  .section-closing .btn-contact__label,
  .section-closing .contact-action {
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }
}

@media (max-width: 1024px) {
  .home-page.is-mobile-menu-open {
    overflow: hidden;
  }

  .home-page .scroll-progress,
  .home-page .cursor-dot,
  .home-page .site-sidenav,
  .home-page .home-header > .btn-contact {
    display: none !important;
  }

  .home-header {
    position: fixed;
    z-index: 1001;
    height: 84px;
    padding: var(--space-ss) 39px var(--space-ss) 20px;
    background: var(--color-bg-main);
    border-bottom: 0;
  }

  .home-header.is-mobile-drawer-open {
    border-bottom-color: transparent;
  }

  .home-header .logotype {
    width: 68px;
    height: 60px;
  }

  .home-header .isotipo {
    width: 68px;
    height: 60px;
  }

  .mobile-menu-toggle {
    width: 28px;
    height: 28px;
    padding: 5px 4px 5.5px;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }

  .mobile-menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--color-text-main);
    transform-origin: center;
    transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7.75px) rotate(45deg);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7.75px) rotate(-45deg);
  }

  .mobile-home-drawer {
    position: fixed;
    top: 84px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-main);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
  }

  .mobile-home-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-home-drawer nav {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-xs);
  }

  .mobile-home-drawer nav a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 51px;
    padding: var(--space-s) var(--space-m);
    color: var(--color-text-main);
    font: 700 var(--text-btn-m)/var(--lh-btn-m) var(--font-body);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mobile-home-drawer nav a::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 0;
    background: var(--color-accent-main);
    opacity: 0;
    transition: height var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
  }

  .mobile-home-drawer nav a:hover::before,
  .mobile-home-drawer nav a:active::before {
    height: 100%;
    opacity: 0.16;
  }

  .mobile-home-drawer__contact {
    width: calc(100% - (var(--space-s) * 2));
    min-height: 48px;
    max-height: 48px;
    margin: var(--space-m) var(--space-s) 0;
    gap: var(--space-s);
    padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs);
    border-radius: var(--radius-xs);
  }

  .mobile-home-drawer__contact .btn-contact__thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
  }

  .mobile-home-drawer__contact .btn-contact__label {
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .mobile-home-drawer__contact .btn-contact__label::after {
    display: none;
  }

  .mobile-home-drawer__actions {
    margin-top: auto;
    padding: 0 var(--space-m) var(--space-l);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--space-m);
  }

  .mobile-home-drawer__actions .language-toggle {
    width: max-content;
    border-radius: var(--radius-s);
  }

  .mobile-home-drawer__actions .language-toggle__option {
    min-width: 54px;
    padding: var(--space-xxs) var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .mobile-home-drawer__footer {
    border-top: 1px solid var(--color-brand-25);
  }

  .mobile-home-drawer__footer small {
    display: block;
    padding: 10px 20px;
    color: var(--color-text-main);
    font-size: var(--text-cap-m);
    font-weight: 400;
    line-height: var(--lh-cap-m);
  }
}

/* ─────────────────────────────────────────
   HOME — Tablet implementation from Figma node 157:3128
───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .home-page {
    --grid-columns: 8;
    --grid-margin-left: var(--margin-tablet);
    --grid-margin-right: var(--margin-tablet);
    overflow-x: hidden;
  }

  .home-page .container {
    padding-right: var(--margin-tablet);
    padding-left: var(--margin-tablet);
  }

  .home-page .scroll-progress,
  .home-page .cursor-dot,
  .home-page .site-sidenav,
  .home-page .home-header > .btn-contact {
    display: none !important;
  }

  .home-header {
    position: fixed;
    z-index: 1001;
    height: 84px;
    padding: var(--space-ss) 39px var(--space-ss) 20px;
    background: var(--color-bg-main);
    border-bottom: 0;
  }

  .home-header .logotype,
  .home-header .isotipo {
    width: 68px;
    height: 60px;
  }

  .home-header.is-mobile-drawer-open {
    border-bottom-color: transparent;
  }

  .mobile-menu-toggle {
    width: 28px;
    height: 28px;
    padding: 5px 4px 5.5px;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }

  .mobile-menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--color-text-main);
    transform-origin: center;
    transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7.75px) rotate(45deg);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7.75px) rotate(-45deg);
  }

  .mobile-home-drawer {
    position: fixed;
    top: 84px;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1000;
    display: flex;
    width: 400px;
    max-width: 100vw;
    flex-direction: column;
    background: var(--color-bg-main);
    border-left: 1px solid var(--color-brand-25);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(400px);
    transition: transform 420ms cubic-bezier(0.47, 0.16, 0, 1), visibility 0s linear 420ms;
  }

  .mobile-home-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .mobile-home-drawer nav {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-xs);
  }

  .mobile-home-drawer nav a {
    position: relative;
    display: flex;
    min-height: 51px;
    align-items: center;
    padding: var(--space-s) var(--space-m);
    color: var(--color-text-main);
    font: 700 var(--text-btn-m)/var(--lh-btn-m) var(--font-body);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mobile-home-drawer__contact {
    width: calc(100% - (var(--space-s) * 2));
    min-height: 48px;
    max-height: 48px;
    margin: var(--space-m) var(--space-s) 0;
    justify-content: flex-start;
    gap: var(--space-s);
    padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs);
    border-radius: var(--radius-xs);
  }

  .mobile-home-drawer__contact .btn-contact__thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
  }

  .mobile-home-drawer__contact .btn-contact__label {
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .mobile-home-drawer__contact .btn-contact__label::after {
    display: none;
  }

  .mobile-home-drawer__actions {
    width: 100%;
    margin-top: auto;
    padding: 0 var(--space-m) var(--space-l);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--space-m);
  }

  .mobile-home-drawer__actions .language-toggle {
    width: max-content;
    border-radius: var(--radius-s);
  }

  .mobile-home-drawer__actions .language-toggle__option {
    min-width: 54px;
    padding: var(--space-xxs) var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .mobile-home-drawer__footer {
    border-top: 1px solid var(--color-brand-25);
  }

  .mobile-home-drawer__footer small {
    display: block;
    padding: 10px 20px;
    color: var(--color-text-main);
    font-size: var(--text-cap-m);
    font-weight: 400;
    line-height: var(--lh-cap-m);
  }

  .hero {
    min-height: 0;
    padding: var(--space-hero) var(--margin-tablet) var(--space-xxl);
    justify-content: flex-start;
    gap: var(--space-xl);
  }

  .hero-content {
    width: 100%;
    max-width: none;
    gap: var(--space-s);
  }

  .hero-location {
    gap: var(--space-xs);
    margin-bottom: var(--space-s);
    font-size: var(--text-body-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-m);
  }

  .hero-location-icon {
    width: 32px;
    height: 32px;
  }

  .hero-title {
    font-size: var(--text-title-xl);
    line-height: var(--lh-title-xl);
  }

  .hero-subtitle {
    font-size: var(--text-body-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-m);
  }

  .hero-scroll-hint {
    align-self: flex-start;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-nano);
    font-size: var(--text-body-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-m);
  }

  .hero-scroll-arrow {
    width: 12px;
    height: 12px;
  }

  .hero-scroll-arrow img {
    width: 10px;
    height: 5px;
  }

  .section-work {
    height: auto;
    padding: var(--space-xxl) 0;
  }

  .section-work .container,
  .section-home-about .container,
  .section-closing .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .sw-title,
  .home-about-title,
  .articles-header .sw-title,
  .closing-title,
  .sw-title.closing-title,
  .section-closing .closing-title {
    margin: 0;
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }

  .sw-list {
    min-height: 0;
  }

  .sw-item {
    gap: var(--space-xs);
  }

  .sw-content {
    gap: var(--space-m);
    padding-bottom: var(--space-l);
  }

  .sw-eyebrow {
    font-size: var(--text-cap-m);
    font-weight: 400;
    line-height: var(--lh-cap-m);
  }

  .sw-case-title {
    font-size: var(--text-title-xs);
    line-height: var(--lh-title-xs);
  }

  .sw-body {
    gap: var(--space-s);
    padding-bottom: var(--space-s);
    font-size: var(--text-body-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-m);
  }

  .pill--secondary {
    padding: var(--space-xxs) var(--space-ss);
    border-radius: var(--radius-s);
    font-size: var(--text-cap-s);
    font-weight: 400;
    line-height: var(--lh-cap-s);
  }

  .btn,
  .sw-project-button {
    min-width: 180px;
    padding: 12px var(--space-s);
    border-radius: var(--radius-xs);
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .section-home-about {
    min-height: 0;
    padding: var(--space-xxl) 0;
  }

  .home-about-layout {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-xs);
  }

  .home-about-image {
    flex: 0 0 213px;
    width: 213px;
    height: auto;
    align-self: stretch;
    border-radius: var(--radius-m);
  }

  .home-about-image img {
    width: 100%;
    height: 100%;
    object-position: 47% center;
    transform: none;
  }

  .home-about-content {
    gap: var(--space-l);
  }

  .home-about-copy {
    font-size: var(--text-body-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-m);
  }

  .home-about-copy p + p {
    margin-top: 14.4px;
  }

  .pill--accent {
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-l);
    font-size: var(--text-cap-l);
    line-height: var(--lh-cap-l);
  }

  .section-articles {
    height: auto;
    padding: var(--space-xxl) 0;
    overflow: visible;
  }

  .articles-scroll-sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    justify-content: flex-start;
    gap: var(--space-xl);
  }

  .articles-header {
    gap: var(--space-s);
  }

  .articles-subtitle {
    display: none;
  }

  .articles-scroll-track {
    flex-direction: row;
    gap: var(--space-hero);
    overflow-x: auto;
    padding-left: 0;
    padding-right: var(--margin-tablet);
    scroll-snap-type: x mandatory;
  }

  .articles-scroll-viewport {
    margin-left: var(--margin-tablet);
  }

  .article-item {
    width: 627px;
    flex: 0 0 627px;
    flex-direction: row;
    gap: var(--space-s);
  }

  .article-img {
    width: 227px;
    height: 227px;
    flex: 0 0 227px;
    border-radius: var(--radius-m);
  }

  .article-text {
    width: 384px;
    max-width: 384px;
    gap: var(--space-m);
  }

  .article-title {
    font-size: var(--text-title-xs);
    line-height: var(--lh-title-xs);
  }

  .article-body {
    font-size: var(--text-body-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-m);
  }

  .article-link {
    color: var(--color-accent-secondary);
  }

  .articles-track-spacer {
    display: block;
    flex: 0 0 max(1px, calc(100vw - var(--margin-tablet) - 627px));
  }

  .articles-carousel-controls {
    width: auto;
    margin-left: var(--margin-tablet);
  }

  .section-closing {
    padding: var(--space-xxl) 0 var(--space-mega);
  }

  .closing-inner {
    gap: var(--space-l);
    max-width: none;
  }

  .closing-header {
    gap: var(--space-s);
  }

  .section-closing .closing-body {
    gap: 14.4px;
    font-size: var(--text-body-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-m);
  }

  .closing-actions {
    flex-direction: row;
    gap: var(--space-s);
  }

  .section-closing .contact-action {
    min-height: 46px;
    padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs);
    border-radius: var(--radius-xs);
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .contact-action--email { width: 210px; }
  .contact-action--linkedin { width: 194px; }
  .contact-action--whatsapp { width: 230px; }

  .site-footer__bottom,
  .home-page .site-footer__bottom {
    min-height: 45px;
    padding: 0 var(--space-s);
  }
}

/* ─────────────────────────────────────────
   ERROR 404
───────────────────────────────────────── */
.error-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 45px;
  background: var(--color-bg-main);
}
.error-header {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-m);
  width: 100%;
}
.error-header .logotype {
  width: 100px;
  height: 88px;
}
.error-main {
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-xxl) var(--grid-margin-right) var(--space-xxl) var(--grid-margin-left);
}
.error-content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-ss);
}
.error-title {
  width: 225px;
  flex: 0 0 225px;
  margin: 0;
  font-size: 100px;
  line-height: 100px;
  font-weight: 100;
  color: var(--color-text-main);
}
.error-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}
.error-description {
  width: 100%;
  margin: 0;
  font-size: var(--text-body-l);
  font-weight: var(--font-weight-body);
  line-height: var(--lh-body-l);
  color: var(--color-text-main);
}
.error-description strong {
  font-weight: 700;
}
html[lang="es"] .error-description strong {
  font-weight: var(--font-weight-body);
}
.error-home {
  width: 200px;
  min-height: 43px;
  justify-content: center;
}
.error-footer {
  grid-row: 2;
}
.site-footer__item--disabled { cursor: default; }

/* ─────────────────────────────────────────
   PAGE UNDER WORK
───────────────────────────────────────── */
.under-work-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 140px minmax(0, 1fr) 45px;
  background: var(--color-bg-main);
}

.under-work-header {
  position: relative;
  grid-row: 1;
  padding: var(--space-m);
}

.under-work-header .logotype {
  width: 100px;
  height: 88px;
}

.under-work-main {
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--space-huge) var(--grid-margin-right) var(--space-huge) var(--grid-margin-left);
}

.under-work-copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-ss);
}

.under-work-title {
  width: 100%;
  flex: 0 0 auto;
  margin: 0;
  font-size: 100px;
  font-weight: 100;
  line-height: 100px;
  color: var(--color-text-main);
}

.under-work-message {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

.under-work-message p {
  width: 100%;
  margin: 0;
  font-size: var(--text-body-l);
  font-weight: var(--font-weight-body);
  line-height: var(--lh-body-l);
  color: var(--color-text-main);
}

.under-work-home {
  width: 200px;
  min-height: 43px;
  justify-content: center;
}

.under-work-footer {
  grid-row: 3;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .under-work-page {
    grid-template-rows: 84px minmax(0, 1fr) 45px;
  }

  .under-work-header {
    min-height: 84px;
    padding: 12px 39px 12px 20px;
  }

  .under-work-header .logotype {
    width: 68px;
    height: 60px;
  }

  .under-work-main {
    padding: var(--space-huge) var(--margin-tablet);
  }

  .under-work-title {
    width: 100%;
    flex-basis: auto;
    font-size: 80px;
    line-height: 80px;
  }

  .under-work-message p {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }
}

@media (max-width: 767px) {
  body.has-mobile-layout > .under-work-main {
    display: flex !important;
  }

  .under-work-page {
    display: grid;
    grid-template-rows: 84px minmax(0, 1fr) 62px;
  }

  .under-work-header {
    min-height: 84px;
    padding: 12px 39px 12px 20px;
  }

  .under-work-header .logotype {
    width: 68px;
    height: 60px;
  }

  .under-work-main {
    padding: var(--space-hero) var(--space-s);
    align-items: flex-start;
  }

  .under-work-copy {
    align-items: flex-start;
    gap: var(--space-s);
  }

  .under-work-title {
    min-width: 100%;
    width: min-content;
    flex: 0 0 auto;
    font-size: 55px;
    line-height: 55px;
  }

  html[lang="es"] .under-work-title {
    width: min-content;
    flex-basis: auto;
  }

  .under-work-message {
    width: 100%;
    gap: var(--space-s);
  }

  .under-work-message p {
    font-size: var(--text-body-s);
    line-height: var(--lh-body-s);
  }

  .under-work-home {
    width: 110px;
    min-height: 30px;
    padding: var(--space-xs) var(--space-s);
    font-size: var(--text-btn-s);
    line-height: var(--lh-btn-s);
  }
}

/* Temporary responsive page, based on Figma nodes 88:1212 and 88:1420 */
.mobile-construction { display: none; }

@media (max-width: 768px) {
  body:not(.home-page) > :not(.mobile-construction):not(script) { display: none !important; }
  body.has-mobile-layout > .site-header,
  body.has-mobile-layout > .mobile-home-drawer { display: flex !important; }
  body.has-mobile-layout > section,
  body.has-mobile-layout > main,
  body.has-mobile-layout > footer { display: block !important; }
  body.under-work-page.has-mobile-layout > .under-work-header { display: flex !important; }
  body.under-work-page.has-mobile-layout > .under-work-main { display: flex !important; }
  body.under-work-page.has-mobile-layout > .under-work-footer { display: block !important; }
  body.error-page.has-mobile-layout > .error-header { display: flex !important; }
  body.error-page.has-mobile-layout > .error-main { display: flex !important; }
  body.error-page.has-mobile-layout > .error-footer { display: block !important; }
  body.has-mobile-layout > .mobile-construction { display: none !important; }
  .mobile-construction {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--color-bg-main);
    color: var(--color-text-main);
  }
  .mobile-construction__header,
  .mobile-construction__drawer-header {
    width: 100%;
    height: 84px;
    padding: 12px 39px 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0;
  }
  .mobile-construction__header { position: relative; z-index: 1001; background: var(--color-bg-main); }
  .mobile-construction__logo { display: block; width: 68px; height: 60px; flex: 0 0 68px; }
  .mobile-construction__logo img { width: 100%; height: 100%; object-fit: contain; }
  .mobile-construction__menu { width: 28px; height: 28px; padding: 5px 4px 5.5px; border: 0; background: transparent; display: flex; flex-direction: column; justify-content: space-between; }
  .mobile-construction__menu span { width: 20px; height: 2px; background: white; transform-origin: center; transition: transform 280ms var(--ease-out), opacity 160ms var(--ease-out); }
  .mobile-construction.is-drawer-open .mobile-construction__menu span:nth-child(1) { transform: translateY(7.75px) rotate(45deg); }
  .mobile-construction.is-drawer-open .mobile-construction__menu span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .mobile-construction.is-drawer-open .mobile-construction__menu span:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); }
  .mobile-construction__content { min-height: 551px; padding: 160px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  .mobile-construction__content > div { display: flex; flex-direction: column; gap: 16px; }
  .mobile-construction__content h1 { margin: 0; font-size: 40px; line-height: 50px; }
  .mobile-construction__content p { margin: 0; font-size: 16px; line-height: 21.6px; }
  .mobile-construction__content .btn { width: 159px; justify-content: center; font-size: 16px; line-height: 22.4px; }
  .mobile-construction__footer { margin-top: auto; border-top: 1px solid var(--color-brand-25); }
  .mobile-construction__contacts { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
  .mobile-construction__contacts > * { display: flex; align-items: center; gap: 8px; color: white; font-size: 16px; font-weight: 700; }
  .mobile-construction__contacts b { border: 2px solid currentColor; font-size: 11px; line-height: 15px; width: 18px; height: 18px; text-align: center; }
  .mobile-construction__footer small { display: block; padding: 10px 20px; font-size: 12.8px; line-height: 16px; }
  .mobile-construction__drawer { position: fixed; z-index: 1000; top: 84px; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; min-height: 726px; background: var(--color-bg-main); border-bottom: 1px solid var(--color-brand-25); transform: translateY(-100%); visibility: hidden; pointer-events: none; transition: transform 320ms var(--ease-out), visibility 0s linear 320ms; }
  .mobile-construction__drawer.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .mobile-construction__drawer-header { display: none; }
  .mobile-construction__close { position: relative; width: 28px; height: 28px; border: 0; background: transparent; }
  .mobile-construction__close::before,.mobile-construction__close::after { content: ''; position: absolute; left: 4px; top: 13px; width: 20px; height: 2px; background: white; }
  .mobile-construction__close::before { transform: rotate(45deg); }
  .mobile-construction__close::after { transform: rotate(-45deg); }
  .mobile-construction__drawer nav { display: flex; flex-direction: column; flex: 0 0 auto; padding-top: 24px; }
  .mobile-construction__drawer nav a { padding: 24px; color: white; font-size: 20px; line-height: 28px; font-weight: 700; text-decoration: underline; }
  .mobile-construction__actions { min-height: 168px; margin-top: auto; padding: 0 24px 48px; display: flex; flex-direction: column; justify-content: flex-end; gap: 32px; border-bottom: 1px solid var(--color-brand-25); }
  .mobile-construction__actions .language-toggle { width: max-content; align-self: flex-start; }
  .mobile-construction__actions .btn-contact { width: 100%; }
}

/* ─────────────────────────────────────────
   HOME — Mobile implementation from Figma node 127:1370
───────────────────────────────────────── */
@media (max-width: 767px) {
  .home-page {
    overflow-x: hidden;
  }

  .home-page.is-mobile-menu-open {
    overflow: hidden;
  }

  .home-page .scroll-progress,
  .home-page .cursor-dot,
  .home-page .site-sidenav,
  .home-page .home-header > .btn-contact {
    display: none !important;
  }

  .home-page .container {
    padding: 0 var(--margin-mobile);
  }

  .home-header {
    position: fixed;
    z-index: 1001;
    height: 84px;
    padding: var(--space-ss) 39px var(--space-ss) 20px;
    background: var(--color-bg-main);
    border-bottom: 0;
  }

  .home-header.is-mobile-drawer-open {
    border-bottom-color: transparent;
  }

  .home-header .logotype {
    width: 68px;
    height: 60px;
  }

  .home-header .isotipo {
    width: 68px;
    height: 60px;
  }

  .mobile-menu-toggle {
    width: 28px;
    height: 28px;
    padding: 5px 4px 5.5px;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }

  .mobile-menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--color-text-main);
    transform-origin: center;
    transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7.75px) rotate(45deg);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7.75px) rotate(-45deg);
  }

  .mobile-home-drawer {
    position: fixed;
    top: 84px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-main);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
  }

  .mobile-home-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-home-drawer nav {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-xs);
  }

  .mobile-home-drawer nav a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 51px;
    padding: var(--space-s) var(--space-m);
    color: var(--color-text-main);
    font: 700 var(--text-btn-m)/var(--lh-btn-m) var(--font-body);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mobile-home-drawer nav a::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 0;
    background: var(--color-accent-main);
    opacity: 0;
    transition: height var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
  }

  .mobile-home-drawer nav a:hover::before,
  .mobile-home-drawer nav a:active::before {
    height: 100%;
    opacity: 0.16;
  }

  .mobile-home-drawer__contact {
    width: calc(100% - (var(--space-s) * 2));
    min-height: 48px;
    max-height: 48px;
    margin: var(--space-m) var(--space-s) 0;
    gap: var(--space-s);
    padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs);
    border-radius: var(--radius-xs);
  }

  .mobile-home-drawer__contact .btn-contact__thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
  }

  .mobile-home-drawer__contact .btn-contact__label {
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .mobile-home-drawer__contact .btn-contact__label::after {
    display: none;
  }

  .mobile-home-drawer__actions {
    margin-top: auto;
    padding: 0 var(--space-m) var(--space-l);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--space-m);
  }

  .mobile-home-drawer__actions .language-toggle {
    width: max-content;
    border-radius: var(--radius-s);
  }

  .mobile-home-drawer__actions .language-toggle__option {
    min-width: 54px;
    padding: var(--space-xxs) var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .mobile-home-drawer__footer {
    border-top: 1px solid var(--color-brand-25);
  }

  .mobile-home-drawer__footer small {
    display: block;
    padding: 10px 20px;
    color: var(--color-text-main);
    font-size: var(--text-cap-m);
    font-weight: 400;
    line-height: var(--lh-cap-m);
  }

  .hero {
    min-height: 0;
    padding: calc(84px + var(--space-mega)) var(--margin-mobile) var(--space-xxl);
    gap: var(--space-xxl);
    justify-content: flex-start;
  }

  .hero-content {
    width: 100%;
    max-width: none;
    gap: var(--space-m);
  }

  .hero-location {
    gap: var(--space-xs);
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .hero-location-icon {
    width: 20px;
    height: 20px;
  }

  .hero-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }

  .hero-title-accent {
    display: inline;
  }

  .hero-title-line,
  .hero-title-line > span {
    display: inline;
    overflow: visible;
  }

  .hero-subtitle {
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .hero-scroll-hint {
    align-self: flex-start;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-nano);
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .hero-scroll-arrow {
    width: 12px;
    height: 12px;
  }

  .hero-scroll-arrow img {
    width: 10px;
    height: 5px;
  }

  .section-work,
  .section-home-about,
  .section-articles,
  .section-closing {
    padding: var(--space-xxl) 0;
  }

  .section-work .container,
  .section-home-about .container,
  .section-closing .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .sw-title,
  .home-about-title,
  .articles-header .sw-title,
  .closing-title,
  .sw-title.closing-title,
  .section-closing .closing-title {
    margin: 0;
    font-size: var(--text-title-s);
    line-height: var(--lh-title-s);
  }

  .sw-list {
    min-height: 0;
  }

  .sw-item {
    gap: var(--space-xs);
  }

  .sw-timeline {
    width: 20px;
  }

  .sw-diamond {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    background: var(--color-brand);
  }

  .sw-item.is-active .sw-diamond {
    background: var(--color-accent-secondary);
  }

  .sw-line {
    margin: 4px 0 0;
  }

  .sw-content {
    gap: var(--space-m);
    padding-bottom: var(--space-l);
  }

  .sw-header {
    gap: var(--space-xs);
  }

  .sw-eyebrow {
    font-size: var(--text-cap-s);
    font-weight: 400;
    line-height: var(--lh-cap-s);
  }

  .sw-case-title {
    font-size: var(--text-title-xs);
    line-height: var(--lh-title-xs);
  }

  .sw-chevron {
    width: 36px;
    height: 36px;
  }

  .sw-chevron img {
    display: none;
  }

  .sw-body {
    gap: var(--space-s);
    padding-bottom: var(--space-s);
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .sw-body ul {
    padding-left: 18px;
  }

  .sw-highlight {
    font-weight: 400;
  }

  .pill--secondary {
    padding: var(--space-xxs) var(--space-ss);
    border-radius: var(--radius-s);
    font-size: var(--text-cap-s);
    font-weight: 400;
    line-height: var(--lh-cap-s);
  }

  .btn,
  .sw-project-button {
    min-width: 110px;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-xs);
    font-size: var(--text-btn-s);
    line-height: var(--lh-btn-s);
  }

  .home-about-layout {
    gap: var(--space-m);
  }

  .home-about-image {
    flex: 0 0 227px;
    width: 227px;
    height: 227px;
    border-radius: var(--radius-m);
  }

  .home-about-image img {
    width: 503px;
    height: 697px;
    transform: translate(-140px, -157px);
  }

  .home-about-content,
  .home-about-copy {
    gap: var(--space-s);
  }

  .home-about-copy {
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .home-about-copy p + p {
    margin-top: var(--space-ss);
  }

  .pill--accent {
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-l);
    font-size: var(--text-cap-m);
    line-height: var(--lh-cap-m);
  }

  .section-articles {
    height: auto;
    overflow: visible;
  }

  .articles-scroll-sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    justify-content: flex-start;
    gap: var(--space-m);
  }

  .articles-header {
    gap: 0;
  }

  .articles-subtitle {
    display: none;
  }

  .articles-scroll-track {
    flex-direction: row;
    gap: var(--space-xxl);
    overflow-x: auto;
    padding-left: 0;
    padding-right: var(--margin-mobile);
    scroll-snap-type: x mandatory;
  }

  .articles-scroll-viewport {
    margin-left: var(--margin-mobile);
  }

  .article-item {
    width: 227px;
    flex: 0 0 227px;
    flex-direction: column;
    gap: var(--space-s);
  }

  .article-img {
    width: 227px;
    height: 227px;
    flex-basis: 227px;
    border-radius: var(--radius-m);
  }

  .article-text {
    width: 100%;
    max-width: none;
    gap: var(--space-m);
  }

  .article-title {
    font-size: var(--text-title-xs);
    line-height: var(--lh-title-xs);
  }

  .article-body {
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .article-link {
    margin-left: 0;
    color: var(--color-accent-secondary);
  }

  .articles-track-spacer {
    display: block;
    flex: 0 0 max(1px, calc(100vw - var(--margin-mobile) - 227px));
  }

  .articles-carousel-controls {
    display: none;
  }

  .closing-inner {
    gap: var(--space-m);
    max-width: none;
  }

  .closing-header {
    gap: var(--space-m);
  }

  .section-closing .closing-body {
    gap: var(--space-ss);
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .closing-actions {
    flex-direction: column;
    gap: var(--space-s);
  }

  .section-closing .contact-action {
    min-height: 38px;
    padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs);
    border-radius: var(--radius-xs);
    font-size: var(--text-btn-s);
    line-height: var(--lh-btn-s);
  }

  .contact-action--email { width: 175px; }
  .contact-action--linkedin { width: 165px; }
  .contact-action--whatsapp { width: 185px; }

  .contact-action--email img,
  .contact-action--linkedin img,
  .contact-action--whatsapp img {
    width: 20px;
    height: 20px;
    margin: 0;
  }

  .site-footer__bottom {
    min-height: 62px;
    padding: 10px 20px;
  }

  .site-footer__copy,
  .site-footer__credit {
    font-size: var(--text-cap-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-cap-m);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-construction__drawer { transition: none; }
  .mobile-construction__menu span { transition: none; }
}

/* Mobile menu motion — Figma node 4450:2168 */
@media (max-width: 767px) {
  .home-header .mobile-menu-toggle {
    position: relative;
    z-index: 1002;
    display: block;
  }

  .home-header .mobile-menu-toggle span {
    position: absolute;
    left: 4px;
    width: 20px;
    height: 2.429px;
    transform-origin: 0 50%;
    transition:
      width 500ms cubic-bezier(0.5, 0, 0.5, 1),
      transform 500ms cubic-bezier(0.5, 0, 0.5, 1),
      opacity 500ms cubic-bezier(0.5, 0, 0.5, 1);
  }

  .home-header .mobile-menu-toggle span:nth-child(1) { top: 5px; }
  .home-header .mobile-menu-toggle span:nth-child(2) { top: 12.29px; }
  .home-header .mobile-menu-toggle span:nth-child(3) { top: 19.57px; }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(1) {
    width: 28.001px;
    transform: translateY(-1.214px) rotate(45deg);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(3) {
    width: 28.019px;
    transform: translateY(3.864px) rotate(-45deg);
  }

  body.home-page > .mobile-home-drawer {
    opacity: 0;
    transform: translateY(-200px);
    transition:
      opacity 500ms cubic-bezier(0.5, 0, 0.5, 1),
      transform 500ms cubic-bezier(0.8, 0, 1, 1),
      visibility 0s linear 500ms;
  }

  body.home-page > .mobile-home-drawer > * {
    opacity: 0;
    transition: opacity 500ms cubic-bezier(0.5, 0, 0.5, 1);
  }

  body.home-page > .mobile-home-drawer.is-open {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 500ms linear,
      transform 500ms cubic-bezier(0, 0, 0.2, 1),
      visibility 0s linear 0s;
  }

  body.home-page > .mobile-home-drawer.is-open > * {
    opacity: 1;
    transition: opacity 500ms cubic-bezier(0.002, 0, 0.2, 1);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .home-header .mobile-menu-toggle span,
  body.home-page > .mobile-home-drawer,
  body.home-page > .mobile-home-drawer > * {
    transition: none;
  }
}

/* Internal-page mobile menu — shared motion from Figma node 4450:2168. */
@media (max-width: 767px) {
  body.has-mobile-layout:is(.case-study-page, .article-page) .cs-topbar .mobile-menu-toggle {
    position: relative;
    z-index: 1002;
    display: block;
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) .cs-topbar .mobile-menu-toggle span {
    position: absolute;
    left: 4px;
    width: 20px;
    height: 2.429px;
    transform-origin: 0 50%;
    transition:
      width 500ms cubic-bezier(0.5, 0, 0.5, 1),
      transform 500ms cubic-bezier(0.5, 0, 0.5, 1),
      opacity 500ms cubic-bezier(0.5, 0, 0.5, 1);
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) .cs-topbar .mobile-menu-toggle span:nth-child(1) { top: 5px; }
  body.has-mobile-layout:is(.case-study-page, .article-page) .cs-topbar .mobile-menu-toggle span:nth-child(2) { top: 12.29px; }
  body.has-mobile-layout:is(.case-study-page, .article-page) .cs-topbar .mobile-menu-toggle span:nth-child(3) { top: 19.57px; }

  body.has-mobile-layout:is(.case-study-page, .article-page) .cs-topbar.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(1) {
    width: 28.001px;
    transform: translateY(-1.214px) rotate(45deg);
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) .cs-topbar.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) .cs-topbar.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(3) {
    width: 28.019px;
    transform: translateY(3.864px) rotate(-45deg);
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) > .internal-mobile-drawer {
    display: flex !important;
    top: 84px;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
    opacity: 0;
    transform: translateY(-200px);
    transition:
      opacity 500ms cubic-bezier(0.5, 0, 0.5, 1),
      transform 500ms cubic-bezier(0.8, 0, 1, 1),
      visibility 0s linear 500ms;
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) > .internal-mobile-drawer > * {
    opacity: 0;
    transition: opacity 500ms cubic-bezier(0.5, 0, 0.5, 1);
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) > .internal-mobile-drawer.is-open {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 500ms linear,
      transform 500ms cubic-bezier(0, 0, 0.2, 1),
      visibility 0s linear 0s;
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) > .internal-mobile-drawer.is-open > * {
    opacity: 1;
    transition: opacity 500ms cubic-bezier(0.002, 0, 0.2, 1);
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) > .internal-mobile-drawer .mobile-home-drawer__footer {
    min-height: 62px;
    gap: 10px;
    padding: 10px 20px;
    border-top: 0;
  }

  body.has-mobile-layout:is(.case-study-page, .article-page) > .internal-mobile-drawer .mobile-home-drawer__footer small.mobile-home-drawer__copy {
    padding: 0;
    font-weight: var(--font-weight-body);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.has-mobile-layout:is(.case-study-page, .article-page) .cs-topbar .mobile-menu-toggle span,
  body.has-mobile-layout:is(.case-study-page, .article-page) > .internal-mobile-drawer,
  body.has-mobile-layout:is(.case-study-page, .article-page) > .internal-mobile-drawer > * {
    transition: none;
  }
}

/* Home tablet menu — opening motion from Figma node 213:2411 */
@media (min-width: 768px) and (max-width: 1024px) {
  .home-header .mobile-menu-toggle {
    position: relative;
    z-index: 1002;
    display: block;
  }

  .home-header .mobile-menu-toggle span {
    position: absolute;
    left: 4px;
    width: 20px;
    height: 2.429px;
    transform-origin: 0 50%;
    transition:
      width 500ms cubic-bezier(0.5, 0, 0.5, 1),
      transform 500ms cubic-bezier(0.5, 0, 0.5, 1),
      opacity 500ms cubic-bezier(0.5, 0, 0.5, 1);
  }

  .home-header .mobile-menu-toggle span:nth-child(1) { top: 5px; }
  .home-header .mobile-menu-toggle span:nth-child(2) { top: 12.29px; }
  .home-header .mobile-menu-toggle span:nth-child(3) { top: 19.57px; }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(1) {
    width: 28.001px;
    transform: translateY(-1.214px) rotate(45deg);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }

  .home-header.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(3) {
    width: 28.019px;
    transform: translateY(3.864px) rotate(-45deg);
  }

  body.home-page > .mobile-home-drawer {
    top: 3px;
    border-left: 0;
    opacity: 0;
    transform: translateX(400px);
    box-shadow: -2px 2px 4px rgba(42, 46, 47, 0.1);
    transition:
      opacity 500ms cubic-bezier(0.5, 0, 0.5, 1),
      transform 500ms cubic-bezier(0, 0, 0.2, 1),
      visibility 0s linear 500ms;
  }

  body.home-page > .mobile-home-drawer.is-open {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
  }

  body.home-page > .mobile-home-drawer nav {
    padding-top: calc(84px + var(--space-xs));
  }

  body.home-page > .mobile-menu-dimmer {
    position: fixed;
    z-index: 999;
    inset: 0;
    display: block;
    background: var(--color-clic-background);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 500ms cubic-bezier(0.5, 0, 0.5, 1),
      visibility 0s linear 500ms;
  }

  body.home-page.is-mobile-menu-open > .mobile-menu-dimmer {
    opacity: 0.8;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .home-header .mobile-menu-toggle span,
  body.home-page > .mobile-home-drawer,
  body.home-page > .mobile-menu-dimmer {
    transition: none;
  }
}

/* Mobile drawer footer — shared footer pattern from the Figma reference */
@media (max-width: 1024px) {
  .mobile-home-drawer__footer {
    display: flex;
    min-height: 62px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 20px;
    border-top: 0;
    background: var(--color-clic-background);
  }

  .mobile-home-drawer__footer small.mobile-home-drawer__copy {
    display: block;
    padding: 0;
    color: #bfb7c5;
    font-size: var(--text-cap-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-cap-m);
  }

  .mobile-home-drawer__credit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: #bfb7c5;
    font-size: var(--text-cap-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-cap-m);
    white-space: nowrap;
  }

  .mobile-home-drawer__credit .site-footer__brand-icon {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 1024px) {
  .error-page {
    grid-template-rows: minmax(0, 1fr) 45px;
  }

  .error-header {
    min-height: 84px;
    padding: 12px 39px 12px 20px;
  }

  .error-header .logotype {
    width: 68px;
    height: 60px;
  }

  .error-main {
    padding: var(--space-xxl) var(--margin-tablet);
  }

  .error-content {
    gap: var(--space-s);
  }

  .error-title {
    width: 209px;
    flex-basis: 209px;
    font-size: 80px;
    line-height: 80px;
  }

  .error-description {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }
}

@media (max-width: 767px) {
  body.error-page.has-mobile-layout > .error-header { display: flex !important; }
  body.error-page.has-mobile-layout > .error-main { display: flex !important; }
  body.error-page.has-mobile-layout > .error-footer { display: block !important; }

  .error-page {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 62px;
  }

  .error-header {
    min-height: 84px;
    padding: 12px 39px 12px 20px;
  }

  .error-main {
    padding: 0 var(--space-s);
    align-items: center;
  }

  .error-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }

  .error-title {
    min-width: 100%;
    width: min-content;
    flex: 0 0 auto;
    font-size: 80px;
    line-height: 80px;
  }

  .error-copy {
    width: 100%;
    gap: var(--space-s);
  }

  .error-description {
    min-width: 100%;
    width: min-content;
    font-size: var(--text-body-s);
    line-height: var(--lh-body-s);
  }

  .error-home {
    width: 110px;
    min-height: 30px;
    padding: var(--space-xs) var(--space-s);
    font-size: var(--text-btn-s);
    line-height: var(--lh-btn-s);
  }
}

@media (max-width: 480px) {
  .error-description {
    max-width: none;
  }
}