:root{
  --bg:#0b0c10;
  --card:#111;
  --text:#f7f7fb;
  --muted:#e5e7eb;
  --accent:#00a387; /* verde suave */
  --radius:16px;
  --shadow:0 18px 40px rgba(0,0,0,.25);
}

*,
*::before,
*::after{ box-sizing:border-box }


/* ===== Slider ===== */
.slider{
  position:relative;
  max-width: min(1100px, 96vw);
  border-radius: var(--radius);
  overflow:hidden;
  background: #000;
  box-shadow: var(--shadow);
  margin: 2rem 0;
}

.slider__viewport{
  overflow:hidden;
  outline: none;
}

.slider__track{
  display:flex;
  will-change: transform;
  transition: transform .6s ease;
}

.slide{
  position:relative;
  min-width:100%;
  width: 100vw;
  block-size: clamp(260px, 55vw, 520px);
  display:grid;
  place-items:end start;
  background:#000;
}

.slide img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.05) contrast(1.02);
}

/* Gradiente de lectura + caption */
.slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
}
.slide__caption{
  position:relative;
  z-index:1;
  padding: 2rem;
  max-width: 70vw;
  /* background-color: rgba(0, 0, 0, .5); */
}
.slide__caption h2{
  margin:0 0 .25rem 0;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  letter-spacing:.4px;
  color: #fafafa;
}
.slide__caption p{
  margin:0;
  color: #fafafa;
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  opacity:.95;
}

/* Botones */
.slider__btn{
  position:absolute;
  inset-block: 0;
  margin-block:auto;
  height: 40px;
  width: 44px;
  display:grid; place-items:center;
  border:none;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color:#fff;
  font-size: 1.6rem;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
  backdrop-filter: blur(6px);
  opacity:.9;
}
.slider__btn:hover{ background: rgba(255,255,255,.2); transform: scale(1.05) }
.slider__btn:active{ transform: scale(.98) }

.slider__btn--prev{ left: .5rem }
.slider__btn--next{ right: .5rem }

/* Dots */
.slider__dots{
  position:absolute;
  left:0; right:0; bottom:.6rem;
  display:flex; justify-content:center; gap:.5rem;
  padding:.25rem .5rem;
}
.dot{
  width: 10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.45);
  border: 0;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.dot:hover{ transform: scale(1.15) }
.dot.is-active{ background: var(--accent) }

/* Accesibilidad visual oculta */
.sr{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Responsivo */
@media (max-width: 680px){
  .slider__btn{ height: 36px; width: 40px; font-size: 1.4rem }
}

/* Reduce motion: desactiva auto-animaciones pesadas */
@media (prefers-reduced-motion: reduce){
  .slider__track{ transition: none }
}