/* Article pages */
.article-page {
  background: var(--color-bg-main);
}

.article-main {
  padding: var(--space-xxl) var(--grid-margin-right) var(--space-xl) var(--grid-margin-left);
}

.article-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.article-heading {
  --article-heading-gap: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--article-heading-gap);
}

.article-page-title {
  margin: 0;
  color: var(--color-text-main);
  font: 700 var(--text-title-xl)/var(--lh-title-xl) var(--font-title);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
  color: var(--color-text-main);
}

.article-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-cap-l);
  font-weight: 300;
  line-height: var(--lh-cap-l);
  white-space: nowrap;
}

.article-meta__item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.article-meta__divider {
  width: 1px;
  height: 24px;
  background: var(--color-brand-25);
}

.article-summary {
  display: grid;
  grid-template-columns: 1px 1fr;
  gap: var(--space-s);
  align-items: center;
}

.article-summary::before {
  content: '';
  display: block;
  width: 1px;
  height: 54px;
  background: var(--color-brand-25);
}

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

.article-tags {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.article-hero-image {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.article-hero-image__media {
  display: block;
  width: 100%;
  aspect-ratio: 1860 / 800;
}

.article-hero-image__media--mobile {
  display: none;
}

.article-collage__caption {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-cap-l);
  font-weight: 300;
  line-height: var(--lh-cap-l);
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  color: var(--color-text-main);
}

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

.article-prose p {
  margin: 0 0 18px;
}

.article-prose p:last-child {
  margin-bottom: 0;
}

.article-prose ul {
  margin: 0 0 18px;
  padding-left: 30px;
}

.article-prose li + li {
  margin-top: var(--space-xxs);
}

.article-divider {
  width: 100%;
  height: 1px;
  background: var(--color-brand-25);
}

.article-section-title {
  margin: 0;
  color: var(--color-text-main);
  font: 700 var(--text-title-l)/var(--lh-title-l) var(--font-title);
}

.article-highlight {
  color: #66CC99;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-closing {
  padding: var(--space-xl) var(--grid-margin-right) var(--space-mega) var(--grid-margin-left);
}

.article-closing .container {
  padding: 0;
}

@media (max-width: 1499px) {
  .article-page-title {
    font-size: var(--text-title-l);
    line-height: var(--lh-title-l);
  }

  .article-meta__item,
  .article-collage__caption {
    font-size: var(--text-cap-m);
    line-height: var(--lh-cap-m);
  }

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

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

  .article-prose p,
  .article-prose ul {
    margin-bottom: var(--space-ss);
  }

  .article-body {
    gap: var(--space-l);
  }
}

/* Article desktop keeps the Figma editorial metadata scale through 1025–1499px. */
@media (min-width: 1025px) and (max-width: 1499px) {
  .article-meta__item,
  .article-collage__caption {
    font-size: var(--text-cap-l);
    line-height: var(--lh-cap-l);
  }

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

  .article-body {
    gap: var(--space-xl);
  }
}

@media (max-width: 1024px) {
  .article-main,
  .article-closing {
    padding-left: 80px;
    padding-right: 60px;
  }

}

@media (max-width: 1024px) {
  .article-page.has-mobile-layout {
    overflow-x: hidden;
  }

  .article-page.has-mobile-layout.is-mobile-menu-open {
    overflow: hidden;
  }

  .article-page.has-mobile-layout .scroll-progress,
  .article-page.has-mobile-layout .cursor-dot,
  .article-page.has-mobile-layout .site-sidenav,
  .article-page.has-mobile-layout .cs-topbar > .btn-contact {
    display: none !important;
  }

  .article-page.has-mobile-layout .cs-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1001;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    padding: var(--space-ss) 39px var(--space-ss) 20px;
    background: var(--color-bg-main);
    border-bottom: 0;
  }

  .article-page.has-mobile-layout .cs-topbar.is-mobile-drawer-open {
    border-bottom-color: transparent;
  }

  .article-page.has-mobile-layout .cs-topbar.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7.75px) rotate(45deg);
  }

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

  .article-page.has-mobile-layout .cs-topbar.is-mobile-drawer-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7.75px) rotate(-45deg);
  }

  .article-page.has-mobile-layout .cs-topbar .logotype,
  .article-page.has-mobile-layout .cs-topbar .isotipo {
    width: 68px;
    height: 60px;
  }

  .article-page.has-mobile-layout .cs-topbar .mobile-menu-toggle,
  .article-page.has-mobile-layout .internal-mobile-drawer {
    display: flex;
  }

  .article-page.has-mobile-layout .cs-topbar .mobile-menu-toggle {
    width: 28px;
    height: 28px;
    padding: 5px 4px 5.5px;
    border: 0;
    background: transparent;
    flex-direction: column;
    justify-content: space-between;
  }

  .article-page.has-mobile-layout .cs-topbar .mobile-menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--color-text-main);
    transform-origin: center;
  }

  .article-page.has-mobile-layout .internal-mobile-drawer {
    top: 84px;
    min-height: 0;
    padding: var(--space-xs) 0 var(--space-l);
    border-bottom: 0;
  }

  .article-page.has-mobile-layout .internal-mobile-drawer nav {
    width: 100%;
    padding-top: 0;
  }

  .article-page.has-mobile-layout .internal-mobile-drawer nav a {
    min-height: 51px;
    padding: var(--space-s) var(--space-m);
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .article-page.has-mobile-layout .internal-mobile-drawer .mobile-home-drawer__contact {
    width: calc(100% - (var(--space-s) * 2));
    min-width: 0;
    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: 1px solid var(--color-brand-25);
    border-radius: var(--radius-xs);
  }

  .article-page.has-mobile-layout .internal-mobile-drawer .mobile-home-drawer__contact .btn-contact__thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
  }

  .article-page.has-mobile-layout .internal-mobile-drawer .mobile-home-drawer__contact .btn-contact__label {
    font-size: var(--text-btn-m);
    line-height: var(--lh-btn-m);
  }

  .article-page.has-mobile-layout .internal-mobile-drawer .mobile-home-drawer__actions {
    width: 100%;
    margin-top: auto;
    padding: 0 var(--space-m) var(--space-l);
    gap: var(--space-m);
    border-bottom: 0;
  }

  .article-page.has-mobile-layout .internal-mobile-drawer .language-toggle {
    width: max-content;
    border-radius: var(--radius-s);
  }

  .article-page.has-mobile-layout .internal-mobile-drawer .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);
  }

  body.article-page.has-mobile-layout > .article-main {
    display: block !important;
  }

  .article-page.has-mobile-layout .article-main {
    padding: calc(84px + var(--space-l)) var(--margin-mobile) var(--space-l);
  }

  .article-page.has-mobile-layout .article-shell {
    max-width: none;
    gap: var(--space-l);
  }

  .article-page.has-mobile-layout .article-heading {
    gap: var(--space-m);
  }

  .article-page.has-mobile-layout .article-page-title {
    font-size: var(--text-title-s);
    line-height: var(--lh-title-s);
  }

  .article-page.has-mobile-layout .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .article-page.has-mobile-layout .article-meta__divider {
    display: none;
  }

  .article-page.has-mobile-layout .article-meta__item {
    width: 100%;
    gap: var(--space-xs);
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
    white-space: normal;
  }

  .article-page.has-mobile-layout .article-meta__item img {
    width: 20px;
    height: 20px;
  }

  .article-page.has-mobile-layout .article-summary {
    grid-template-columns: 0 1fr;
    gap: var(--space-s);
  }

  .article-page.has-mobile-layout .article-summary::before {
    height: 54px;
  }

  .article-page.has-mobile-layout .article-summary p {
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .article-page.has-mobile-layout .article-tags {
    gap: var(--space-xs);
  }

  .article-page.has-mobile-layout .article-tags .pill {
    padding: var(--space-xxs) var(--space-ss);
    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);
  }

  .article-page.has-mobile-layout .article-hero-image {
    gap: var(--space-xs);
    width: 100%;
  }

  .article-page.has-mobile-layout .article-hero-image__media {
    width: 100%;
    aspect-ratio: 656 / 1260;
  }

  .article-page.has-mobile-layout .article-hero-image__media--desktop {
    display: none;
  }

  .article-page.has-mobile-layout .article-hero-image__media--mobile {
    display: block;
  }

  .article-page.has-mobile-layout .article-collage__caption {
    font-size: var(--text-cap-s);
    font-weight: 400;
    line-height: var(--lh-cap-s);
    color: var(--color-text-secondary);
  }

  .article-page.has-mobile-layout .article-body {
    gap: var(--space-l);
    padding: var(--space-l) 0 0;
  }

  .article-page.has-mobile-layout .article-prose,
  .article-page.has-mobile-layout .article-prose p,
  .article-page.has-mobile-layout .article-prose li {
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .article-page.has-mobile-layout .article-prose p,
  .article-page.has-mobile-layout .article-prose ul {
    margin-bottom: var(--space-ss);
  }

  .article-page.has-mobile-layout .article-prose ul {
    padding-left: 18px;
  }

  .article-page.has-mobile-layout .article-prose li + li {
    margin-top: var(--space-nano);
  }

  .article-page.has-mobile-layout .article-section-title {
    font-size: var(--text-title-xs);
    line-height: var(--lh-title-xs);
  }

  .article-page.has-mobile-layout .article-closing {
    display: block !important;
    padding: var(--space-xl) var(--margin-mobile);
    background: var(--color-bg-main);
  }

  .article-page.has-mobile-layout .article-closing .container {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .article-page.has-mobile-layout .article-closing .closing-inner {
    width: 100%;
    max-width: none;
    gap: var(--space-m);
  }

  .article-page.has-mobile-layout .article-closing .closing-header {
    width: 100%;
    gap: var(--space-m);
  }

  .article-page.has-mobile-layout .article-closing .closing-title {
    margin: 0;
    font-size: var(--text-title-s);
    line-height: var(--lh-title-s);
  }

  .article-page.has-mobile-layout .article-closing .closing-body {
    width: 100%;
    gap: var(--space-ss);
    font-size: var(--text-body-s);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body-s);
  }

  .article-page.has-mobile-layout .article-closing .closing-body p {
    margin: 0;
  }

  .article-page.has-mobile-layout .article-closing .closing-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }

  .article-page.has-mobile-layout .article-closing .contact-action {
    min-height: 38px;
    gap: var(--space-xs);
    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);
  }

  .article-page.has-mobile-layout .article-closing .contact-action--email {
    width: 175px;
  }

  .article-page.has-mobile-layout .article-closing .contact-action--linkedin {
    width: 165px;
  }

  .article-page.has-mobile-layout .article-closing .contact-action--whatsapp {
    width: 185px;
  }

  .article-page.has-mobile-layout .article-closing .contact-action img {
    width: 20px;
    height: 20px;
    margin: 0;
  }

  .article-page.has-mobile-layout .article-closing .contact-action span::after {
    content: "";
  }

  .article-page.has-mobile-layout > .site-footer {
    display: block !important;
  }

}

/* Keep the article footer on the shared mobile footer pattern. */
@media (max-width: 767px) {
  .article-page.has-mobile-layout > .site-footer {
    min-height: 62px;
    background: var(--color-clic-background);
  }

  .article-page.has-mobile-layout > .site-footer .site-footer__bottom {
    min-height: 62px;
    padding: 10px 20px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }

  .article-page.has-mobile-layout > .site-footer .site-footer__copy,
  .article-page.has-mobile-layout > .site-footer .site-footer__credit {
    font-size: var(--text-cap-m);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-cap-m);
  }

  .article-page.has-mobile-layout > .site-footer .site-footer__credit {
    margin-left: 0;
    gap: var(--space-xs);
  }

  .article-page.has-mobile-layout > .site-footer .site-footer__brand-icon {
    width: 16px;
    height: 16px;
  }
}

/* Tablet follows the shared 768–1024px layout instead of inheriting mobile-only rules. */
@media (min-width: 768px) and (max-width: 1024px) {
  .article-page.has-mobile-layout .article-main {
    padding: calc(84px + var(--space-xxl)) 60px var(--space-xl) var(--margin-tablet);
  }

  .article-page.has-mobile-layout .article-shell {
    gap: var(--space-xl);
  }

  .article-page.has-mobile-layout .article-heading {
    gap: var(--space-s);
  }

  .article-page.has-mobile-layout .article-page-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }

  .article-page.has-mobile-layout .article-meta {
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
  }

  .article-page.has-mobile-layout .article-meta__divider {
    display: block;
  }

  .article-page.has-mobile-layout .article-meta__item {
    width: auto;
    font-size: var(--text-cap-m);
    line-height: var(--lh-cap-m);
    white-space: nowrap;
  }

  .article-page.has-mobile-layout .article-summary {
    grid-template-columns: 1px 1fr;
  }

  .article-page.has-mobile-layout .article-summary p,
  .article-page.has-mobile-layout .article-prose,
  .article-page.has-mobile-layout .article-prose p,
  .article-page.has-mobile-layout .article-prose li {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }

  .article-page.has-mobile-layout .article-tags .pill,
  .article-page.has-mobile-layout .article-collage__caption {
    font-size: var(--text-cap-m);
    line-height: var(--lh-cap-m);
  }

  .article-page.has-mobile-layout .article-hero-image__media {
    aspect-ratio: 1860 / 800;
  }

  .article-page.has-mobile-layout .article-hero-image__media--desktop {
    display: block;
  }

  .article-page.has-mobile-layout .article-hero-image__media--mobile {
    display: none;
  }

  .article-page.has-mobile-layout .article-body {
    gap: var(--space-l);
    padding-top: 0;
  }

  .article-page.has-mobile-layout .article-section-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }

  .article-page.has-mobile-layout .article-closing {
    padding: var(--space-xl) 60px var(--space-huge) var(--margin-tablet);
  }

  .article-page.has-mobile-layout .article-closing .closing-title {
    font-size: var(--text-title-m);
    line-height: var(--lh-title-m);
  }

  .article-page.has-mobile-layout .article-closing .closing-body {
    font-size: var(--text-body-m);
    line-height: var(--lh-body-m);
  }

  .article-page.has-mobile-layout .article-closing .closing-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

}