html {
  scroll-behavior: smooth;
}
main {
  overflow-y: auto;
}
/* Text Styles*/

.titles{
    color: white;
}

.yellowTitles{
    color: #F4B517;
}

.titlesPalmier{
    color: #242424;
}

.titlesPalmier-2{
    color: #0B0B0B;
}

/* BUTTONS */

.yellowButton{
    background-color: #F4B517;
}

.redButton{
    background-color: #F31E1E;
}



/* ESTILO NAVBAR */

  /* Triángulo header: base (desktop) = valores actuales */
  .hero-header-yellow {
    width: 40vw;
    clip-path: polygon(0 0, 96% 0, 81.2% 100%, 0 100%);
  }

  /* Triángulo principal del hero: base (desktop) = valores actuales */
  .hero-main-yellow {
    clip-path: polygon(0 0, 32.5vw 0, 0.03vw 100%, 0 100%);
  }

  /* Overrides sólo para mobile/tablet (no modifican PC) */
  @media (max-width: 1023px) {
    .hero-header-yellow {
      width: 70vw;
      clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    }

    .hero-main-yellow {
      clip-path: polygon(0 0, 60vw 0, 57vw 0, 0 40%);
    }
  }