/* =========================================
   HERO (fondo industrial + overlay)
   ========================================= */
.hero-section{
  background: url('../img/header.png') center center/cover no-repeat;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* tira pegada abajo */
  position: relative;
  color:#fff;
}

.hero-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px);
  pointer-events: none;              /* ← evita bloquear clics/gestos */
  z-index: 0;
}

/* ===== Header: limpia fondos heredados ===== */
header,
.site-header,
header.site-header,
header[class*="bg-"],
header.bg-body,
header.bg-body-tertiary {
  background: transparent !important;
  --bs-bg-opacity: 0 !important;
}

/* Navbar fijo sin sombra */
.site-header.sticky-top,
.site-header.fixed-top {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== Home: hero sube por detrás del navbar ===== */
:root { --nav-h: 80px; }  /* ajusta a tu altura real */
body:not(.is-home){ padding-top: var(--nav-h); }
body.is-home{ padding-top: 0 !important; }

body.is-home .site-header + .hero-section,
body.is-home header + .hero-section,
body.is-home .navbar + .hero-section { margin-top: 0 !important; }

/* mete el hero por detrás del navbar fijo */
body.is-home .hero-section{
  margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + 16px);
}

body.is-home header + *,
body.is-home .site-header + *,
body.is-home .navbar + * { margin-top: 0 !important; }

.site-header { --bs-navbar-bg: transparent !important; }

/* =========================================
   GRID 70/30
   ========================================= */
.hero-grid{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 18px;
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 20px 24px;
}

.hero-left{
  display:flex; flex-direction:column; justify-content:center;
  min-height: 54vh;
}

.hero-title{
  font-size: clamp(40px,7vw,68px);
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0 0 8px 0;
}

.hero-subtitle{
  font-size: clamp(16px,2.2vw,20px);
  color: rgba(255,255,255,.85);
  margin: 0 0 24px 0;
}

/* CTAs */
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 16px; }
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:14px;
  font-weight:600; text-decoration:none; transition: all .15s ease-in-out;
  border: 1px solid rgba(255,255,255,.18);
}
.cta-primary{ background:#14a34a; color:#fff; border-color:transparent; }
.cta-primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.cta-secondary{ background: rgba(255,255,255,.06); color:#fff; }
.cta-secondary:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }

/* Chips */
.hero-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.chip{
  font-size:14px; line-height:1; padding:10px 14px;
  border-radius:999px;
  color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  transition:.15s ease-in-out;
}
.chip:hover{ background: rgba(255,255,255,.12); }

/* =========================================
   MOSAICO DERECHA / CARTA BASE
   ========================================= */
.hero-right{
  display:grid; grid-template-rows: 1fr 1fr; gap:18px; min-height: 54vh;
}

.hero-card{
  position: relative; border-radius:18px; overflow: hidden;
  display:block; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.16);
  background: #0f0f0f;
  isolation:isolate;
  height: 100%;
}
.hero-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-size: cover; background-position: center;
  opacity:.6; transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}
.hero-card--a::before{ background-image: url('../img/mosaic_automatizacion.png'); }
.hero-card--b::before{ background-image: url('../img/mosaic_fast.png'); }
.hero-card:hover::before{ opacity:.8; transform: scale(1.02); }

/* Fondo por variable CSS (--bg) si viene inline */
.hero-card[style*="--bg:"]::before{ background-image: var(--bg) !important; }

.card-overlay{
  position:absolute; inset:0; padding:18px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
}
.card-overlay .kicker{
  font-size:12px; text-transform:uppercase; letter-spacing:.12em;
  color: rgba(255,255,255,.75);
}
.card-overlay h3{
  margin:4px 0 6px; font-size: clamp(18px,2.6vw,22px); font-weight:800;
}
.card-overlay .link{ font-size:14px; color: rgba(255,255,255,.9); }

/* =========================================
   TIRA HORIZONTAL (debajo del hero)
   ========================================= */
/* Tira horizontal con degradado lateral */
.strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1280px;
  margin: 8px auto 22px;
  padding: 6px 20px;
  overflow: hidden; /* importante: recorta el degradado */
}

.strip-track {
  flex: 1;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 10px 0; /* un respiro arriba/abajo */
  
  /* ← degradado lateral */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.strip-track::-webkit-scrollbar { display: none; }


.strip-item{
  min-width: 260px;
  border-radius:16px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  display:flex; flex-direction: column; align-items:center; justify-content:center;
  gap:10px; text-decoration:none; color:#fff; padding:14px 16px;
  transition: transform .15s ease, background .15s ease;
}
.strip-item:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12); }
.strip-item img{ max-height:64px; width:auto; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.strip-title{
  max-width: 92%; text-align:center; font-weight:600; font-size:14px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.strip-arrow{
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s ease-in-out;
}
.strip-arrow:hover{ background: rgba(255,255,255,.18); transform: translateY(-1px); }

/* =========================================
   MINI-CARROUSEL DE CASOS (dentro de .hero-right)
   ========================================= */
.cases-carousel{
  position: relative;
  width: 100%;                   /* ← ancho explícito */
  min-height: 280px;             /* base de altura */
  display: grid;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  z-index: 2;                     /* sobre overlay */
}

.cases-track{
  width: 100%;                   /* ← ancho explícito */
  height: 100%;
  align-items: stretch;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 6%;
  padding: 4px 6%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: rgba(255,255,255,.04);
}
.cases-track::-webkit-scrollbar{ display: none; }

.case-slide{
  flex: 0 0 88%;                 /* 1 visible + asomo laterales */
  height: 100%;
  scroll-snap-align: center;
  transform: scale(.94);
  opacity: .78;
  transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease;
  box-shadow: 0 26px 60px rgba(0,0,0,.35);
}
.case-slide.is-active{
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
}

/* Flechas flotantes */
.cc-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff; font-size: 22px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  z-index: 4;                      /* ← por encima de overlay y slides */
  transition: background .2s ease, transform .2s ease;
}
.cc-arrow:hover{ background: rgba(255,255,255,.18); transform: translateY(-50%) scale(1.05); }
.cc-arrow.left{ left: 6px; } .cc-arrow.right{ right: 6px; }

/* Responsive */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-right{ order: 2; min-height: 36vh; }
  .hero-left{ order: 1; }
  .cases-track{ scroll-padding: 4%; padding: 4px 4%; }
  .case-slide{ flex-basis: 92%; }
}

@media (max-width: 768px){
  .cases-carousel{ min-height: 220px; }
  /* si quieres aspecto 16:9 solo en móvil */
  body.is-home .case-slide{ height: auto !important; aspect-ratio: 16/9; }
}

@media (prefers-reduced-motion: reduce){
  .case-slide{ transition: none; }
}

/* ==== PARCHE HOME: altura consistente para el carrusel ==== */
body.is-home .hero-right{
  display: block !important;
  height: 54vh !important;
  min-height: 0 !important;
}

body.is-home .cases-carousel{ height: 100% !important; }
body.is-home .cases-track{ height: 100% !important; align-items: stretch !important; }
body.is-home .case-slide{ height: 100% !important; flex: 0 0 88%; }



/* --- Correcciones generales anti-desbordes --- */
html, body { overflow-x: hidden; }                  /* cinturón de seguridad */
.strip { max-width: 100vw; overflow: hidden; }      /* no salir del viewport */
.strip-track { width: 100%; -webkit-overflow-scrolling: touch; }

/* --- Móvil: < 640px --- */
@media (max-width: 640px){
  /* padding fluido + espacio para “safe area” (iPhone) */
  .strip{
    padding-inline: max(12px, env(safe-area-inset-left))
                    max(12px, env(safe-area-inset-right));
    gap: 8px;
  }

  /* degradado más corto y que no “estire” el ancho */
  .strip-track{
    gap: 8px;
    padding-block: 8px;
    /* La máscara ahora deja 10% de fade a cada lado */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  }

  /* Tarjeta flexible que nunca se sale (ancho: 72–92% del viewport) */
  .strip-item{
    min-width: clamp(200px, 78vw, 320px);
    max-width: 92vw;
    padding: 12px;
  }
  .strip-item img{ max-height: 52px; }

  /* En móvil, las flechas estorban: ocúltalas (gesto swipe manda) */
  .strip .strip-arrow{ display: none; }
}

/* --- Tablet: 640–1024px (opcional, se ve mejor) --- */
@media (min-width: 640px) and (max-width: 1024px){
  .strip{
    padding-inline: clamp(12px, 4vw, 20px);
  }
  .strip-track{
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .strip-item{
    min-width: clamp(220px, 46vw, 320px);
  }
}