/* Override header to dark on this page */
  .site-header { background: var(--bg-darker); border-bottom: 1px solid rgba(255,255,255,.08); }
  .site-header * { color: #fff !important; }
  .site-header .nav-main a:hover { color: var(--mint) !important; }
  /* Hero video background */
  .hero-video {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    pointer-events: none;
  }

  /* Dark overlay */
  .cine-grad {
    background:
      radial-gradient(ellipse at 70% 30%, rgba(14,125,111,.25), transparent 50%),
      radial-gradient(ellipse at 20% 80%, rgba(14,125,111,.12), transparent 55%),
      linear-gradient(180deg, rgba(5,12,11,.55) 0%, rgba(5,12,11,.88) 100%) !important;
  }

  .cine-headline { font-size: clamp(86px, 12vw, 160px) !important; line-height: .92 !important; }

  .huge-h,
  .split .left h2,
  .fac h2,
  .bigcta h2 { font-size: 86px !important; line-height: .95 !important; letter-spacing: -.04em; }

  .cine-center { grid-template-columns: 1fr !important; max-width: 780px; }

  /* Materials category badge */
  .mat-card .top {
    background: rgba(10, 20, 19, 0.72) !important;
    color: #fff !important;
    backdrop-filter: blur(6px);
  }

  /* Gallery layout */
  .gal .gal-grid { display: none; }
  .gal-row-top {
    display: grid; grid-template-columns: 1fr 1.6fr;
    gap: 40px; align-items: start; margin-bottom: 16px;
  }
  .gal-intro { padding-top: 8px; }
  .gal-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .gal-2x2 .gal-item { aspect-ratio: 1 / 1; grid-column: unset !important; grid-row: unset !important; }
  .gal-row-bot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gal-row-bot .gal-item { aspect-ratio: 4 / 3; grid-column: unset !important; grid-row: unset !important; }

  /* Alignment */
  .mat-strip .shell, .split .shell, .fac .shell, .test-slab .shell, .laser-features .shell { max-width: 1440px; }
  .fac .shell > div:first-child { order: 2; }
  .fac .shell > div:last-child  { order: 1; }
  .fac .shell { align-items: stretch; }
  .fac .shell > div[data-px] { position: relative; overflow: hidden; min-height: 300px; }
  .fac .shell > div[data-px] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

  /* ── Mega marquee text-transform override ── */
  .mega-marquee { overflow: hidden; }
  .mega-marquee .track span { text-transform: none !important; }

  /* ── Testimonials 3-column auto-cycle ── */
  .test-slab {
    padding: 20px 0 40px;
    background: var(--paper);
  }
  /* 3-col grid — cards fade in/out */
  .test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .test-grid .test-card {
    transition: opacity 1.2s ease;
  }
  .test-grid .test-card.tf-fading { opacity: 0; }
  @media (max-width: 900px) { .test-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .test-grid { grid-template-columns: 1fr; } }

  /* ── Featured Solutions: smooth crossfade via two-layer bg ── */

  /* ── Materials carousel ── */
  .mat-car-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .mat-car-outer {
    flex: 1;
    overflow: hidden;
  }
  .mat-car-track {
    display: flex;
    gap: 16px;
    transition: transform .55s cubic-bezier(.2,.9,.2,1);
    will-change: transform;
  }
  .mat-slide {
    flex: 0 0 calc(25% - 12px);
    background: var(--dark-grey);
    background-color: var(--dark-grey);
    border-radius: 14px;
    padding: 28px 28px 28px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform .3s;
    overflow: hidden;
    position: relative;
  }
  .mat-slide:hover { transform: translateY(-3px); }
  .ms-name {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
    margin-bottom: 10px;
    line-height: 1.15;
    position: relative;
    z-index: 1;
  }
  .ms-grade {
    font-size: 14px;
    font-weight: 600;
    color: var(--mint);
    letter-spacing: .06em;
    position: relative;
    z-index: 1;
  }
  .mat-arrow {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s, color .2s;
  }
  .mat-arrow:hover { background: var(--dark-grey); color: #fff; border-color: var(--dark-grey); }
  @media (max-width: 900px) {
    .mat-slide { flex: 0 0 calc(33.333% - 11px); }
  }
  @media (max-width: 640px) {
    .mat-slide { flex: 0 0 calc(50% - 8px); }
  }
  @media (max-width: 420px) {
    .mat-slide { flex: 0 0 100%; }
  }

  /* ── Featured Solutions cycling cards ── */
  .feat-sol-wrap { background: var(--paper); padding: 0; }
  .feat-sol-header { padding: 48px var(--pad) 32px; max-width: 1440px; margin: 0 auto; }
  .feat-sol-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--pad) 20px;
  }
  .feat-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 44px 48px;
    background: var(--ink);
  }
  .feat-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity .45s ease;
  }
  .feat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,12,11,.9) 0%, rgba(5,12,11,.45) 55%, rgba(5,12,11,.18) 100%);
    z-index: 1;
  }
  .feat-content { position: relative; z-index: 2; }
  .feat-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.58);
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .feat-title {
    font-size: clamp(34px, 3.8vw, 56px);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -.025em;
    min-height: 1.1em;
    transition: opacity .35s ease;
  }
  .feat-title.feat-fading { opacity: 0; }
  .feat-card .btn-cine { margin-top: 28px; }
  .feat-card .btn-cine:hover { background: #b8422e; color: #fff; transform: translateY(-2px); }
  .feat-card .btn-cine:hover .ar { background: rgba(255,255,255,.25); color: #fff; }
  .feat-card .btn-cine::after { display: none; }

  @media (max-width: 768px) {
    .feat-sol-duo { grid-template-columns: 1fr; gap: 16px; }
    .feat-card { min-height: 320px; padding: 32px 28px; }
  }

  /* ── Responsive: tablet (768px) — gallery stacks ── */
  @media (max-width: 768px) {
    .gal-row-top {
      grid-template-columns: 1fr !important;
      gap: 24px;
    }
    .gal-carousel-wrap { aspect-ratio: 16 / 8; }
  }

  /* ── Mobile headline scale-down ── */
  @media (max-width: 640px) {
    /* Cinematic hero: "Bespoke / Metal / fabrication." */
    .cine-headline { font-size: clamp(32px, 9.5vw, 46px) !important; line-height: .96 !important; }

    /* Section big heads: Fac, BigCTA, Split */
    .huge-h,
    .split .left h2,
    .fac h2,
    .bigcta h2 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.05 !important; }

    /* Featured solutions */
    .feat-title { font-size: clamp(28px, 7.5vw, 40px); }
    .feat-sol-header { padding: 32px var(--pad) 16px; }

    /* Gallery carousel: full width below text */
    .gal-row-top { grid-template-columns: 1fr !important; gap: 20px; }
    .gal-carousel-wrap { aspect-ratio: 4 / 3; }
    /* Hide nav arrows on tiny screens — swipe suffices */
    .gal-car-arrow { width: 36px; height: 36px; font-size: 14px; }
  }

  /* ── Laser feature cards — integrado con módulo TRUMPF ── */
  .laser-features {
    /* Mismo fondo que .fac → continuidad visual */
    background: var(--bg-dark);
    /* El .fac tiene padding-bottom:160px; arrancamos justo ahí, sin gap */
    padding: 0 0 80px;
  }
  /* Mismo padding que .fac .shell → ancho y márgenes idénticos al módulo TRUMPF */
  .laser-features .shell {
    padding-top: 40px;
  }
  .lf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    /* Color del gap = mismo que los bordes del resto de la sección oscura */
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    overflow: hidden;
  }
  .lf-card {
    /* Fondo coherente con las tarjetas oscuras del sitio */
    background: rgba(255,255,255,.03);
    padding: 40px 32px 36px;
    position: relative;
    transition: background .25s;
    cursor: default;
    display: flex;
    flex-direction: column;
  }
  .lf-stat { margin-top: auto; }
  .lf-card--active,
  .lf-card:hover { background: rgba(14,125,111,.1); }
  /* Línea de acento superior — color teal Synergynox */
  .lf-card--active::after,
  .lf-card:hover::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--teal);
    border-radius: 0;
  }
  .lf-icon { color: var(--mint); margin-bottom: 20px; }
  .lf-icon svg { width: 36px; height: 36px; }
  .lf-num {
    font-size: 64px;
    font-weight: 900;
    color: rgba(255,255,255,.05);
    line-height: 1;
    position: absolute;
    top: 16px; right: 24px;
    letter-spacing: -.04em;
  }
  .lf-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -.01em;
  }
  .lf-desc {
    font-size: 14px;
    color: rgba(255,255,255,.55);
    line-height: 1.65;
    margin-bottom: 20px;
  }
  .lf-stat {
    font-size: 13px;
    font-weight: 700;
    color: var(--mint);
    letter-spacing: .04em;
  }
  @media (max-width: 900px) { .lf-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .lf-grid { grid-template-columns: 1fr; } }

  /* ── Gallery Carousel ── */
  .gal-carousel-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #111;
    aspect-ratio: 16/7;
  }
  .gal-carousel-track {
    display: flex;
    height: 100%;
    transition: transform .75s cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }
  .gal-carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .gal-carousel-slide .lbl {
    position: absolute;
    bottom: 20px; left: 24px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    background: rgba(0,0,0,.55);
    padding: 6px 12px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
  }
  .gal-car-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .2s;
    z-index: 10;
  }
  .gal-car-arrow:hover { background: rgba(255,255,255,.3); }
  .gal-car-prev { left: 16px; }
  .gal-car-next { right: 16px; }
  .gal-car-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .gal-car-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--line);
    transition: background .25s, transform .25s;
    cursor: pointer;
  }
  .gal-car-dot.active { background: var(--teal); transform: scale(1.4); }