* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   font-family: 'Segoe UI', sans-serif;

   background:
     radial-gradient(circle at top,
       #1e40af 0%,
       #1e3a8a 25%,
       #0f172a 60%,
       #020617 100%);

   color: white;

   min-height: 100vh;
 }

 header {
   width: 100%;
   padding: 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(10px);
 }

 header a {
   display: flex;
   align-items: center;
   gap: 15px;
   color: white;
   text-decoration: none;
   width: fit-content;
 }

 header img {
   width: 70px;
 }

 header h1 {
   font-size: 28px;
 }

 .cao {
   color: #22c55e;
 }

 .container {
   width: 100%;
   max-width: 900px;
   margin: 0 auto;
   padding: 40px 20px;
 }

 h2 {
   font-size: 38px;
   margin-bottom: 15px;
 }

 .sub {
   color: #cbd5e1;
   margin-bottom: 40px;
   line-height: 1.6;
 }

 .card {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 20px;
   padding: 25px;
   margin-bottom: 25px;
   backdrop-filter: blur(10px);
   transition: .1s ease-in;
 }

 .card:hover{
  transform: translateY(-6px);
  border:1px solid rgba(34, 197, 94, 0.473);
}

 .card h3 {
   color: #22c55e;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .card h3 svg {
  width: 20px;
  height: 20px;
  color: #60a5fa;
  flex-shrink: 0;
}

 .card p {
   color: #e2e8f0;
   line-height: 1.8;
   margin-bottom: 15px;
 }

 .card ul {
   padding-left: 20px;
 }

 .card li {
   margin-bottom: 10px;
   line-height: 1.7;
   color: #e2e8f0;
 }

 .alerta {
   background: rgba(34, 197, 94, 0.1);
   border: 1px solid rgba(34, 197, 94, 0.3);
   color: #dcfce7;
   padding: 18px;
   border-radius: 15px;
   margin-top: 20px;
   line-height: 1.7;
 }

 footer {
   text-align: center;
   padding: 40px 20px;
   color: #94a3b8;
   font-size: 14px;
 }

 footer a {
   color: #22c55e;
   text-decoration: none;
 }

 footer a:hover {
   text-decoration: underline;
 }

 @media(max-width: 700px) {

   h2 {
     font-size: 30px;
   }

   .card {
     padding: 20px;
   }

   header h1 {
     font-size: 20px;
     margin: 0;
   }

   header a {
     gap: 0px;
   }
 }