/* Blog article detail — Figma node 3200:245 */
#detail-news .detail-page,
#detail-news .detail-article,
#detail-news .detail-dynamic-section,
#detail-news .detail-suggested {
  box-sizing: border-box;
}

#detail-news .detail-page {
  width: 100%;
  padding: 200px 0 100px;
}

#detail-news .detail-article,
#detail-news .detail-dynamic-section,
#detail-news .detail-suggested {
  width: calc(100% - 48px);
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

#detail-news .detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

#detail-news .detail-back {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  color: #4a4a4a;
  font: 400 24px/1 Arial, sans-serif;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

#detail-news .detail-back:hover,
#detail-news .detail-back:focus-visible {
  background-color: #f00;
  box-shadow: 0 4px 14px rgba(255, 0, 0, .35);
  color: #fff;
  outline: none;
}

#detail-news .detail-share {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f00;
  font: 400 16px/20px Raleway, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

#detail-news .detail-share span {
  font-size: 21px;
  line-height: 1;
}

#detail-news .detail-article .detail-header {
  position: relative !important;
  inset: auto !important;
  z-index: 10 !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 23px;
}

#detail-news .detail-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
  color: #f00;
  font: 400 18px/22px Raleway, sans-serif;
  text-transform: uppercase;
}

#detail-news .detail-header h1 {
  max-width: 930px;
  margin: 0;
  color: #4a4a4a;
  font: 600 30px/35px Raleway, sans-serif;
  text-transform: uppercase;
}

#detail-news .detail-hero-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 80px;
  overflow: hidden;
}

#detail-news .detail-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#detail-news .detail-body {
  color: #4a4a4a;
  font: 400 22px/31.9px Raleway, sans-serif;
}

#detail-news .detail-body > div > :first-child { margin-top: 0; }
#detail-news .detail-body p { margin: 0 0 32px; }
#detail-news .detail-body strong,
#detail-news .detail-body b { font-weight: 700; }
#detail-news .detail-body h2,
#detail-news .detail-body h3,
#detail-news .detail-body h4 {
  margin: 56px 0 32px;
  color: #4a4a4a;
  font: 700 22px/31.9px Raleway, sans-serif;
}
#detail-news .detail-body img { max-width: 100%; height: auto; }
#detail-news .detail-body a { color: #f00; }

#detail-news .detail-video { margin: 0 0 80px; }
#detail-news .detail-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

#detail-news .detail-dynamic-section {
  display: flex;
  align-items: stretch;
  min-height: 300px;
  margin-top: 80px;
  margin-bottom: 80px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#detail-news .detail-dynamic-copy {
  display: flex;
  width: 55%;
  min-height: 300px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 58px;
  color: #fff;
}

#detail-news .detail-dynamic-copy h2 {
  margin: 0 0 28px;
  color: #fff;
  font: 600 30px/35px Raleway, sans-serif;
  text-transform: uppercase;
}
#detail-news .detail-dynamic-copy p { margin: 0 0 28px; color: #fff; font: 400 18px/25px Raleway, sans-serif; }
#detail-news .detail-dynamic-copy a { display: inline-block; padding: 8px 20px; background: #f00; color: #fff; font: 600 18px/30px Raleway, sans-serif; text-decoration: none; text-transform: uppercase; }

#detail-news .detail-suggested { margin-bottom: 100px; }
#detail-news .detail-suggested > h2 { margin: 0 0 34px; color: #4a4a4a; font: 600 30px/35px Raleway, sans-serif; text-transform: uppercase; }
#detail-news .detail-suggested-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 100px; }
#detail-news .detail-suggested-card { min-width: 0; }
#detail-news .detail-suggested-meta { display: flex; align-items: center; justify-content: space-between; min-height: 22px; margin-bottom: 10px; color: #f00; font: 400 18px/22px Raleway, sans-serif; }
#detail-news .detail-suggested-image {
  display: block;
  width: 100%;
  background: #fff;
}
#detail-news .detail-suggested-image img {
  display: block;
  width: 100%;
  height: auto;
}

#detail-news .detail-suggested-category { margin-top: 10px; color: #f00; font: 400 18px/21px Raleway, sans-serif; }
#detail-news .detail-suggested-title { display: block; margin-top: 8px; color: #4a4a4a; font: 400 18px/21px Raleway, sans-serif; text-decoration: none; }

@media (max-width: 700px) {
  #detail-news .detail-page { padding: 120px 0 60px; }
  #detail-news .detail-article, #detail-news .detail-dynamic-section, #detail-news .detail-suggested { width: calc(100% - 40px); }
  #detail-news .detail-actions { margin-bottom: 32px; }
  #detail-news .detail-header { margin-bottom: 32px; }
  #detail-news .detail-meta { margin-bottom: 32px; font-size: 16px; line-height: 20px; }
  #detail-news .detail-header h1 { font-size: 26px; line-height: 31px; }
  #detail-news .detail-hero-image { margin-bottom: 40px; }
  #detail-news .detail-body { font-size: 18px; line-height: 27px; }
  #detail-news .detail-body p { margin-bottom: 26px; }
  #detail-news .detail-body h2, #detail-news .detail-body h3, #detail-news .detail-body h4 { margin: 40px 0 24px; font-size: 20px; line-height: 28px; }
  #detail-news .detail-dynamic-section { min-height: 360px; margin-top: 48px; margin-bottom: 48px; background-position: center; }
  #detail-news .detail-dynamic-copy { width: 100%; min-height: 360px; padding: 32px 24px; background: rgba(0, 0, 0, .38); }
  #detail-news .detail-dynamic-copy h2 { font-size: 26px; line-height: 31px; }
  #detail-news .detail-suggested { margin-bottom: 60px; }
  #detail-news .detail-suggested > h2 { margin-bottom: 26px; font-size: 26px; line-height: 31px; }
  #detail-news .detail-suggested-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Keep the global guide grid behind blog article content. */
#detail-news { position: relative; z-index: 1; }
#grid, .grid { z-index: 0; pointer-events: none; }

/* Images and visual cards must always cover the page guide grid. */
#detail-news .detail-hero-image,
#detail-news .detail-hero-image img,
#detail-news .detail-dynamic-section,
#detail-news .detail-suggested-image,
#detail-news .detail-suggested-image img {
  position: relative;
  z-index: 10;
}

/* Figma: share action is icon-only; label remains available through aria-label. */
#detail-news .detail-share { font-size: 0; }
#detail-news .detail-share span { display: block; font-size: 21px; line-height: 1; }

/* Embedded tools are visual content too: keep them above the guide grid. */
#detail-news .detail-body iframe { position: relative; z-index: 10; }


/* Shared Figma icon used in the article and suggested cards. */
#detail-news .detail-share img { display: block; width: 20px; height: 20px; }
#detail-news .detail-suggested-share-icon { display: block; width: 20px; height: 20px; }


/* Article header keeps the visible share label; suggested cards remain icon-only. */
#detail-news .detail-share { font-size: 16px; }
#detail-news .detail-share-label { display: block; font-size: 16px; line-height: 20px; }


/* Feedback after copying an article URL on desktop. */
#detail-news .detail-share { position: relative; }
#detail-news .detail-share.is-copied::after {
  content: "Link copiado";
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  white-space: nowrap;
  padding: 6px 8px;
  background: #ff0000;
  color: #fff;
  font: 400 12px/1 Raleway, sans-serif;
  text-transform: none;
}

/* Text metadata is content, not part of the background grid. */
#detail-news .detail-actions,
#detail-news .detail-meta,
#detail-news .detail-header h1 {
  position: relative;
  z-index: 10;
}

/* Keep every text layer of the article above the fixed guide grid. */
#detail-news .detail-body,
#detail-news .detail-suggested,
#detail-news .detail-suggested-meta,
#detail-news .detail-suggested-category,
#detail-news .detail-suggested-title {
  position: relative;
  z-index: 10;
}

/* Keep the editorial banner above the fixed guide grid. */
#detail-news .detail-dynamic-section { isolation: isolate; z-index: 20 !important; }
#detail-news .detail-dynamic-copy,
#detail-news .detail-dynamic-copy h2,
#detail-news .detail-dynamic-copy p,
#detail-news .detail-dynamic-copy a { position: relative; z-index: 1; }

/* Desktop: align blog content precisely between the first and last central guide lines.
   The fixed grid uses the viewport minus the vertical scrollbar (15px on this site). */
@media (min-width: 1101px) {
  #detail-news .detail-article,
  #detail-news .detail-dynamic-section,
  #detail-news .detail-suggested,
  #news .news-wrapper > .container,
  #news .news-wrapper > .container:first-child {
    width: calc(66.6666667vw - 10px);
    max-width: none;
    margin-left: calc(16.6666667vw - 3px);
    margin-right: 0;
  }
}

/* Keep editorial visuals at the original Figma size; only text uses the full grid span. */
@media (min-width: 1101px) {
  #detail-news .detail-hero-image,
  #detail-news .detail-dynamic-section,
  #detail-news .detail-suggested {
    width: 960px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* The editorial banner itself spans the four central guide columns. */
@media (min-width: 1101px) {
  #detail-news .detail-dynamic-section {
    width: calc(66.6666667vw - 10px);
    max-width: none;
    margin-left: calc(16.6666667vw - 3px);
    margin-right: 0;
  }
}

/* Desktop detail: article media, banner and suggested-card group use the same
   outer guide lines as the complete blog listing. Card artwork stays 430px. */
@media (min-width: 1101px) {
  #detail-news .detail-hero-image,
  #detail-news .detail-body img {
    display: block;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  #detail-news .detail-suggested {
    width: calc(66.6666667vw - 10px);
    max-width: none;
    margin-left: calc(16.6666667vw - 3px);
    margin-right: 0;
  }

  #detail-news .detail-suggested-grid {
    grid-template-columns: repeat(2, 430px);
    justify-content: space-between;
    gap: 0;
  }
}

/* Match the detail callout to the complete-listing banner dimensions. */
@media (min-width: 1101px) {
  #detail-news .detail-dynamic-section {
    min-height: 430px;
  }
}

/* The article image retains its original editorial width; only the callout
   banner spans the full guide width. */
@media (min-width: 1101px) {
  #detail-news .detail-hero-image {
    width: 960px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #detail-news .detail-body img {
    width: auto;
    max-width: 100%;
  }
}

/* Keep the fixed guide grid behind the fixed-width editorial image. */
#detail-news .detail-hero-image {
  isolation: isolate;
  z-index: 20 !important;
}
#detail-news .detail-hero-image img {
  position: relative;
  z-index: 1;
}

/* Detail hero follows three guide columns (960px in the 1920px Figma layout).
   It starts on the first content line, so the guide is hidden by the image
   just as it is by the first card in the complete listing. */
@media (min-width: 1101px) {
  #detail-news .detail-hero-image {
    width: 75%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Detail uses the listing's layering behavior: guides remain in empty space
   and are masked only by the fixed-width, opaque editorial image. */
@media (min-width: 1101px) {
  #detail-news .detail-hero-image {
    width: 960px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Detail pages use the same long editorial fade as the listing: guides are a
   header detail and disappear as the article visual content begins. */
#grid.blog-detail-guide,
.grid.blog-detail-guide {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0, 0, 0, 0.92) 42%, rgba(0, 0, 0, 0.64) 60%, rgba(0, 0, 0, 0.30) 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0, 0, 0, 0.92) 42%, rgba(0, 0, 0, 0.64) 60%, rgba(0, 0, 0, 0.30) 80%, transparent 100%);
}

/* Keep the back control in the foreground of the detail header. */
#detail-news .detail-back {
  position: relative;
  z-index: 30;
  transform: translateX(60px);
}

/* Repeat article controls between the article text and the banner. */
#detail-news .detail-actions--after-body {
  margin-top: 56px;
  margin-bottom: 0;
}
#detail-news .detail-actions--after-body .detail-back {
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  transform: translateX(-30px);
}

/* Header alignment follows the same two outer editorial guide lines. */
#detail-news .detail-actions:not(.detail-actions--after-body) .detail-back {
  transform: translateX(-20px);
}
#detail-news .detail-header h1 {
  max-width: none;
}

/* The main article image spans the exact editorial grid width. */
@media (min-width: 1101px) {
  #detail-news .detail-hero-image {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Mobile actions remain inside the content gutters. */
@media (max-width: 700px) {
  #detail-news .detail-back,
  #detail-news .detail-actions--after-body .detail-back,
  #detail-news .detail-actions:not(.detail-actions--after-body) .detail-back {
    transform: none;
  }
  #detail-news .detail-actions--after-body {
    margin-top: 36px;
  }
}