/* ==========================================================================
   VARIABLES DE DISEÑO - TELWARE PERÚ (BLUE IDENTITY)
   ========================================================================== */
:root {
  --primary: #0D2855;
  --primary-light: #2563EB;
  --accent-success: #10B981;
  --bg-main: #F5F7FA;
  --bg-surface: #FFFFFF;
  --text-pure: #1F2937;
  --text-secondary: #64748B;
  --text-white: #FFFFFF;
  --border-light: #E2E8F0;
  --radius-lg: 16px;
  --radius-md: 8px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--text-pure); background: var(--bg-main); line-height: 1.6; }
.container { width: 92%; max-width: 1200px; margin: 0 auto; }
.section { padding: 80px 0; }
.section-dark { background: var(--bg-surface); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }

/* ==========================================================================
   CABECERAS
   ========================================================================== */
.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { font-size: 36px; font-weight: 800; color: var(--primary); margin-bottom: 15px; }
.section-header p { font-size: 18px; color: var(--text-secondary); max-width: 700px; margin: 0 auto; }

/* ==========================================================================
   COMPONENTES: HERO & BADGE
   ========================================================================== */
.hero-main { padding: 120px 0; background: linear-gradient(135deg, #FFFFFF 0%, #F5F7FA 100%); }
.badge { display: inline-block; background: rgba(13, 40, 85, 0.1); color: var(--primary); padding: 6px 16px; border-radius: 50px; font-weight: 700; font-size: 12px; text-transform: uppercase; margin-bottom: 20px; }
.hero-content h1 { font-size: 56px; font-weight: 800; color: var(--primary); line-height: 1.1; margin-bottom: 25px; }
.hero-content p { font-size: 20px; color: var(--text-secondary); margin-bottom: 40px; max-width: 600px; }
.hero-actions { display: flex; gap: 15px; }


/* =====================================================
   HERO SOLUCIONES
===================================================== */

.solutions-hero{
    padding:120px 20px;
    background:#F5F7FA;
}

.solutions-wrapper{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.solutions-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:#EAF1FF;
    color:#0D2855;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:25px;
}

.solutions-wrapper h1{
    font-size:64px;
    line-height:1.05;
    font-weight:800;
    color:#0D2855;
    margin-bottom:25px;
}

.solutions-wrapper h1 span{
    display:block;
    color:#2563EB;
}

.solutions-wrapper p{
    max-width:720px;
    margin:0 auto 40px auto;
    font-size:20px;
    line-height:1.8;
    color:#64748B;
}

.solutions-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.solutions-btn-primary{
    background:#0D2855;
    color:#FFF;
    text-decoration:none;
    padding:16px 30px;
    border-radius:10px;
    font-weight:600;
    transition:.3s;
}

.solutions-btn-primary:hover{
    transform:translateY(-2px);
}

.solutions-btn-secondary{
    background:#3B82F6;
    color:#FFF;
    text-decoration:none;
    padding:16px 30px;
    border-radius:10px;
    font-weight:600;
    transition:.3s;
}

.solutions-btn-secondary:hover{
    background:#2563EB;
}

@media(max-width:768px){

    .solutions-wrapper h1{
        font-size:42px;
    }

    .solutions-wrapper p{
        font-size:18px;
    }

    .solutions-btn-primary,
    .solutions-btn-secondary{
        width:100%;
    }
}
/* ==========================================================================
   BOTONES PROFESIONALES
   ========================================================================== */
.btn-primary, .btn-secondary, .btn-secondary-outline { padding: 16px 32px; border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: var(--transition); display: inline-flex; align-items: center; }
.btn-primary { background: var(--primary); color: var(--text-white); }
.btn-primary:hover { background: var(--primary-light); transform: translateY(-2px); }
.btn-secondary { background: var(--primary-light); color: var(--text-white); }
.btn-secondary-outline {
    background: #F5F7FA;
    color: #0D2855;
    border: 2px solid #0D2855;
}
.btn-secondary-outline:hover {
    background: #0D2855;
    color: #FFFFFF;
}

/* ==========================================================================
   GRILLAS Y TARJETAS
   ========================================================================== */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.card { background: var(--bg-surface); padding: 40px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); transition: var(--transition); }
.card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }

/* Servicios Card */
.card-icon { color: var(--primary-light); margin-bottom: 20px; }
.card h3 { font-size: 20px; margin-bottom: 15px; color: var(--primary); }
.card-link { color: var(--primary-light); font-weight: 600; text-decoration: none; display: inline-block; margin-top: 15px; }

/* Beneficios Card */
.bullet-accent { width: 8px; height: 20px; background: var(--accent-success); border-radius: 4px; }
.benefit-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }

/* Process */
.step { font-size: 24px; font-weight: 800; color: var(--primary-light); opacity: 0.3; margin-bottom: 10px; }

/* ==========================================================================
   CTA FINAL (AZUL CORPORATIVO)
   ========================================================================== */
.cta { padding: 100px 20px; background: var(--primary); text-align: center; color: var(--text-white); }
.cta h2 { font-size: 40px; margin-bottom: 20px; color: var(--text-white); }
.cta p { font-size: 18px; margin-bottom: 40px; opacity: 0.9; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .hero-content h1 { font-size: 40px; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
}