.page-hero {
   padding: var(--space-9) 0 var(--space-8);
}

.page-hero h1 {
   font-size: clamp(30px, 4.4vw, 46px);
   max-width: 18ch;
}

.page-hero p {
   max-width: 56ch;
   color: var(--ink-soft);
   margin-top: var(--space-4);
   font-size: 17px;
}


.band-dark {
   background: var(--ink);
   color: var(--paper);
   border-top: none;
}

.band-dark h2 {
   color: var(--paper);
}

.band-dark p {
   color: var(--on-dark-soft);
}

.cta-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-7);
   flex-wrap: wrap;
}


.cta-banner {
   position: relative;
   margin-top: clamp(24px, 4vw, 48px);
   padding: 0;
   border-top: none;
   min-height: clamp(380px, 38vw, 520px);
   display: flex;
   align-items: center;
   overflow: hidden;
}

.cta-banner .ph-block {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 68%;
   aspect-ratio: auto;
   border-radius: 0;
   font-size: 12px;
}

/* velo uniforme suave: mantiene la foto visible */
.cta-banner::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(33, 51, 61, .35);
   pointer-events: none;
}

.cta-banner .cta-banner-inner {
   position: relative;
   z-index: 1;
   width: 100%;
   padding: clamp(40px, 5vw, 72px) 0;
}

.cta-banner h2 {
   color: var(--paper);
}

.cta-banner p {
   color: var(--on-dark-soft);
}

.cta-link {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
   flex-shrink: 0;
   font-family: var(--f-body);
   font-size: clamp(16px, 1.4vw, 19px);
   font-weight: 500;
   color: var(--paper);
   white-space: nowrap;
}

.cta-link svg {
   width: 52px;
   height: 14px;
   flex-shrink: 0;
   transition: transform .3s ease;
}

.cta-link:hover svg {
   transform: translateX(8px);
}

.filter-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
   margin-bottom: var(--space-8);
   border: none !important;
}

.filter-tabs button {
   font-family: var(--f-mono);
   font-size: 12.5px;
   text-transform: uppercase;
   letter-spacing: .05em;
   padding: 9px var(--space-4);
   background: transparent;
   border: 1px solid var(--line-strong);
   border-top: none !important;
   color: var(--ink-soft);
   border-radius: var(--radius);
}

.filter-tabs button[aria-pressed="true"] {
   background: var(--ink);
   color: var(--paper);
   border-color: var(--ink);
}



.breadcrumb {
   padding: var(--space-5) 0 0;
}

.breadcrumb ol {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2);
   font-family: var(--f-mono);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--ink-soft);
}

.breadcrumb li {
   display: flex;
   align-items: center;
   gap: var(--space-2);
}

.breadcrumb li:not(:last-child)::after {
   content: "/";
   color: var(--line-strong);
}

.breadcrumb a:hover {
   color: var(--wood-dark);
}

.breadcrumb li[aria-current="page"] {
   color: var(--ink);
}