/* Carrusel de agentes con reflejo de agua (sustituye al abanico desde el 2026-10-22).
   La carga la portada (index.html). Para volver al abanico, quitar la clase «carrusel» y los dos enlaces. */
.carrusel{--ch:min(var(--bh),520px);--gap:clamp(150px,15vw,230px);--lift:150px;perspective:1400px;perspective-origin:50% 40%;overflow:visible}
.carrusel .blade{
  top:auto;bottom:var(--lift);height:var(--ch);
  transform-origin:50% 50%;
  transform:translateX(calc(var(--c,0) * var(--gap))) translateZ(calc(var(--ca,0) * -190px)) rotateY(calc(var(--cs,0) * -42deg));
  opacity:calc(1 - var(--ca,0) * .22);
  filter:none;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s;
  border-radius:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 30px 60px -28px rgba(18,19,22,.45);
  -webkit-box-reflect:below 10px linear-gradient(transparent 58%,rgba(255,255,255,.38));
  will-change:transform;
  pointer-events:auto;
}
.carrusel .blade.is-far{opacity:calc(1 - var(--ca,0) * .22);filter:none}
.carrusel .blade.is-gone{opacity:0;pointer-events:none}
.carrusel.is-dragging .blade{transition:none}
.carrusel.is-dragging{cursor:grabbing}
.carrusel{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.carrusel .fan-rivet{display:none}

/* La lámina de agua: brillo frío, ondas suaves y un desenfoque que rompe el reflejo */
.carrusel-agua{
  position:absolute;left:0;right:0;bottom:0;height:calc(var(--lift) - 4px);z-index:30;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(246,246,243,0) 0%,rgba(214,226,236,.28) 35%,rgba(246,246,243,.92) 100%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.0) 0 7px,rgba(255,255,255,.55) 7px 8px,rgba(255,255,255,0) 8px 15px);
  background-size:100% 100%,100% 30px;
  -webkit-backdrop-filter:blur(1.4px) saturate(140%);backdrop-filter:blur(1.4px) saturate(140%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  animation:carrusel-ondas 6s linear infinite;
}
.carrusel-agua::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
@keyframes carrusel-ondas{to{background-position:0 0,0 30px}}

@media (prefers-reduced-motion:reduce){
  .carrusel .blade{transition:opacity .2s}
  .carrusel-agua{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .carrusel-agua{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:1060px){
  .carrusel{--gap:clamp(110px,26vw,200px);--lift:120px;overflow:hidden;height:calc(var(--ch) + var(--lift) + 40px)}
}
@media (max-width:560px){
  .carrusel{--gap:42vw;--ch:min(var(--bh),480px)}
  .carrusel .blade{transform:translateX(calc(var(--c,0) * var(--gap))) translateZ(calc(var(--ca,0) * -160px)) rotateY(calc(var(--cs,0) * -35deg))}
}

/* Las tarjetas de detrás también enseñan su contenido (en el abanico se ocultaba); siguen sin poder pulsarse */
.carrusel .blade:not(.is-active) .blade-body>*{opacity:1}

/* Escritorio: el carrusel empieza siempre debajo del titular, sea cual sea el alto de la ventana */
@media (min-width:1061px){
  .hero{--fan-top:calc(clamp(16px,3vh,40px) + 1.9 * clamp(2.7rem,4.7vw,4.9rem) + 44px);min-height:calc(var(--fan-top) + 520px + 150px)}
  .hero .carrusel{top:var(--fan-top);bottom:auto;height:calc(520px + 150px);--ch:520px}
}