.masthead {
  position:relative;
  isolation:isolate;
  min-height:570px;
  padding:100px max(5%,calc((100vw - 1250px)/2)) 34px;
  background:linear-gradient(90deg,rgba(3,3,3,.87),rgba(3,3,3,.6)),url('/HomeInterrahub.png') center 45%/cover;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid var(--border-subtle)
}
.masthead:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#030303,transparent 42%);
  z-index:-1
}
.mini-label {
  color:#a0a0a0;
  font-size:10px;
  letter-spacing:2px;
  font-weight:600;
  text-transform:uppercase
}
.mini-label span {
  color:var(--accent);
  margin:0 10px
}
.masthead .mini-label:before {
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  margin:0 12px 1px 0
}
.masthead h1 {
  font-size:clamp(52px,6.8vw,96px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-4px;
  margin:24px 0;
  max-width:1000px
}
.masthead h1 em {
  font-style:normal;
  color:var(--accent)
}
.masthead>p:not(.mini-label) {
  font-size:16px;
  font-weight:300;
  line-height:1.8;
  color:#b0b0b0;
  max-width:520px;
  margin:0
}
.masthead-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:#999;
  letter-spacing:1.5px;
  padding-top:68px
}
.masthead-foot a {
  display:flex;
  gap:12px;
  align-items:center
}
.masthead-foot b {
  font-size:26px;
  line-height:1;
  font-weight:300;
  color:white
}
.blog-section {
  max-width:1300px;
  margin:auto;
  padding:90px 26px 100px
}
.section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px
}
.section-head h2 {
  font-size:clamp(27px,3vw,40px);
  font-weight:600;
  letter-spacing:-1.7px;
  line-height:1.2;
  margin:15px 0 0
}
.section-head h2 span {
  color:var(--accent)
}
.article-count {
  font-size:11px;
  color:#999;
  white-space:nowrap
}
.filters-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:35px 0 32px;
  align-items:center
}
.category-filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.category-filters button {
  border:1px solid var(--border-subtle);
  border-radius:40px;
  background:transparent;
  padding:10px 16px;
  font-size:11px;
  color:#aaa;
  transition:var(--transition)
}
.category-filters button:hover {
  color:white;
  border-color:#ffffff40
}
.category-filters button.selected {
  background:white;
  color:#030303;
  border-color:#fff
}
.search-box {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border-subtle);
  border-radius:40px;
  padding:0 17px;
  color:#999;
  background:#0c0c0c;
  flex-shrink:0
}
.search-box:focus-within {
  border-color:#ffffff50
}
.search-box input {
  width:175px;
  min-width:0;
  border:0;
  background:none;
  color:white;
  padding:12px 0;
  font-size:11px;
  outline:0
}
.search-box svg {
  width:15px;
  height:15px;
  flex-shrink:0
}
.featured {
  margin-bottom:28px
}
.featured-card {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  min-height:370px;
  border:1px solid var(--border-subtle);
  border-radius:28px;
  background:linear-gradient(130deg,#171717,#090909);
  overflow:hidden;
  transition:var(--transition)
}
.featured-image {
  position:relative;
  min-height:370px;
  background:#111;
  overflow:hidden
}
.featured-image img,.card-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s
}
.featured-copy {
  display:flex;
  flex-direction:column;
  padding:44px
}
.post-category {
  font-size:9px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--accent)
}
.featured-copy h3 {
  font-size:clamp(26px,2.7vw,38px);
  font-weight:600;
  line-height:1.24;
  letter-spacing:-1.3px;
  margin:20px 0 16px
}
.featured-copy p,.card-copy p {
  font-size:12px;
  color:#aaa;
  line-height:1.85;
  font-weight:300;
  margin:0 0 30px
}
.read-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:auto;
  font-size:9px;
  color:#999;
  line-height:1.6
}
.read-row strong {
  font-size:11px;
  font-weight:600;
  color:white;
  white-space:nowrap
}
.post-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px
}
.article-card {
  display:flex;
  flex-direction:column;
  border:1px solid var(--border-subtle);
  border-radius:24px;
  overflow:hidden;
  background:#0c0c0c;
  transition:var(--transition)
}
.featured-card:hover,.article-card:hover {
  border-color:#ffffff38;
  transform:translateY(-4px);
  box-shadow:0 24px 40px #0006
}
.featured-card:hover img,.article-card:hover img {
  transform:scale(1.025)
}
.card-image {
  aspect-ratio:16/10;
  background:#111;
  overflow:hidden
}
.card-copy {
  padding:27px;
  display:flex;
  flex-direction:column;
  flex:1
}
.card-copy h3 {
  font-size:20px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.6px;
  margin:15px 0 14px
}
.card-copy p {
  margin-bottom:24px
}
.no-photo {
  display:grid;
  place-items:center;
  height:100%;
  min-height:220px;
  background:radial-gradient(ellipse at 40% 30%,#232323,#0a0a0a)
}
.no-photo img {
  width:90px;
  height:90px;
  object-fit:contain
}
.loading,.empty {
  grid-column:1/-1;
  text-align:center;
  padding:65px 20px;
  color:#aaa;
  font-size:13px;
  border:1px dashed var(--border-subtle);
  border-radius:24px
}
.cta-banner {
  max-width:1248px;
  margin:0 auto 100px;
  padding:60px 65px;
  border:1px solid var(--border-subtle);
  border-radius:32px;
  background:radial-gradient(ellipse at 100% 100%,#ff4d4d0e,transparent 60%),linear-gradient(135deg,#141414,#090909);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}
.cta-banner h2 {
  font-size:clamp(30px,3.2vw,46px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-1.6px;
  margin:26px 0 18px
}
.cta-banner p {
  font-size:12px;
  color:#999;
  font-weight:300
}
.cta-banner .ih-button {
  white-space:nowrap;
  flex-shrink:0
}
.cta-banner .ih-xperience-logo {
  width:270px
}
.featured-image>img {
  position:absolute;
  inset:0
}
.card-image .no-photo {
  min-height:0
}
@media(max-width:1000px) {
  .blog-section {
    padding-top:65px
  }
  .filters-row {
    align-items:flex-start;
    flex-direction:column
  }
  .search-box {
    width:100%
  }
  .search-box input {
    width:100%
  }
  .featured-copy {
    padding:30px
  }
  .post-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .cta-banner {
    margin-left:26px;
    margin-right:26px;
    padding:40px
  }
  .read-row {
    flex-wrap:wrap
  }
}
@media(max-width:600px) {
  .masthead {
    padding:65px 22px 30px;
    min-height:500px;
    background-image:linear-gradient(90deg,#030303c9,#0303039c),url('/HomeInterrahubMovil.PNG')
  }
  .masthead h1 {
    font-size:53px;
    letter-spacing:-2.7px;
    line-height:1.08
  }
  .masthead .mini-label {
    font-size:8px;
    letter-spacing:1.5px
  }
  .masthead>p:not(.mini-label) {
    font-size:14px
  }
  .masthead-foot {
    padding-top:48px;
    font-size:8px;
    gap:18px
  }
  .masthead-foot>span {
    max-width:160px;
    line-height:1.8
  }
  .masthead-foot a {
    font-size:0;
    gap:0
  }
  .blog-section {
    padding:55px 20px 60px
  }
  .section-head {
    align-items:flex-start;
    flex-direction:column;
    gap:14px
  }
  .section-head h2 {
    font-size:29px;
    letter-spacing:-1px
  }
  .category-filters {
    gap:7px
  }
  .category-filters button {
    padding:9px 13px;
    font-size:10px
  }
  .filters-row {
    margin:26px 0
  }
  .featured-card {
    grid-template-columns:1fr;
    border-radius:24px
  }
  .featured-image {
    min-height:230px;
    height:230px
  }
  .featured-copy {
    padding:27px
  }
  .featured-copy h3 {
    font-size:27px
  }
  .post-grid {
    grid-template-columns:1fr;
    gap:22px
  }
  .card-copy {
    padding:25px
  }
  .read-row {
    font-size:9px
  }
  .cta-banner {
    margin:0 20px 60px;
    padding:34px 27px;
    border-radius:26px;
    display:block
  }
  .cta-banner h2 {
    font-size:34px
  }
  .cta-banner .ih-button {
    margin-top:18px
  }
  .cta-banner .ih-xperience-logo {
    width:240px
  }
}