/* =========================================================
   Carousel CSS — Desktop cover / Mobile contain
   ========================================================= */

/* -------- Variables (puedes ajustar colores/tiempos) -------- */
:root{
  --fade-ms: 650ms;
  --bg: #0b0f19;
  --dot: rgba(0,0,0,.25);
  --dot-active: #000;
  --dot-outline: rgba(0,0,0,.15);

  /* Si tienes header fijo en desktop, ajusta este offset */
  --fullscreen-offset: 0px;
}

/* -------- Reset mínimo -------- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif }

/* =========================================================
   Estructura base (funciona perfecto en móvil)
   - El slide ACTIVO fija la altura del contenedor (auto-height)
   - Las imágenes NO se recortan en móvil (contain)
   ========================================================= */
.slider{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--bg);
  height:auto;                 /* móvil: NO forzar alto pantalla */
  border-radius:0 !important;  /* sin radios en todo el slider */
}
.slider *{ border-radius:0 !important; }

.slider__nav{
  /* radios accesibles pero ocultos visualmente */
  position:absolute;
  inline-size:1px; block-size:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden;
}

.slider__inner{
  position:relative; /* clave para auto-altura en móvil */
  width:100%;
  height:auto;
}

/* Slides apilados con fade */
.slider__slide{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:var(--bg);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--fade-ms) ease;
}

/* Imágenes: móvil = mostrar completas (contain) */
.slider__slide picture,
.slider__slide img{
  width:100%;
  height:auto;                /* altura natural */
  max-width:100%;
  display:block;
  object-fit:contain;         /* móvil: NO recortar */
  object-position:center;
}

/* Slide activo en móvil: vuelve al flujo para fijar altura */
.slider__nav:nth-of-type(1):checked ~ .slider__inner .slider__slide:nth-child(1),
.slider__nav:nth-of-type(2):checked ~ .slider__inner .slider__slide:nth-child(2),
.slider__nav:nth-of-type(3):checked ~ .slider__inner .slider__slide:nth-child(3),
.slider__nav:nth-of-type(4):checked ~ .slider__inner .slider__slide:nth-child(4),
.slider__nav:nth-of-type(5):checked ~ .slider__inner .slider__slide:nth-child(5),
.slider__nav:nth-of-type(6):checked ~ .slider__inner .slider__slide:nth-child(6),
.slider__nav:nth-of-type(7):checked ~ .slider__inner .slider__slide:nth-child(7){
  position:relative;   /* <- fija la altura del contenedor */
  opacity:1;
  pointer-events:auto;
}

/* =========================================================
   Dots
   ========================================================= */
.slider__dots{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; gap:10px; justify-content:center; align-items:center;
  z-index:5; padding:0 8px;
}
.slider__dots > label{
  width:10px; height:10px; border-radius:999px;
  background:var(--dot);
  outline:2px solid var(--dot-outline);
  outline-offset:2px;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.slider__dots > label:hover{ transform:scale(1.12) }
.slider__dots > label:focus-visible{ outline:3px solid #000 }

/* Estado activo del dot (si el navegador soporta :has) */
/* Fallback cuando :has no está disponible */

#s1:checked ~ .slider__dots label:nth-child(1),
#s2:checked ~ .slider__dots label:nth-child(2),
#s3:checked ~ .slider__dots label:nth-child(3),
#s4:checked ~ .slider__dots label:nth-child(4),
#s5:checked ~ .slider__dots label:nth-child(5),
#s6:checked ~ .slider__dots label:nth-child(6),
#s7:checked ~ .slider__dots label:nth-child(7){
  background:var(--dot-active);
  transform:scale(1.25);
}

/* Flechas (si las usas) — ocultas por defecto */
.slider__arrows{ display:none !important; }

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .slider__slide{ transition:none; }
}

/* =========================================================
   Desktop override (≥ 769px)
   - Pantalla completa
   - Recorte suave con cover (look hero)
   - No necesitamos position:relative para altura
   ========================================================= */
@media (min-width: 769px){
  .slider{
    height: calc(100vh - var(--fullscreen-offset));
  }
  .slider__inner{ height:100%; }
  .slider__slide{
    position:absolute;
    inset:0;
    height:100%;
  }
  .slider__slide picture,
  .slider__slide img{
    width:100%;
    height:100%;
    object-fit:cover;       /* desktop: cubrir y recortar suavemente */
    object-position:center;
  }

  /* activo en desktop (sin necesidad de cambiar position) */
  .slider__nav:nth-of-type(1):checked ~ .slider__inner .slider__slide:nth-child(1),
  .slider__nav:nth-of-type(2):checked ~ .slider__inner .slider__slide:nth-child(2),
  .slider__nav:nth-of-type(3):checked ~ .slider__inner .slider__slide:nth-child(3),
  .slider__nav:nth-of-type(4):checked ~ .slider__inner .slider__slide:nth-child(4),
  .slider__nav:nth-of-type(5):checked ~ .slider__inner .slider__slide:nth-child(5),
  .slider__nav:nth-of-type(6):checked ~ .slider__inner .slider__slide:nth-child(6),
  .slider__nav:nth-of-type(7):checked ~ .slider__inner .slider__slide:nth-child(7){
    opacity:1;
    pointer-events:auto;
  }

  .slider__dots{ bottom:18px; }
}