:root{
  --principal-hero-h: 30vh;
  --principal-hero-h-min: 440px;
  --principal-hero-maxW: 1200px;
  --principal-color-primary: #0061a0;
  --principal-color-text: #ffffff;
  --principal-arrow-size: 44px;
}

.principal_hero{ position: relative; overflow: hidden; background: #000; }
.principal_hero--gradient-dark .principal_hero__slide::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

.principal_hero__slider{ position: relative; }
.principal_hero__slide{ position: relative; min-height: 60vh; display: grid; align-items: stretch; }
.principal_hero__bg, .principal_hero__bgImg{ position:absolute; inset:0; width:100%; height:100%; }
.principal_hero__bgImg{ object-fit: cover; object-position: center; }

.principal_hero__inner{ position: relative; z-index: 2; display: grid; place-items: start start; padding: 60px; min-height: inherit; }
.principal_hero__content{ width: min(100%, var(--principal-hero-maxW)); color: var(--principal-color-text); max-width: 85%; }
.principal_hero__title{ margin:0 0 24px; font-size: 32px; line-height: 40px; font-weight: 400; }
.principal_hero__intro{ font-size: 18px; line-height: 24px; margin: 0 0 30px; color: white;}
.principal_hero__intro:last-of-type{margin: 0 0 30px;}

.principal_btn{ display:inline-flex; align-items:center; gap:.5rem; padding:13px 30px; border-radius:999px; text-decoration:none; font-weight:600; line-height:1; border:0; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.principal_btn--primary{ background: var(--principal-color-primary); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.principal_btn--primary:hover{ transform: translateY(-1px); }
.principal_btn--primary:active{ transform: translateY(0); }

/* Flechas */
.principal_hero__arrow{
  position:absolute; top:50%; translate:0 -50%;
  background:unset; border:unset; cursor:pointer; z-index:3;
  display:grid; place-items:center;
}
.principal_hero__arrow--prev{ left: clamp(.5rem, 2vw, 1rem); }
.principal_hero__arrow--next{ right: clamp(.5rem, 2vw, 1rem); }
.principal_hero__arrow:hover{ background: rgba(0,0,0,.4); }

.principal_hero__icon{
  width: var(--principal-arrow-size);
  height: var(--principal-arrow-size);
  background-color: aqua; /* color de la flecha (cambia en hover si quieres) */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.principal_hero__arrow:hover .principal_hero__icon{ background-color: aqua; }

/* Dots */
.principal_hero .slick-dots{ position:absolute; bottom: clamp(.75rem, 2vw, 1.25rem); left:50%; translate:-50% 0; }
.principal_hero .slick-dots li{ margin:0 1px; }
.principal_hero .slick-dots button{ width:12px; height:12px; border-radius:999px; background: rgba(255,255,255,.5); text-indent:-9999px; overflow:hidden; padding:0; border:0; }
.principal_hero .slick-dots .slick-active button{ background:#55fff5; }
.slick-dotted.slick-slider{ margin-bottom:0; }

/* Breakpoints */
@media (min-width: 600px){
  .principal_hero__slide{ min-height: 40vh; }
  .principal_hero__content{ max-width: 500px; }
  .principal_hero__title{ font-size: 42px; line-height: 50px; }
  .principal_hero__intro{ font-size: 18px; line-height: 24px; }
  .principal_hero--gradient-dark .principal_hero__slide::after{
    left:0; width:90%;
    background: linear-gradient(90deg, #000 48.45%, rgba(51,51,51,0) 100%);
    opacity:.5;
  }
}

@media (min-width: 992px){
  .principal_hero__inner{ padding-inline: clamp(2rem, 6vw, 6rem); max-width:1224px; margin:auto; place-items: center start; padding: 80px 48px; }
  .principal_hero__slide{ min-height: 35vh; }
  .principal_hero__content{ max-width: 580px; }
  .principal_hero__title{ font-size: 42px; line-height: 50px; margin-bottom: 28px; }
  .principal_hero__intro{ font-size: 18px; line-height: 28px; margin-bottom: 30px; }
  .principal_hero--gradient-dark .principal_hero__slide::after{
    left:0; width:90%;
    background: linear-gradient(90deg, #000 48.45%, rgba(51,51,51,0) 100%);
    opacity:.5;
  }
}