/* =========================================================
   Buzón — Carousel “Proceso para participar” (alto)
   Archivo: proceso-registro.css
   Depende de los tokens ya definidos en tu hoja principal
   ========================================================= */

/* --- Contenedor base del carrusel --- */
#proceso-registro.carousel{
  grid-column: 1 / -1;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 0;
}

/* Viewport + track */
#proceso-registro .carousel__viewport{ position: relative; overflow: hidden }
#proceso-registro .carousel__track{
  display: flex; width: 100%;
  transition: transform .35s ease; will-change: transform;
}

/* --- Slides (ahora más altos y cómodos de leer) --- */
#proceso-registro .carousel__slide{
  flex: 0 0 100%;
  padding: 34px 44px;               /* más “aire” */
  min-height: 380px;                /* << AQUI crecen las “cards” */
  display: grid; align-content: center; justify-items: center; gap: 14px;
  background:
    radial-gradient(70% 80% at 10% 20%, rgba(206,29,129,.05), transparent 60%),
    linear-gradient(180deg, #fff, #fbfdff 80%);
}

/* Variante aún más alta (opcional):
   agrega la clase .is-tall al <section id="proceso-registro"> para 480px */
#proceso-registro.is-tall .carousel__slide{ min-height: 480px }

/* --- Contenido del slide --- */
#proceso-registro .step{
  display: grid; justify-items: center; text-align: center; gap: 14px;
  padding: 16px 12px;
  max-width: 720px;                 /* líneas más largas sin romper legibilidad */
  margin-inline: auto;
}

/* Icono grande con aro suave */
#proceso-registro .step__icon{
  --ic: var(--blue);
  width: 96px; height: 96px;        /* más grande */
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--ic) 92%, #fff);
  box-shadow:
    0 12px 30px color-mix(in oklab, var(--ic) 26%, transparent),
    0 0 0 1px color-mix(in oklab, var(--ic) 22%, #e7edf7) inset;
}
#proceso-registro .step__icon svg{ width: 42px; height: 42px; color: #fff }

/* Tipografías un toque más grandes */
#proceso-registro .step__title{
  margin: 0;
  font: 700 1.28rem/1.25 'Poppins', system-ui, sans-serif;
  letter-spacing: .1px;
  color: var(--blue);
}
#proceso-registro .step__desc{
  margin: 0;
  color: #3a5164;
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 60ch;                  /* párrafo un poco más ancho */
}

/* --- Flechas --- */
#proceso-registro .carousel__nav{
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  z-index: 20; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--blue);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
#proceso-registro .carousel__nav:hover{
  background: #fff; transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
#proceso-registro .carousel__nav.prev{ left: 14px }
#proceso-registro .carousel__nav.next{ right: 14px }

/* --- Dots --- */
#proceso-registro .carousel__dots{
  display: flex; justify-content: center; gap: 10px; padding: 14px 12px;
  background: #fafbfc; border-top: 1px solid rgba(0,0,0,.05);
}
#proceso-registro .carousel__dots button{
  width: 9px; height: 9px; border: 0; border-radius: 999px;
  background: rgba(11,59,96,.28); cursor: pointer; transition: all .22s ease;
}
#proceso-registro .carousel__dots button[aria-selected="true"]{
  width: 26px; background: var(--pink);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--pink) 28%, transparent);
}

/* --- Responsive --- */
@media (max-width: 640px){
  #proceso-registro .carousel__slide{ min-height: 340px; padding: 26px 22px }
  #proceso-registro .step__icon{ width: 84px; height: 84px }
  #proceso-registro .step__icon svg{ width: 36px; height: 36px }
  #proceso-registro .step__title{ font-size: 1.16rem }
  #proceso-registro .step__desc{ font-size: 1rem }
  #proceso-registro .carousel__nav.prev{ left: 8px }
  #proceso-registro .carousel__nav.next{ right: 8px }
}

/* --- Modo alto contraste hereda tokens del tema --- */
html.theme-contrast #proceso-registro.carousel{
  background: var(--surface); border-color: var(--bd)
}
html.theme-contrast #proceso-registro .carousel__dots{
  background: color-mix(in oklab, var(--bg) 96%, #000);
  border-top-color: var(--bd);
}
/* ===== Full-bleed (a lo largo de toda la página) ===== */
#proceso-registro.full-bleed{
  /* romper el ancho del contenedor y ocupar la pantalla completa */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* bordes y sombras opcionales a pantalla completa */
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

/* contenedor interno para que el contenido no quede “pegado” a los bordes */
#proceso-registro.full-bleed .pr-inner{
  max-width: 1280px;         /* ajusta este ancho si quieres más/menos */
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* asegura que el viewport y el track sigan alineados */
#proceso-registro.full-bleed .carousel__viewport{
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid var(--bd);
}

/* los dots también dentro del "inner" */
#proceso-registro.full-bleed .carousel__dots{
  border-radius: var(--radius);
  border: 1px solid var(--bd);
  border-top: 0;
  overflow: hidden;
}

/* altura “larga” (opcional, puedes combinar con .is-tall si la usas) */
#proceso-registro.full-bleed .carousel__slide{
  min-height: 420px;         /* más alto a lo largo de la página */
  padding: 36px 46px;
}

/* flechas bien posicionadas en full-bleed */
#proceso-registro.full-bleed .carousel__nav.prev{ left: 18px }
#proceso-registro.full-bleed .carousel__nav.next{ right: 18px }

/* responsive */
@media (max-width: 640px){
  #proceso-registro.full-bleed .carousel__slide{
    min-height: 360px;
    padding: 26px 22px;
  }
  #proceso-registro.full-bleed .pr-inner{
    padding-inline: 14px;
  }
  #proceso-registro.full-bleed .carousel__nav.prev{ left: 8px }
  #proceso-registro.full-bleed .carousel__nav.next{ right: 8px }
}
/* Ocupa todo el ancho de la ventana */
#proceso-registro.full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Contenido centrado dentro del full-bleed */
#proceso-registro .pr-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}