:root{
      --color-principal:#024a60;
      --color-secundario:#d18316;
      --color-titulos:hsl(0 0% 40%);
    }

    .contenedor {
      width: min(100%, 1100px);
      margin:auto;
      background: white;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      padding: 1em 2em;
      box-sizing: border-box;
        .header {
            color: var(--color-principal);
            padding:1em;
            text-align: center;
            h1 {
                font-size: 2.7rem;
                margin-bottom: 12px;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 15px;
                text-transform: uppercase;
            }
            p {
                font-size: 1.25rem;
                opacity: 0.95;
            }
        }
        h2 {
            font-size: 1.85rem;
            color: var(--color-titulos);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            i{
                color: var(--color-secundario);
                font-size: 2rem;
            }
        }
        .content {
          display: flex;
          flex-direction: column;
          gap: 45px;
        }        
    
        .section {
          background: white;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          padding: 30px;
        }
        .info-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
          gap: 25px;
        }
    
        .card {
          background: white;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          padding: 28px;
          transition: all 0.3s ease;
        }
    
        .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.08);
        }
    
        .icon-box {
          width: 65px;
          height: 65px;
          background-color: #f0f9ff;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
        }
    
        .icon-box  {
          background: hsl(from var(--color-icon) h s calc(l + 45));  
          i{
            font-size: 2.2rem;
            color: var(--color-icon);
          }
        }
    
        .highlight {
          background: hsl(from var(--color-principal) h s calc(l + 80)); 
          border: 1px solid #bae6fd;
          border-radius: 12px;
          padding: 28px;
         /*  font-size: 1.15rem; */
          text-align: center;
          p{
            font-size: 1.15em;
          }
        }
    
        a.btn {
          display: inline-block;
          background-color: var(--color-principal);
          color: #fff;
          padding: 14px 32px;
          border-radius: 50px;
          text-decoration: none;
          font-weight: 600;
          margin-top: 15px;
          transition: all 0.3s;
          &:hover {     
            transform: translateY(-3px);
          } 
        }
    
    }