body{
    font-family:'Poppins', sans-serif;
    margin:0;
    background:#0f172a;
    color:#fff;
}

/* HERO */
.plantilla-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:80px 10%;
    gap:40px;
    background:linear-gradient(120deg,#020617,#0f172a,#020617);
}

.plantilla-badge{
    background:#2563eb;
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    display:inline-block;
    margin-bottom:15px;
}

.plantilla-hero h1{
    font-size:46px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:20px;
}

.plantilla-descripcion{
    font-size:18px;
    color:#cbd5e1;
    margin-bottom:25px;
}

.plantilla-beneficios{
    list-style:none;
    padding:0;
    margin-bottom:30px;
}

.plantilla-beneficios li{
    margin-bottom:10px;
    color:#e2e8f0;
}

.btn-descargar{
    display:inline-block;
    background:#2563eb;
    color:white;
    padding:14px 28px;
    border-radius:30px;
    font-weight:600;
    text-decoration:none;
    transition:0.3s;
}

.btn-descargar:hover{
    background:#1d4ed8;
}

.btn-descargar.grande{
    font-size:18px;
    padding:18px 36px;
}

.plantilla-hero-imagen img{
    width:480px;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,0.6);
}

/* DETALLE */
.plantilla-detalle{
    padding:80px 10%;
    text-align:center;
}

.plantilla-detalle h2{
    font-size:34px;
    margin-bottom:40px;
}

.detalle-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.detalle-item{
    background:#020617;
    padding:30px;
    border-radius:16px;
    border:1px solid #1e293b;
}

.detalle-item h3{
    margin-bottom:12px;
    color:#60a5fa;
}

/* CTA */
.plantilla-cta{
    padding:80px 10%;
    text-align:center;
    background:linear-gradient(120deg,#020617,#0f172a);
}

.plantilla-cta h2{
    font-size:32px;
    margin-bottom:20px;
}

.plantilla-cta p{
    color:#cbd5e1;
    margin-bottom:30px;
}

/* FOOTER */
.plantilla-footer{
    text-align:center;
    padding:30px;
    background:#020617;
    font-size:14px;
    color:#94a3b8;
}
/* =========================
   HERO PREMIUM MÓVIL
========================= */
@media (max-width: 768px){

  .plantilla-hero{
      flex-direction: column;
      text-align: center;
      padding: 70px 22px;
      gap: 35px;
      min-height: 90vh;
      justify-content: center;
  }

  .plantilla-hero-imagen{
      order: -1;
  }

  .plantilla-hero-imagen img{
      width: 100%;
      max-width: 360px;
      border-radius: 22px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  }

  .plantilla-badge{
      font-size: 12px;
      padding: 7px 16px;
      background: linear-gradient(135deg,#2563eb,#1d4ed8);
  }

  .plantilla-hero h1{
      font-size: 34px;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -0.5px;
  }

  .plantilla-descripcion{
      font-size: 16px;
      line-height: 1.6;
      max-width: 95%;
      margin: 0 auto 25px auto;
      color: #cbd5e1;
  }

  .plantilla-beneficios{
      text-align: left;
      max-width: 420px;
      margin: 0 auto 30px auto;
      font-size: 15px;
  }

  .plantilla-beneficios li{
      margin-bottom: 12px;
  }

  .btn-descargar{
      width: 100%;
      max-width: 300px;
      padding: 16px 0;
      border-radius: 50px;
      font-size: 16px;
      box-shadow: 0 12px 30px rgba(37,99,235,0.5);
  }

  .btn-descargar:hover{
      transform: translateY(-3px);
  }

  .plantilla-detalle{
      padding: 70px 22px;
  }

  .plantilla-cta{
      padding: 70px 22px;
  }

}