html {
  scroll-behavior: smooth;
  letter-spacing: 0.05rem;
}

section {
  font-family: 'Google Sans', sans-serif;
  
}

.jc-background-section{
    background-image: url("/assets/images/fondo con ruido.jpg");
}

.mw100{
    max-width: 100vw;
}

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

.jcmt-10{
    margin-top: 10rem !important;
}

.jcmt-5{
    margin-top: 5rem !important;
}

.jcmt-4{
    margin-top: 4rem !important;
}

.jcmt-3{
    margin-top: 3rem !important;
}

.jcmt-2{
    margin-top: 2rem !important;
}

.jcbody{
    background: #fff !important;
}

.jcpresentacion{
    font-size: 3.6rem;
    margin-bottom: 0;
    text-align: center;
}

.jcdescripcionseccion{
    font-size: 2rem;
}

.jc-tab-pane {
  scroll-margin-top: 100px; /* Ajusta este valor en píxeles según la altura de tu header fijo */
}

.jc-card-item{
    width: 47% !important;
}

#jc-cards-tab-a, #jc-cards-tab-b, #jc-cards-tab-c, #jc-cards-tab-d{
    column-gap: 6%;
}

.jc-hr-ver-mas-divider{
    margin-bottom: -2.5rem;
    color: #070a40;
    padding: 1px 0;
    opacity: 1;
}

.jc-ver-mas{
    width: 100%;
    border-radius: 0 !important;
    border: none !important;
    padding-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
    z-index: 1;
}

.jc-ver-mas-icon {
    width: 2rem;
    height: 2rem;
    transition: transform 0.2s ease;
}

.jc-ver-mas[aria-expanded="true"] .jc-ver-mas-icon {
    transform: rotate(180deg);
}

.jc-ver-mas-label{
    height: 2rem;
    border: none; 
    display: block; 
    width: 5rem; 
    height: 5rem; 
    border-radius: 50%; 
    align-content: center; 
    margin-inline: auto;
    background: #fff;
}

/* ── Collage sticky: ¿Qué buscas? ── */

.jc-collage-wrapper {
    width: 100%;
    overflow-x: clip; /* Corta el desbordamiento horizontal sobrante sin afectar el eje vertical */
}

.jc-collage-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
  margin-bottom: 8rem;
}

.jc-collage-title{
    padding: 5% 28% 10% 28%;
}

.jc-collage-title-m{
    padding: 0 0 -10% 0;
}

.jc-collage-stage{
  --gap: 3rem;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px; /* altura REAL de cada fila */
  gap: var(--gap);

  width: 100%;
}

.jc-collage-stage-m{
    margin-top: -5%;
  --gap: 12px;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 130px; /* altura REAL de cada fila */
  gap: var(--gap);

  width: 100%;
}

.jc-collage-item{
  position: relative;
  width: 100%;
  height: 180px;

  margin: 0;
  overflow: visible;

  will-change: transform;
  animation-timeline: view();
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-range: entry 5% cover 45%;
}

.jc-collage-item-m{
  position: relative;
  width: 100%;
  height: 180px;

  margin: 0;
  overflow: visible;

  will-change: transform;
  animation-timeline: view();
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-range: entry -5% cover 25%;
}

.jc-collage-item img, .jc-collage-item-m img{
  position: absolute;

  left: 50%;
  top: 50%;

  display: block;
  max-width: none;
  max-height: none;

  object-fit: cover;

  transform: translate(-50%, -50%);

  overflow: visible;
}

.jc_img_final img{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/*desktop*/
@keyframes jc-s1{ from{ transform: translate(-76px,-16px) rotate(-16deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jc-s2{ from{ transform: translate(250px,-23px) rotate(11deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jc-s3{ from{ transform: translate(-350px,130px) rotate(9deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jc-s4{ from{ transform: translate(280px,190px) rotate(-13deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jc-s5{ from{ transform: translate(-230px,280px) rotate(19deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jc-s6{ from{ transform: translate(290px,-70px) rotate(-9deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jc-s7{ from{ transform: translate(-100px,-30px) rotate(15deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jc-s8{ from{ transform: translate(-100px,-30px) rotate(15deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
/*mobile*/
@keyframes jcm-s1{ from{ transform: translate(-76px,-16px) rotate(-16deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jcm-s2{ from{ transform: translate(250px,-23px) rotate(11deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jcm-s3{ from{ transform: translate(-350px,130px) rotate(9deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jcm-s4{ from{ transform: translate(280px,190px) rotate(-13deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jcm-s5{ from{ transform: translate(-230px,280px) rotate(19deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }
@keyframes jcm-s6{ from{ transform: translate(290px,-70px) rotate(-9deg) scale(.72); opacity:.75;} to{ transform:none; opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .jc-collage-item{ animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* Accesibilidad: sin animación → collage final estático, sin scroll extra */
@media (prefers-reduced-motion: reduce) {
    .jc-collage-section { height: auto; }
    .jc-collage-sticky  { position: static; height: 10rem; }
}

@media (max-width: 1281px) {
    .jc-collage-section{
        padding-right: var(--bs-gutter-x, -30rem) !important;
        padding-left: var(--bs-gutter-x, 3.5rem) !important;
    }
}

@media (max-width: 767.98px) {
    .jcpresentacion{
        font-size: 2rem;
        margin-bottom: 0;
    }

    .jc-button-pad{
        row-gap: 1rem;
    }

    .jc-card-item{
        width: 100% !important;
    }

    .jcdescripcionseccion{
        font-size: 1.2rem;
        padding-inline: 1rem;
    }

    .jc-tab-pane {
        scroll-margin-top: 0; /* Ajusta este valor en píxeles según la altura de tu header fijo */
    }

    .jc-collage-section{
        padding-right: var(--bs-gutter-x, .9rem) !important;
        padding-left: var(--bs-gutter-x, .0rem) !important;
        padding-top: 2rem;
    }

    .jc-collage-item img{
        width: 50% !important;
        height: 50% !important;
    }

    .jc-informacion{
        margin-top: -5rem;
    }

    .jc_img_final{
        margin-top: 3rem;
    }
}