.site-header { transform: translateX(-9px); }
.blog-main { padding-top: clamp(28px, 3.7vw, 53px); }
.blog-intro {
  min-height: clamp(145px, 15.4vw, 222px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 86px);
  align-items: center;
  padding: 0 clamp(22px, 2.6vw, 38px);
}
.blog-claim h1 {
  margin: 0;
  font-size: clamp(28px, 2.65vw, 38px);
  line-height: 1.23;
  letter-spacing: -.04em;
  font-weight: 680;
}
.claim-line { white-space: nowrap; }
.blog-claim p {
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  color: #4b4b4b;
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 540;
  line-height: 1.35;
  letter-spacing: -.022em;
}
.underline-light { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.archive-tools { align-self: center; }
.archive-tools .section-kicker { margin-bottom: 9px; }
.archive-search { position: relative; display: flex; }
.archive-search input {
  width: 100%; min-height: clamp(37px, 3.2vw, 46px); padding: 0 48px 0 14px;
  border: 1px solid #dededc; border-radius: 8px; background: rgba(255,255,255,.88);
  color: var(--ink); outline: none; font-size: clamp(11px, .95vw, 13.5px);
}
.archive-search input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,101,0,.12); }
.archive-search button { position: absolute; inset: 0 0 0 auto; width: 46px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.archive-search .icon { width: 18px; height: 18px; }
.archive-territories { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: clamp(15px, 1.5vw, 22px); }
.archive-territories > span { color: #b5b5b5; }
.archive-territories button,
.archive-territories a {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; background: transparent;
  color: #5d5d5d; font-size: clamp(10px, .9vw, 13px); cursor: pointer; text-decoration: none;
}
.archive-territories button:hover, .archive-territories button:focus-visible, .archive-territories button.is-active,
.archive-territories a:hover, .archive-territories a:focus-visible { color: var(--orange-dark); }
.archive-territories .icon { width: clamp(20px, 1.8vw, 26px); height: clamp(20px, 1.8vw, 26px); color: var(--orange); stroke-width: 1.55; }
.archive-status { min-height: 1.4em; margin: 7px 0 -1.4em; color: #707070; font-size: 11px; }

.blog-featured { margin-top: clamp(9.6px, .84vw, 12px); }
.featured-media { min-height: clamp(220px, 25vw, 360px); }
.blog-featured .featured-image { min-height: 100%; }
.blog-featured h2 a, .feed-card h3 a { text-decoration: none; }
.feed-copy > .category { text-decoration: none; }
.featured-category-link { color: inherit; text-decoration: none; }

/* The approved mockup uses a fixed featured-card frame.  WordPress supplies
   real excerpts of different lengths, so vertical centering would move the
   kicker, title and metadata as the excerpt changes.  Keep the editorial
   opening aligned to the reference and reserve the remaining space above the
   CTA instead. */
.blog-featured .featured-copy { justify-content: flex-start; }
.blog-featured .featured-copy > .accent-link { margin-top: auto; }

.feed { margin-top: clamp(15.6px, 1.44vw, 21.6px); }
.feed-list { display: grid; gap: clamp(14.4px, 1.38vw, 20.4px); }
.feed-card {
  min-height: clamp(190px, 18.6vw, 268px);
  display: grid;
  grid-template-columns: 42.5% minmax(0, 1fr);
  gap: clamp(28px, 3vw, 43px);
  padding: clamp(11px, 1.05vw, 15px);
  overflow: hidden;
}
.feed-image-link { position: relative; min-width: 0; min-height: 0; height: 100%; border-radius: clamp(7px, .75vw, 11px); overflow: hidden; background: transparent; }
.feed-image-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover !important; object-position: center center !important; background: transparent; }
.feed-card:hover .feed-image-link img { transform: none !important; }
.feed-copy { display: flex; flex-direction: column; justify-content: center; padding-right: clamp(13px, 1.65vw, 24px); }
.feed-copy h3 { margin: clamp(7px, .7vw, 10px) 0 clamp(8px, .85vw, 12px); font-size: clamp(20px, 2vw, 29px); line-height: 1.12; letter-spacing: -.038em; }
.feed-copy > p { margin: 0 0 clamp(15px, 1.6vw, 23px); color: #6a6a6a; font-size: clamp(12px, 1.12vw, 16px); line-height: 1.62; }
.feed-copy .meta { margin-top: auto; }

/* Archive cards have a fixed editorial frame in the approved references. The
   live archive contains much longer historical titles and excerpts; reserve
   the same two-line slots so their variable copy cannot recenter the category
   or move metadata away from the shared baseline. This deliberately excludes
   single-post prose, whose height remains natural. */
.feed-card .feed-copy h3,
.feed-card .feed-copy .wp-block-post-title,
.feed-card .feed-copy > p,
.feed-card .feed-copy .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.derived-page.blog-paginated .feed-card { min-height: clamp(190px, 18.6vw, 268px); }
.derived-page.blog-paginated .feed-copy h3 { font-size: clamp(20px, 2vw, 29px); }
.derived-page.blog-paginated .feed-copy > p { font-size: clamp(12px, 1.12vw, 16px); }

.start-here { padding: clamp(17px, 1.7vw, 24px) clamp(18px, 1.8vw, 26px); }
#start-here-title,
#blog-claim { scroll-margin-top: 120px; }
.start-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(11px, 1vw, 15px); }
.start-grid > a { display: grid; grid-template-columns: clamp(78px, 8.3vw, 120px) 1fr; gap: clamp(12px, 1.3vw, 19px); align-items: center; min-width: 0; padding-right: clamp(16px, 1.8vw, 26px); text-decoration: none; }
.start-grid > a + a { padding-left: clamp(16px, 1.8vw, 26px); border-left: 1px solid var(--line); }
.start-grid img { width: 100%; height: clamp(76px, 6.7vw, 96px); object-fit: cover !important; object-position: center center !important; background: #efefeb; border-radius: 9px; }
.start-grid strong { display: block; font-size: clamp(12px, 1.08vw, 15.5px); line-height: 1.25; }
.start-grid small { display: block; margin-top: 8px; color: #777; font-size: clamp(9px, .8vw, 11.5px); }

.pagination { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 1.25vw, 18px); padding: clamp(26px, 3vw, 43px) 0 clamp(23px, 2.6vw, 38px); }
.pagination a,
.pagination .page-numbers,
.pagination button { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: #fff; border-radius: 999px; font-size: 13px; font-weight: 650; cursor: pointer; box-shadow: 0 8px 24px rgba(30,30,30,.04); text-decoration: none; }
.pagination a:hover, .pagination a:focus-visible,
.pagination button:hover, .pagination button:focus-visible { border-color: #ffc9a5; color: var(--orange-dark); }
.pagination .is-active,
.pagination [aria-current="page"] { color: #fff; background: var(--orange); box-shadow: 0 8px 18px rgba(255,101,0,.2); }
.pagination .page-next { gap: 8px; min-width: 108px; padding: 0 17px; }
.pagination .icon { width: 15px; height: 15px; }
.pagination > :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
  gap: 8px;
  min-width: 112px;
  padding: 0 17px;
}
.pagination > :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) > :is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) {
  flex: 0 0 auto;
  margin: 0;
  line-height: 1;
}
[data-article].is-filtered-out { display: none; }

:focus-visible { outline: 3px solid rgba(255,101,0,.4); outline-offset: 3px; }

@media (max-width: 980px) and (min-width: 701px) {
  body:not(.paged) .feed > .feed-list > .feed-card:nth-child(6) {
    height: 195.890625px;
  }

  .blog-intro { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 35px; padding-inline: 15px; }
  .blog-claim h1 { font-size: 25.5px; }
  .feed-card { min-height: 190px; gap: 26px; }
  .feed-copy h3 { font-size: 20px; }
  .feed-copy > p { font-size: 11px; }
  .start-grid > a { grid-template-columns: 70px 1fr; }
}

@media (max-width: 700px) {
  .site-header { transform: none; }
  .blog-main { padding-top: 38px; }
  .blog-intro { min-height: auto; grid-template-columns: 1fr; gap: 34px; padding: 0 6px 29px; }
  .blog-claim h1 { font-size: clamp(29px, 9.1vw, 38px); line-height: 1.15; }
  .claim-line { white-space: normal; }
  .blog-claim p { font-size: 19px; line-height: 1.42; }
  .archive-tools { padding: 18px 15px; border-radius: 12px; background: rgba(255,255,255,.75); box-shadow: var(--shadow); }
  .archive-search input { min-height: 44px; font-size: 13px; }
  .archive-territories { align-items: stretch; gap: 7px; }
  .archive-territories > span { display: none; }
  .archive-territories button,
  .archive-territories a { min-height: 44px; flex: 1; flex-direction: column; justify-content: center; gap: 5px; font-size: 10px; }
  .archive-territories .icon { width: 25px; height: 25px; }
  .blog-featured .featured-main { grid-template-columns: 1fr; }
  .featured-media { min-height: 0; }
  .blog-featured .featured-media {
    width: 100%;
    /* Its available width is the card less outer margins and inner padding.
       Using 100vw - 40px leaked the card padding into the media height. */
    height: calc((100vw - 55px) / 1.53);
    aspect-ratio: 1.53;
    overflow: hidden;
  }
  .blog-featured .featured-image { min-height: 0; aspect-ratio: 1.53; }
  .feed-list { gap: 12px; }
  .feed-card { min-height: 0; grid-template-columns: 1fr; gap: 13px; padding: 9px; }
  .feed-image-link { height: auto; aspect-ratio: 1.6; }
  .feed-copy { padding: 8px 13px 16px; }
  .feed-copy h3 { font-size: 24px; }
  .feed-copy > p { font-size: 13px; }
  .derived-page.blog-paginated .feed-copy h3 { font-size: 24px; }
  .derived-page.blog-paginated .feed-copy > p { font-size: 13px; }
  .feed-copy .meta { margin-top: 0; }
  .start-here { padding: 20px 16px; }
  #start-here-title,
  #blog-claim { scroll-margin-top: 86px; }
  .start-grid { grid-template-columns: 1fr; }
  .start-grid > a { grid-template-columns: 90px 1fr; min-height: 112px; padding: 10px 0; }
  .start-grid > a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .start-grid strong { font-size: 15px; }
  .start-grid small { font-size: 11px; }
  .pagination { gap: 9px; }
  .pagination a,
  .pagination .page-numbers,
  .pagination button { min-width: 44px; height: 44px; }
  .pagination .page-next { min-width: 105px; }
  .pagination > :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) { min-width: 105px; }
}

@media (prefers-reduced-motion: reduce) {
  .feed-image-link img { transition: none; }
}

/* WordPress Query Loop adapters: preserve Core pagination and dynamic content. */
.blog-query .feed-list { display: grid; gap: clamp(14.4px, 1.38vw, 20.4px); }
.blog-query .feed-list > li { min-width: 0; display: grid; gap: clamp(10px, 1.05vw, 15px); }
.feed-card .feed-image-link { margin: 0; }
.feed-card .feed-image-link > a { position: absolute; inset: 0; display: block; }
.feed-card .feed-image-link img { width: 100%; height: 100%; object-fit: cover !important; object-position: center center !important; background: transparent; }
.feed-copy .wp-block-post-terms { margin: 0; }
.feed-copy .wp-block-post-terms a { color: inherit; text-decoration: none; }
.feed-copy .wp-block-post-excerpt { margin: 0 0 clamp(15px, 1.6vw, 23px); }
.feed-copy .wp-block-post-excerpt__excerpt { margin: 0; color: #6a6a6a; font-size: clamp(12px, 1.12vw, 16px); line-height: 1.62; }
.feed-copy .wp-block-read-more { margin-top: clamp(11px, 1.2vw, 17px); }
.feed-copy .post-meta { margin-top: auto; }
.feed-copy .post-meta + .wp-block-read-more { display: none; }
.query-newsletter { display: none; }

body:not(.paged) .blog-query .feed-list > li:first-child .query-newsletter {
  display: grid;
  position: static;
  left: auto;
  width: 100%;
  margin: 0;
}
body:not(.paged) .blog-query .feed-list > li:first-child .feed-copy::before {
  content: "Último artículo";
  color: var(--orange-dark);
  font-size: clamp(7px, .8vw, 11.5px);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body:not(.paged) .blog-query .feed-list > li:first-child .feed-copy > .category { display: none; }
body:not(.paged) .blog-query { margin-top: clamp(9.6px, .84vw, 12px); }

.archive-territories p { display: flex; align-items: center; margin: 0; line-height: 0; }
.archive-territories p[aria-hidden="true"] { color: #b5b5b5; line-height: 24px; }
.archive-territories a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #5d5d5d;
  font-size: clamp(10px, .9vw, 13px);
  text-decoration: none;
}

@media (min-width: 701px) {
  body.blog.paged .site-header {
    /* The paged archive already moves the template-part wrapper by -9px.
       Reapplying that offset to the inner header shifts every visible control
       left of the approved mockup while leaving the outer rect deceptively
       correct. */
    transform: none;
  }

  .archive-territories a {
    min-height: 0;
  }

  .archive-tools::after {
    display: block;
    height: 15.390625px;
    margin: 7px 0 -15.390625px;
    content: "";
  }

  /* The archive's real excerpts vary in length.  Preserve the fixed card
     rhythm approved in the rendered mockup without altering post content. */
  .blog-featured .featured-main {
    min-height: 0;
    height: clamp(241.203px, calc(26.59vw + 21.21px), 401.344px);
  }

  .feed > .feed-list > .feed-card {
    height: clamp(190px, 18.6vw, 268px);
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }

  /* The archive cards have a fixed editorial height.  A percentage height on
     the media grid item can resolve against the image's intrinsic ratio in
     some cards, so it can consume the lower padding.  A definite grid row
     plus stretching makes both columns use the available inner height,
     preserving the approved bottom breathing room. */
  .feed > .feed-list > .feed-card > .feed-image-link {
    height: auto;
    align-self: stretch;
  }

  .feed > .feed-list > .start-here {
    height: clamp(133.5px, calc(7.2vw + 73.96px), 177.641px);
    overflow: hidden;
  }

  body:not(.paged) .blog-query .feed-list > li:first-child .feed-card {
    height: clamp(281.672px, calc(27.84vw + 3.27px), 403.344px);
    min-height: 0;
    grid-template-columns: 48.4% minmax(0, 1fr);
    gap: clamp(36px, 4.35vw, 63px);
    padding: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) clamp(6px, .75vw, 11px);
  }
  body:not(.paged) .blog-query .feed-list > li:first-child .feed-image-link { width: 100%; aspect-ratio: auto !important; }
  body:not(.paged) .blog-query .feed-list > li:first-child .feed-copy {
    padding: clamp(15px, 1.9vw, 27px) clamp(19px, 2.3vw, 33px) clamp(11px, 1.3vw, 19px) 0;
  }
  body:not(.paged) .blog-query .feed-list > li:first-child .feed-copy h3 {
    margin: clamp(7px, .75vw, 11px) 0 clamp(11px, 1.25vw, 18px);
    font-size: clamp(23px, 2.76vw, 40px);
    line-height: 1.1;
    letter-spacing: -.042em;
  }
}

@media (max-width: 980px) and (min-width: 701px) {
  body:not(.paged) .blog-query .feed-list > li:first-child .feed-card {
    height: clamp(243.203px, calc(20.24vw + 75.8px), 274.172px);
    gap: 28px;
  }
}

@media (max-width: 700px) {
  body.blog .site-header {
    transform: translate(0, 7px);
  }

  body.blog.paged .site-header {
    transform: none;
  }

  .archive-tools { min-height: 176px; box-sizing: border-box; }
  .blog-query .feed-list { gap: 12px; }
  .feed-card .feed-image-link > a { position: static; height: 100%; }
  .feed-copy .wp-block-post-excerpt__excerpt { font-size: 13px; }
  .archive-territories p[aria-hidden="true"] { display: none; }
  .archive-territories p { flex: 1; height: 53px; text-align: center; }
  .archive-territories a { height: 53px; justify-content: center; font-size: 10px; }

  /* Mobile archive contract: live historical copy must not alter card rhythm.
     The fixed media row keeps the 1.6:1 crop; title/excerpt clamps below keep
     the remaining copy legible and the metadata rests on one shared baseline.
     Above 570px, the media track alone exceeds the available copy track in a
     493px card, so the fixed frame expands by the same deterministic formula
     rather than clipping its metadata before the 701px tablet breakpoint. */
  body.blog .feed > .feed-list > .feed-card {
    height: max(493px, calc((100vw - 55px) / 1.6 + 170px));
    min-height: 0;
    grid-template-rows: calc((100vw - 55px) / 1.6) minmax(0, 1fr);
  }

  body.blog .feed > .feed-list > .feed-card .feed-copy .meta {
    margin-top: auto;
  }

  /* Dates and comment counts are real content, but their changing widths must
     not move the three reference icons across otherwise fixed mobile cards. */
  body.blog .feed > .feed-list > .feed-card .feed-copy .meta {
    display: grid;
    grid-template-columns: 89.5px 55.4375px minmax(0, 1fr);
    gap: 0;
  }

  body.blog .feed > .feed-list > .feed-card .feed-copy .meta > span {
    min-width: 0;
    justify-self: start;
    white-space: nowrap;
  }

  body:not(.paged) .blog-query .feed-list > li:first-child .feed-card {
    height: 591.031px;
    grid-template-rows: 228.75px minmax(0, 1fr);
  }
  body:not(.paged) .blog-query .feed-list > li:first-child .feed-image-link { aspect-ratio: 1.53 !important; }

  .blog-featured .featured-main {
    /* The mobile mockup owns the image track and the 13px grid gap owns the
       separation before copy.  Do not fold an extra gutter into the media
       row: doing so makes the whole featured card 9.796875px too tall. */
    grid-template-rows: calc((100vw - 55px) / 1.53) 329.28125px;
  }

  .feed-card .feed-copy { padding: 8px 13px 16px; }

  .feed > .feed-list > .start-here {
    height: 401px;
    overflow: hidden;
  }

  .feed-card .feed-copy h3,
  .feed-card .feed-copy .wp-block-post-title,
  .feed-card .feed-copy > p,
  .feed-card .feed-copy .wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }

  .feed-card .feed-copy h3,
  .feed-card .feed-copy .wp-block-post-title { -webkit-line-clamp: 2; }
  .feed-card .feed-copy > p,
  .feed-card .feed-copy .wp-block-post-excerpt__excerpt { -webkit-line-clamp: 2; }

}