/* ==========================================================
   MAKALU — Home (selector de verticales)
   ========================================================== */

/* ---------- Escenario de fondo ----------
   Capas: gradientes siempre presentes + fotos opcionales.
   Cuando estén las fotos reales en assets/img/, se agregan
   como capas extra (ver LEEME.md en assets/img/). */
.stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(ellipse 60% 45% at 18% 12%, rgba(46, 84, 74, 0.35), transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(120, 78, 40, 0.22), transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 105%, rgba(10, 34, 26, 0.55), transparent 70%),
    linear-gradient(180deg, #060d13 0%, #04090e 55%, #030608 100%);
}

/* Fotos de ambientación laterales (se activan si existen los archivos).
   Reemplazar por las fotos finales del cliente:
   - assets/img/bg-left.jpg   → tuberías / acero
   - assets/img/bg-right.jpg  → buque portacontenedores  */
.stage::before,
.stage::after {
  content: '';
  position: absolute;
  top: 0;
  width: 34%;
  height: 62%;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  pointer-events: none;
}

.stage::before {
  left: 0;
  background-image: url('../img/bg-left.jpg');
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.95) 30%, transparent 85%);
  mask-image: linear-gradient(115deg, rgba(0,0,0,.95) 30%, transparent 85%);
}

.stage::after {
  right: 0;
  background-image: url('../img/bg-right.jpg');
  -webkit-mask-image: linear-gradient(245deg, rgba(0,0,0,.95) 30%, transparent 85%);
  mask-image: linear-gradient(245deg, rgba(0,0,0,.95) 30%, transparent 85%);
}

/* Todo el contenido por encima de las capas de fondo */
.stage > * { position: relative; z-index: 1; }

/* ---------- Hero / cabecera ---------- */
.hero {
  text-align: center;
  padding: 64px 24px 40px;
}

.hero .brand-logo { height: clamp(48px, 8vw, 84px); }

.hero-tagline {
  margin-top: 26px;
  font-family: var(--font-display);
  font-size: clamp(14px, 2vw, 19px);
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-main);
}

.hero-focus {
  margin-top: 12px;
  font-size: clamp(12px, 1.5vw, 15px);
}

/* ---------- Grid de verticales ---------- */
.verticals {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  max-width: var(--container);
  margin: 26px auto 0;
  padding: 0 24px;
  align-items: stretch;
}

.vertical-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 56px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

/* Foto de fondo por card (opcional): se activa al copiar el archivo
   correspondiente en assets/img/ */
.vertical-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.56;
  filter: contrast(1.2);
  transition: opacity .35s ease, transform .5s ease;
}

.vertical-card.card-fleet::before  { background-image: url('../img/card-fleet.jpg'); }
.vertical-card.card-oilgas::before { background-image: url('../img/card-oilgas.jpg'); }

.vertical-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 22%, rgba(4, 10, 8, 0.82));
}

.vertical-card > * { position: relative; z-index: 1; }

.vertical-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 44px var(--accent-glow);
}

.vertical-card:hover::before { opacity: 0.66; transform: scale(1.04); }

.vertical-icon {
  width: 58px;
  height: 58px;
  color: var(--accent-bright);
}

.vertical-icon svg { width: 100%; height: 100%; }

.vertical-brand {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: 9px;
  text-indent: 9px;
  color: #fff;
  text-transform: uppercase;
}

.vertical-name {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 600;
  letter-spacing: 4px;
  text-indent: 4px;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-top: -10px;
}

.vertical-desc {
  font-size: 15.5px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.65;
}

.vertical-card .btn-outline { margin-top: 10px; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .stage::before, .stage::after { width: 55%; opacity: 0.3; }

  .hero { padding: 48px 20px 28px; }

  .verticals {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 20px;
  }

  .vertical-card { padding: 44px 24px; }
}