/* =========================================================
   landing.css — bloques de las landings de subdominio
   (soluciones, iot, automatizacion, asistenteia, ...)
   Se carga DESPUÉS de i4.css.
   ========================================================= */

/* ---- Tipografía de landing ---- */
h2{font-size:2.5rem; margin:2rem 0 1.5rem;}
h3{font-size:1.3rem; margin:1.5rem 0 0.8rem;}
p{margin:0 0 1rem 0; color:var(--ink-soft);}

/* ---- Botones ---- */
.btn{
  display:inline-block;
  padding:0.95rem 2rem;
  border-radius:8px; border:none;
  font-weight:600; font-size:0.95rem; text-align:center;
  cursor:pointer;
  transition:all 0.3s;
}
.btn-primary{background:var(--grad-alt); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(219, 78, 79, 0.3);}
.btn-secondary{background:var(--grad-teal); color:#fff;}
.btn-secondary:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(89, 180, 180, 0.3);}

/* ---- Hero ---- */
.hero{
  padding:4rem 0;
  background:linear-gradient(135deg, rgba(89, 180, 180, 0.05) 0%, rgba(146, 131, 189, 0.05) 100%);
}
.hero .wrap{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;}
.hero-text h1{font-size:3rem; line-height:1.2; margin-bottom:1.5rem;}
.hero-text .highlight{
  background:linear-gradient(90deg, var(--teal), var(--violet));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-text > p{font-size:1.1rem; margin-bottom:2rem;}
.hero-cta{display:flex; gap:1rem;}
.hero-visual{display:flex; justify-content:center; align-items:center;}

/* Caja lateral del hero (info o QR) */
.info-box, .qr-box{
  background:var(--bg-alt);
  padding:2rem;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  text-align:center;
}
.info-box strong, .qr-box strong{display:block; margin-bottom:1rem; font-size:1.1rem;}
.info-box p, .qr-box p{margin:1rem 0 0; font-size:0.9rem;}
.qr-box img{width:220px; height:220px; display:block; margin:1rem auto;}

/* ---- Features ---- */
.features{padding:3rem 0;}
.features-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; margin-top:3rem;}
.feature-card{
  display:flex; flex-direction:column; justify-content:flex-start;
  min-height:200px;
  padding:2rem; border-radius:12px;
  background:linear-gradient(135deg, var(--coral) 0%, var(--plum) 50%, var(--blue2) 100%);
  color:#fff;
  transition:all 0.3s;
}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 12px 32px rgba(219, 78, 79, 0.25);}
.feature-card h3{margin-top:0; color:#fff;}
.feature-card p{margin:0; color:rgba(255,255,255,0.9);}

/* ---- Casos de uso ---- */
.usecases{padding:3rem 0;}
.usecases-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; margin-top:3rem;}
.usecase-item{padding:2rem; border-radius:12px; background:var(--grad-teal); color:#fff;}
.usecase-item h3{margin-top:0; color:#fff;}
.usecase-item ul{margin:1rem 0 0 1.5rem;}
.usecase-item li{margin-bottom:0.5rem; font-size:0.95rem; color:rgba(255,255,255,0.9);}

/* ---- Stack técnico ---- */
.technical{padding:3rem 0;}
.tech-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; margin-top:3rem;}
.tech-item{padding:2rem; border-radius:12px; background:var(--grad-teal); color:#fff;}
.tech-item strong{display:block; margin-bottom:0.5rem; font-size:1.1rem; color:#fff;}
.tech-item p{margin:0; font-size:0.95rem; color:rgba(255,255,255,0.9);}

/* ---- CTA final ---- */
.cta-section{
  padding:3rem 0;
  background:linear-gradient(135deg, var(--teal-deep) 0%, var(--violet-deep) 100%);
  color:#fff;
  text-align:center;
}
.cta-section h2{color:#fff; font-size:2.2rem;}
.cta-section p{max-width:600px; margin-left:auto; margin-right:auto; color:rgba(255,255,255,0.9);}
.cta-section .btn{margin:0 0.5rem;}
.cta-section .btn:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.3);}

/* ---- Mobile ---- */
@media (max-width:860px){
  h2{font-size:1.8rem;}
  .hero .wrap{grid-template-columns:1fr;}
  .hero-text h1{font-size:2rem;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
  .features-grid, .usecases-grid, .tech-grid{grid-template-columns:1fr;}
  .cta-section > .wrap > div{display:flex; flex-direction:column; gap:12px; align-items:stretch;}
  .cta-section .btn{margin:0; width:100%;}
}