
:root{--primary:#001f3f;--secondary:#3b82f6;--bg-light:#f4f6f9;--text-dark:#333;--text-gray:#666;--white:#ffffff;--whatsapp:#25D366;}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
body{background-color:var(--bg-light);min-height:100vh;display:flex;flex-direction:column;}
.support-section{flex:1;width:100%;padding:40px 20px;display:flex;justify-content:center;align-items:center;margin-top:60px;}
.support-card{background:var(--white);max-width:900px;width:100%;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,0.1);display:flex;overflow:hidden;flex-wrap:wrap;}
.support-info{flex:1;padding:50px;background:linear-gradient(135deg,var(--primary) 0%,#003366 100%);color:var(--white);min-width:320px;}
.header-icon{width:60px;height:60px;background:rgba(255,255,255,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--secondary);margin-bottom:25px;}
.support-info h1{font-size:2rem;margin-bottom:15px;font-weight:700;}
.support-info p{color:#cbd5e1;line-height:1.6;margin-bottom:40px;}
.steps-list{list-style:none;}
.steps-list li{display:flex;gap:20px;margin-bottom:30px;}
.steps-list li:last-child{margin-bottom:0;}
.step-num{background-color:var(--secondary);color:var(--white);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;flex-shrink:0;margin-top:2px;}
.step-content strong{display:block;font-size:1.1rem;margin-bottom:4px;}
.step-content span{font-size:0.95rem;color:#a0aec0;line-height:1.4;}
.support-actions{flex:1;padding:50px;display:flex;flex-direction:column;justify-content:center;gap:20px;min-width:320px;background-color:var(--white);}
.btn-action{display:flex;align-items:center;padding:20px;border-radius:12px;text-decoration:none;transition:all 0.3s ease;border:1px solid #e2e8f0;box-shadow:0 4px 6px rgba(0,0,0,0.02);position:relative;overflow:hidden;}
.btn-icon-wrapper{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:10px;margin-right:20px;font-size:1.5rem;flex-shrink:0;}
.btn-text{flex:1;display:flex;flex-direction:column;}
.btn-text span{font-size:0.85rem;color:var(--text-gray);margin-bottom:2px;}
.btn-text strong{font-size:1.2rem;font-weight:800;color:var(--primary);}
.arrow-icon{font-size:1.2rem;color:#cbd5e1;transition:transform 0.3s,color 0.3s;}
.btn-zoho .btn-icon-wrapper{background-color:var(--primary);color:white;}
.btn-zoho:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,31,63,0.15);}
.btn-zoho:hover .arrow-icon{color:var(--primary);transform:translateX(5px);}
.btn-whatsapp .btn-icon-wrapper{background-color:#dcf8c6;color:var(--whatsapp);}
.btn-whatsapp:hover{border-color:var(--whatsapp);transform:translateY(-4px);box-shadow:0 10px 20px rgba(37,211,102,0.2);}
.btn-whatsapp .btn-text strong{color:var(--whatsapp);}
.btn-whatsapp:hover .arrow-icon{color:var(--whatsapp);transform:translateX(5px);}
.divider{text-align:center;position:relative;margin:15px 0;}
.divider span{background:var(--white);padding:0 15px;color:#94a3b8;font-size:0.9rem;position:relative;z-index:1;}
.divider::before{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px solid #e2e8f0;z-index:0;}

.resources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1000px;margin:0 auto;width:100%;}
.resource-card{background:white;padding:30px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.08);text-align:center;transition:transform 0.3s ease;}
.resource-card:hover{transform:translateY(-5px);}
.icons{padding:15px;border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px auto;}
.icons i{font-size: 2rem;};
.resource-card h2{color:var(--primary);margin-bottom:10px;font-size:1.5rem;}
.resource-card p{color:#666;margin-bottom:25px;font-size:0.95rem;}
.alcancia-img{max-width:350px;margin: 20px auto;filter:drop-shadow(0 10px 15px rgba(0,0,0,0.2));animation:float 6s ease-in-out infinite;}



        @media (max-width:768px){
                .support-info,.support-actions{padding:30px;min-width:100%;}
                .support-card{flex-direction:column;}
                .support-section{margin-top:80px;}
        }
