#root {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }
  
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.react:hover {
    filter: drop-shadow(0 0 2em #61dafbaa);
  }
  
  @keyframes logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @media (prefers-reduced-motion: no-preference) {
    a:nth-of-type(2) .logo {
      animation: logo-spin infinite 20s linear;
    }
  }
  
  .card {
    padding: 2em;
  }
  
  .read-the-docs {
    color: #888;
  }
  

  /*
 * 2. ESTILOS BASE E TIPOGRAFIA
 * Usando CSS nativo para fontes e background complexo
 */

h1, h2, h3, h4, h5, h6 {
    color: hsl(220 15% 25%);
    margin-bottom: 1rem;
  }
  
  .text-gray-primary, .text-gray-primary p{
    font-size: 18px;
    color: hsl(225, 4%, 56%);
  }
  
  .text-gray-secondary, .text-gray-secondary a, .text-gray-secondary p{
    color: hsl(225, 4%, 56%);
    font-size: 14px;
  }

  .text-gray-secondary-faq summary {
    color: hsl(225, 4%, 56%);
    font-size: 16px;
    font-family: 'Playfair Display', serif;
  }
  
  .text-gray-secondary-faq details {
    color: hsl(225, 4%, 56%);
    font-size: 16px;
    /* font-family: 'Playfair Display', serif; */
    /* font-family: 'Courier New', Courier, monospace; */
  }

 .buton-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
  }
  
  .buton-primary:hover {
    background-color: hsl(var(--primary) / 0.8);
  }

  .border-primary {
    border: 2px solid #e5e7eb; /* Cinza claro */
  }
  
  .border-asside-right {
    /* CORREÇÃO: Usar a propriedade 'border-right' ou a propriedade abreviada 'border' */
    /* border-right: 2px solid hwb(40deg 85.6% 9.6%); */
    /* OU */
    border: 0 solid transparent; /* Reseta as outras bordas se necessário */
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: hwb(40deg 85.6% 9.6%);
}
  
  .border-footer-top {
        /* CORREÇÃO: Usar a propriedade 'border-right' ou a propriedade abreviada 'border' */
        /* border-right: 2px solid hwb(40deg 85.6% 9.6%); */
        /* OU */
        border: 0 solid transparent; /* Reseta as outras bordas se necessário */
        border-top-width: 2px;
        border-top-style: solid;
        border-top-color: hwb(40deg 85.6% 9.6%);
        /* border-top-color: red; */
  }

  .border-footer-bottom {
        /* CORREÇÃO: Usar a propriedade 'border-right' ou a propriedade abreviada 'border' */
        /* border-right: 2px solid hwb(40deg 85.6% 9.6%); */
        /* OU */
        border: 0 solid transparent; /* Reseta as outras bordas se necessário */
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: hwb(40deg 85.6% 9.6%);
        /* border-top-color: red; */
  }

  .border-aside-top {
        /* CORREÇÃO: Usar a propriedade 'border-right' ou a propriedade abreviada 'border' */
        /* border-right: 2px solid hwb(40deg 85.6% 9.6%); */
        /* OU */
        border: 0 solid transparent; /* Reseta as outras bordas se necessário */
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: hwb(40deg 85.6% 9.6%);
  }

  .border-aside-bottom {
        /* CORREÇÃO: Usar a propriedade 'border-right' ou a propriedade abreviada 'border' */
        /* border-right: 1px solid hwb(40deg 85.6% 9.6%); */
        /* OU */
        border: 0 solid transparent; /* Reseta as outras bordas se necessário */
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: hwb(40deg 85.6% 9.6%);
  }

  .border-component-normal {
    border: 1px solid hwb(40deg 85.6% 9.6%);
  }
  
  .border-component-normal:hover {
    border: 1px solid hsl(150 30% 45%);
  }
  

  .border-component-normal-2 {
      border: 1px solid hwb(40deg 85.6% 9.6%);
  }

  .border-secondary {
    border: hwb(40deg 85.6% 9.6%); 
  }

  .bg-primary {
    background-color: hwb(40deg 94.6% 2.6%);
  }

  .bg-secondary {
    /* background-color: hsl(36.92deg 21.32% 88.04%); */
    background-color: hsl(40 35% 90% / .5);
  }

  .bg-item-hover {
    border-radius: 2px;
    /* background-color: #f7f4ee; */
  }

  .bg-item-hover:hover {
    border-radius: 4px;
    background-color: #f1e9d86b;
  }
  
  .bg-blue-clara {
    background-color: hsl(200 40% 85% / .3);
  }
  
  .border-blue-clara {
    border: 1px solid hsl(200 40% 85%);
  }
  
  .bg-green-clara {
    background-color: hsl(150 30% 45% / .1);
  }

  .bg-faq {
    background-color: hwb(40deg 94% 4% / 20%);
  }
  .text-primary {
    color: hsl(var(--primary-foreground));
  }

  .text-green-primary {
    color: hsl(150 30% 45%);
  }


/* Mapeamento: bg-gradient-to-br from-primary/5 via-background to-accent/5 */
.section-gradient {
  background: linear-gradient(
    to bottom right,
    hsl(var(--primary) / 0.05),    /* from-primary/5 */
    hsl(var(--background)),        /* via-background */
    hsl(var(--accent) / 0.05)      /* to-accent/5 */
  );
}

/* shadow  */

.shadow-md-custom {
  /* Define a sombra customizada com valores CSS nativos e a cor HSL */
  /* Equivalente a: 0 4px 30px -8px rgba(cor-foreground, 0.12) */
  box-shadow: 0 4px 12px -2px hsl(220 15% 25% / 0.2);
}
.shadow-md-custom:hover {
  box-shadow: 0 10px 12px 5px hsl(220 15% 25% / 0.1);
}