/* ==========================================================================
   Carrusel 3D — estilo "médico premium"
   Tarjeta blanca translúcida de tamaño y posición uniformes en todos los
   slides. El contenido del WYSIWYG (imágenes, colores, alineación) se
   respeta; el plugin solo aporta la tipografía base de h2 / h3 / p.
   ========================================================================== */
.carrusel-3d{
  --c3d-accent:#1d6ec9;
  --c3d-accent-dark:#14509a;
  --c3d-accent-light:#8fc1f5;
  --c3d-text:#16233a;
  --c3d-text-soft:#51607a;
  --c3d-radius:24px;
  --c3d-duration:4000ms;
  position:relative;width:100%;overflow:hidden;
}
.carrusel-3d .swiper{width:100%;height:auto;aspect-ratio:1900/900;
  max-height:var(--carrusel-altura,820px)}
/* Elementor Pro aplica .swiper-slide { transition-property: transform } a
   todos los sliders; el fade de este carrusel necesita opacity. */
.carrusel-3d .swiper-slide{position:relative;overflow:hidden;height:100%;
  transition-property:opacity;will-change:opacity}

/* --------------------------------------------------------------------------
   Imagen de fondo (metacampo imagen_del_carrusel):
   cover + zoom sutil (Ken Burns) mientras el slide está activo
   -------------------------------------------------------------------------- */
.carrusel-3d__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  transform:scale(1);will-change:transform}
.carrusel-3d .swiper-slide-active .carrusel-3d__img{
  animation:c3dKenBurns calc(var(--c3d-duration,4000ms) + 400ms) ease-out both}
@keyframes c3dKenBurns{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

/* --------------------------------------------------------------------------
   Gradiente (como el diseño anterior): vignette inferior + toques laterales
   -------------------------------------------------------------------------- */
.carrusel-3d__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 50% at 50% 0%,rgba(255,255,255,.18) 0%,transparent 65%),
    linear-gradient(90deg,rgba(10,22,40,.08) 0%,transparent 42%),
    linear-gradient(-90deg,rgba(10,22,40,.05) 0%,transparent 42%),
    linear-gradient(0deg,rgba(10,22,40,.22) 0%,transparent 40%)}

/* --------------------------------------------------------------------------
   Recuadro blanco: MISMO tamaño y MISMA posición en todos los slides.
   Ancho fijo + alto mínimo fijo; el contenido se centra verticalmente.
   -------------------------------------------------------------------------- */
.carrusel-3d__panel{position:absolute;top:50%;right:11%;transform:translateY(-50%);
  width:min(44%,700px);min-height:min(58%,350px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.6rem,2.6vw,2.6rem) clamp(1.6rem,2.8vw,2.8rem);
  border-radius:var(--c3d-radius);
  background:rgba(255,255,255,.8);
  box-shadow:0 10px 30px rgba(10,30,60,.12),0 40px 90px rgba(10,30,60,.14);
  border:1px solid rgba(255,255,255,.7)}

/* --------------------------------------------------------------------------
   Tipografía del contenido (metacampo texto_del_carrusel).
   Estructura recomendada en el editor: h2 titular, h3 subtítulo, p párrafos.
   -------------------------------------------------------------------------- */
/* Un solo color de tinta para todo el texto: la jerarquía se da por
   tamaño y peso, no por color (los colores diferentes entre slides
   hacían ver el carrusel inconsistente). */
.carrusel-3d__texto{color:var(--c3d-text);line-height:1.5;font-family:'Poppins',sans-serif}

.carrusel-3d__texto h2{
  font-size:clamp(1.5rem,2.5vw,2.3rem);font-weight:700;line-height:1.18;
  letter-spacing:-.015em;color:inherit;
  margin:0 0 .7rem}
/* Si el h2 solo contiene una imagen (p. ej. el logo) */
.carrusel-3d__texto h2:has(> img:only-child){margin-bottom:.5rem}

.carrusel-3d__texto h3{
  font-size:clamp(1rem,1.5vw,1.3rem);font-weight:700;line-height:1.3;
  color:inherit;margin:0 0 .55rem}

.carrusel-3d__texto p{
  font-size:clamp(1.05rem,1.7vw,1.4rem);color:inherit;
  margin:0 0 .6rem}
.carrusel-3d__texto p:last-child{margin-bottom:0}
.carrusel-3d__texto strong{color:inherit;font-weight:800}

/* Especificidad reforzada: los estilos globales de encabezados de Elementor
   (.elementor-kit-N h2{color:...}) cargan después y empataban en
   especificidad, pintando los títulos de otro color según el slide. */
.carrusel-3d .carrusel-3d__texto h2,
.carrusel-3d .carrusel-3d__texto h3,
.carrusel-3d .carrusel-3d__texto p,
.carrusel-3d .carrusel-3d__texto strong{color:var(--c3d-text)}

/* Imágenes dentro del contenido: se respetan, solo se acotan al recuadro */
.carrusel-3d__texto img{max-width:100%;height:auto;max-height:110px;width:auto}
.carrusel-3d__texto img.aligncenter{display:block;margin-left:auto;margin-right:auto}

/* Contenido heredado en <pre class="tbk__title">: se normaliza la fuente
   monoespaciada y se le da la misma jerarquía (strong inicial = titular). */
.carrusel-3d__texto pre{font-family:inherit;font-size:inherit;line-height:inherit;
  color:inherit;white-space:pre-line;margin:0;padding:0;background:none;
  border:none;overflow:visible}
.carrusel-3d__texto pre strong:first-child{display:block;
  font-size:clamp(1.4rem,2.3vw,2.1rem);font-weight:800;line-height:1.2;
  letter-spacing:-.015em;margin-bottom:.5rem;color:inherit}
.carrusel-3d__texto pre strong:last-child{display:block;margin-top:.55rem;
  font-size:clamp(.95rem,1.2vw,1.08rem);font-weight:700;letter-spacing:.01em;
  color:inherit}

/* Botón CTA: pill azul. Aplica al campo ACF "boton_del_carrusel"
   y a enlaces dentro del texto. */
.carrusel-3d__cta,
.carrusel-3d__texto a{
  display:inline-block;margin-top:1rem;padding:.72rem 1.7rem;
  border-radius:999px;align-self:flex-start;
  background:linear-gradient(135deg,var(--c3d-accent),var(--c3d-accent-dark));
  color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(29,110,201,.35);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.carrusel-3d__cta:hover,
.carrusel-3d__cta:focus-visible,
.carrusel-3d__texto a:hover,
.carrusel-3d__texto a:focus-visible{
  color:#fff;transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 10px 26px rgba(29,110,201,.45)}
.carrusel-3d__cta:focus-visible,
.carrusel-3d__texto a:focus-visible{
  outline:3px solid rgba(29,110,201,.4);outline-offset:2px}

/* --------------------------------------------------------------------------
   Flechas: discretas por defecto, presentes al pasar el cursor
   -------------------------------------------------------------------------- */
.carrusel-3d .swiper-button-prev,
.carrusel-3d .swiper-button-next{width:52px;height:52px;margin-top:-26px;
  border-radius:50%;color:#fff;
  background:rgba(16,30,52,.28);border:1.5px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s ease,background .3s,border-color .3s,transform .2s}
.carrusel-3d:hover .swiper-button-prev,
.carrusel-3d:hover .swiper-button-next,
.carrusel-3d .swiper-button-prev:focus-visible,
.carrusel-3d .swiper-button-next:focus-visible{opacity:1}
.carrusel-3d .swiper-button-prev:hover,
.carrusel-3d .swiper-button-next:hover{
  background:var(--c3d-accent);border-color:var(--c3d-accent);
  transform:scale(1.08)}
.carrusel-3d .swiper-button-prev:after,
.carrusel-3d .swiper-button-next:after{font-size:17px;font-weight:800}
.carrusel-3d .swiper-button-prev{left:22px}
.carrusel-3d .swiper-button-next{right:22px}

/* --------------------------------------------------------------------------
   Dots de paginación
   -------------------------------------------------------------------------- */
.carrusel-3d .swiper-pagination{bottom:18px}
.carrusel-3d .swiper-pagination-bullet{width:9px;height:9px;
  background:#fff;opacity:.55;
  transition:opacity .3s,width .3s,border-radius .3s}
.carrusel-3d .swiper-pagination-bullet-active{opacity:1;width:30px;border-radius:6px}

/* --------------------------------------------------------------------------
   Barra de progreso inferior
   -------------------------------------------------------------------------- */
.carrusel-3d__progress-bar{position:absolute;bottom:0;left:0;height:3px;z-index:10;
  width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--c3d-accent),var(--c3d-accent-light))}
.carrusel-3d__progress-bar.is-animating{
  animation:carruselProgress var(--c3d-duration,8s) linear forwards}
@keyframes carruselProgress{from{width:0}to{width:100%}}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet (≤1024px) */
@media(max-width:1024px){
  .carrusel-3d .swiper{max-height:560px}
  .carrusel-3d__panel{width:min(54%,520px);min-height:min(62%,360px);right:5%}
}

/* Móvil (≤782px): estructura APILADA — la foto se ve completa arriba y
   el texto va en un bloque sólido debajo, sin encimarse. Todos los slides
   comparten las mismas alturas fijas para que el carrusel no "salte". */
@media(max-width:782px){
  .carrusel-3d .swiper{
    height:auto;
    aspect-ratio:unset;
    max-height:none}
  .carrusel-3d .swiper-slide{display:flex;flex-direction:column;height:auto}
  .carrusel-3d__img{position:relative;inset:auto;flex:none;
    width:100%;height:clamp(210px,58vw,300px)}
  /* Sin scrim: la foto ya no lleva texto encima */
  .carrusel-3d__scrim{display:none}
  /* Alto FIJO (no mínimo): así todos los slides miden lo mismo, el carrusel
     no salta y los dots siempre quedan dentro del panel. */
  .carrusel-3d__panel{position:relative;top:auto;bottom:auto;left:auto;right:auto;
    transform:none;width:100%;height:clamp(245px,70vw,305px);min-height:0;
    overflow:hidden;justify-content:center;
    border-radius:0;border:none;box-shadow:none;
    border-top:3px solid var(--c3d-accent);
    background:#0d1b33;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:1.1rem 1.25rem 2rem;text-align:center}
  .carrusel-3d__texto{color:#fff;line-height:1.4}
  .carrusel-3d .carrusel-3d__texto h2,
  .carrusel-3d .carrusel-3d__texto h3,
  .carrusel-3d .carrusel-3d__texto p,
  .carrusel-3d .carrusel-3d__texto strong{color:#fff}
  .carrusel-3d__texto h2{font-size:clamp(1.1rem,4.8vw,1.35rem);
    padding-top:.65rem;margin-bottom:.4rem}
  .carrusel-3d__texto h2::before{left:50%;transform:translateX(-50%);
    width:30px;height:3px}
  .carrusel-3d__texto h3{font-size:clamp(.88rem,3.9vw,1.05rem);margin-bottom:.35rem}
  .carrusel-3d__texto p{font-size:clamp(.8rem,3.5vw,.92rem);margin:0 0 .35rem}
  .carrusel-3d__texto img{max-height:44px}
  .carrusel-3d__texto pre strong:first-child{
    font-size:clamp(1.1rem,4.8vw,1.35rem);margin-bottom:.3rem}
  .carrusel-3d__texto pre strong:last-child{
    font-size:clamp(.8rem,3.5vw,.92rem);margin-top:.4rem}
  .carrusel-3d__cta,
  .carrusel-3d__texto a{margin-top:.65rem;padding:.5rem 1.3rem;font-size:.84rem;
    align-self:center}
  /* Flechas sobre la foto (mitad superior), no sobre el texto */
  .carrusel-3d .swiper-button-prev,
  .carrusel-3d .swiper-button-next{width:38px;height:38px;
    top:clamp(105px,29vw,150px);margin-top:-19px;opacity:1;
    background:rgba(16,30,52,.35)}
  .carrusel-3d .swiper-button-prev:after,
  .carrusel-3d .swiper-button-next:after{font-size:13px}
  .carrusel-3d .swiper-button-prev{left:8px}
  .carrusel-3d .swiper-button-next{right:8px}
  .carrusel-3d .swiper-pagination{bottom:10px}
}

/* ==========================================================================
   Accesibilidad: respeta prefers-reduced-motion
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .carrusel-3d .swiper-slide-active .carrusel-3d__img{animation:none!important;
    transform:scale(1)!important}
  .carrusel-3d__progress-bar{animation:none!important;width:100%!important}
  .carrusel-3d__cta,
  .carrusel-3d__texto a{transition:none}
}