/* Ajustes compartidos: imagen de portada, blog y respuesta para dispositivos */
.hero {
  background-color: #171a1c;
  background-image:
    linear-gradient(90deg, rgba(12, 15, 16, .97) 0%, rgba(12, 15, 16, .89) 48%, rgba(12, 15, 16, .48) 100%),
    url("https://images.unsplash.com/photo-1562925180-332d9da51800?auto=format&fit=crop&w=1920&q=85");
  background-position: center;
  background-size: cover;
}

.hero-grid { opacity: .65; }
.main-nav a[aria-current="page"] { color: var(--green); }

.blog-page { background: #f4f5f1; }
.blog-hero {
  min-height: 610px;
  padding: 110px clamp(24px, 8vw, 130px);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  overflow: hidden;
  position: relative;
  background: #171a1c;
  color: #fff;
}
.blog-hero:after { content: ""; position: absolute; width: 35vw; height: 130%; right: -8vw; top: -15%; border: 1px solid rgba(0,168,79,.45); transform: skewX(-18deg); }
.blog-hero > div { position: relative; z-index: 1; }
.blog-hero h1 { font-size: clamp(64px, 8vw, 124px); line-height: .88; letter-spacing: -.07em; margin: 22px 0 32px; }
.blog-hero h1 span { color: var(--green); }
.blog-hero > div > p:last-child { color: #b4bbb7; font-size: 18px; line-height: 1.8; max-width: 640px; }
.blog-hero-index { justify-self: end; display: grid; color: #34393a; text-align: right; }
.blog-hero-index span { color: var(--green); letter-spacing: .3em; font-size: 11px; }
.blog-hero-index strong { font-size: clamp(80px, 13vw, 190px); letter-spacing: -.09em; line-height: .8; writing-mode: vertical-rl; }
.blog-content { padding: 110px clamp(24px, 7vw, 110px); }
.blog-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; margin-bottom: 60px; }
.blog-heading h2, .blog-cta h2 { font-size: clamp(42px, 5vw, 76px); line-height: .98; letter-spacing: -.055em; margin: 18px 0 0; }
.blog-heading > p { color: var(--muted); line-height: 1.75; }
.article-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.article-card { background: #fff; display: grid; grid-template-columns: .9fr 1.1fr; min-height: 310px; }
.article-featured { grid-row: span 2; grid-template-columns: 1fr; }
.article-image { position: relative; min-height: 245px; overflow: hidden; background: #222728; }
.article-featured .article-image { min-height: 370px; }
.article-image:before, .article-image:after { content: ""; position: absolute; border: 2px solid var(--green); transform: rotate(-24deg); }
.article-image:before { width: 85%; height: 90%; left: -30%; bottom: -30%; }
.article-image:after { width: 70%; height: 120%; right: -32%; top: -35%; }
.article-safety { background: #29302e; }
.article-materials { background: #1d2223; }
.article-image > span { position: absolute; z-index: 1; bottom: 24px; left: 24px; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; }
.article-body { padding: 30px; display: flex; flex-direction: column; }
.article-meta { color: var(--green)!important; font-size: 10px!important; text-transform: uppercase; letter-spacing: .13em; }
.article-body h3 { font-size: clamp(21px, 2vw, 30px); line-height: 1.25; margin: 12px 0; }
.article-body > p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.article-body a { margin-top: auto; color: var(--ink); font-size: 12px; text-decoration: none; font-weight: 800; }
.article-body a span { color: var(--green); }
.blog-cta { background: #202425; color: #fff; text-align: center; padding: 110px 24px; display: flex; flex-direction: column; align-items: center; }
.blog-cta h2 span { color: var(--green); }
.blog-cta .button { margin-top: 35px; }
.back-home { color: #aeb5b1; font-size: 12px; margin-top: 25px; text-decoration: none; }

@media (max-width: 1100px) {
  .main-nav { gap: 20px; }
  .main-nav a { font-size: 13px; }
  .hero h1 { max-width: 800px; }
  .article-card { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .main-nav { box-shadow: 0 18px 30px rgba(0,0,0,.12); }
  .main-nav a { width: 100%; padding: 10px 4px; }
  .nav-cta { padding: 15px!important; text-align: center; }
  .hero { background-position: 62% center; }
  .blog-hero { grid-template-columns: 1fr; min-height: 540px; }
  .blog-hero-index { display: none; }
  .blog-heading, .article-grid { grid-template-columns: 1fr; gap: 24px; }
  .article-featured { grid-row: auto; }
  .article-card { grid-template-columns: .8fr 1.2fr; }
  .article-featured { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  body { overflow-x: hidden; }
  .hero { min-height: 780px; padding: 78px 20px 190px; background-position: 68% center; }
  .hero:before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(12,15,16,.18), rgba(12,15,16,.5)); }
  .hero-content { z-index: 3; }
  .hero h1 { font-size: clamp(43px, 13vw, 56px); overflow-wrap: anywhere; }
  .hero-copy { font-size: 16px; line-height: 1.6; }
  .hero-stats span { font-size: 11px; }
  .section-heading h2, .about-copy h2, .process h2 { overflow-wrap: anywhere; }
  .quote-form { padding: 28px 20px; }
  .blog-hero { min-height: 500px; padding: 80px 22px; }
  .blog-hero h1 { font-size: clamp(52px, 17vw, 78px); }
  .blog-content { padding: 75px 20px; }
  .blog-heading { margin-bottom: 38px; }
  .blog-heading h2, .blog-cta h2 { font-size: 42px; }
  .article-card, .article-featured { grid-template-columns: 1fr; }
  .article-image, .article-featured .article-image { min-height: 250px; }
  .article-body { min-height: 310px; padding: 25px; }
  footer div { flex-wrap: wrap; }
}