.elementor-2801 .elementor-element.elementor-element-afafd06 > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-52a3219 > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-cdc33c2 > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-faad803 > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-7eff87b > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-ccb8544 > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-a686415 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-e6cee99 > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-af32ce6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-93af7ba > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-3ffe4e5 > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-e8dd009 > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-18b0bab > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2801 .elementor-element.elementor-element-37cc463 > .elementor-element-populated{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for html, class: .elementor-element-c868b5b */.carrusel-section {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: hidden;
  overflow-y: visible;
  padding: 0;
  margin: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(0,191,255,.16) 0%,
      rgba(0,191,255,.06) 24%,
      transparent 58%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.96) 0%,
      transparent 38%
    ),
    linear-gradient(
      90deg,
      rgba(0,119,182,.32) 0%,
      rgba(0,191,255,.18) 14%,
      #f3fcff 32%,
      #ffffff 50%,
      #f3fcff 68%,
      rgba(0,191,255,.18) 86%,
      rgba(0,153,204,.32) 100%
    );
  background-size: 100% 100%;
}

.carrusel-camaras {
  position: relative;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: clamp(615px, 73vh, 700px);
  overflow: hidden;
  background: #000000;
  font-family: 'Arial', sans-serif;
  display: block;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  visibility: visible;
  opacity: 1;
  z-index: 1;
  contain: layout paint style;
}

.elementor-widget-html:has(.carrusel-camaras),
.elementor-widget-container:has(.carrusel-camaras) {
  overflow: visible;
  max-width: none;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 0;
}

.carrusel-camaras-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  display: block;
  visibility: hidden;
  background: #000000;
  backface-visibility: hidden;
}

.carrusel-camaras-slide.carrusel-camaras-sin-transicion { transition: none; }
.carrusel-camaras-slide.carrusel-camaras-izquierda { transform: translateX(-100%); visibility: visible; }
.carrusel-camaras-slide.carrusel-camaras-activo { transform: translateX(0); pointer-events: auto; z-index: 2; visibility: visible; }
.carrusel-camaras-slide.carrusel-camaras-derecha { transform: translateX(100%); visibility: visible; }

.carrusel-camaras-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.42) 100%);
  z-index: 2;
  pointer-events: none;
}

.carrusel-camaras-imagen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  background: #000000;
}

.carrusel-camaras-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(.95) contrast(1.05);
  display: block;
  position: relative;
  transform: scale(1.08);
  transition: transform 18s ease-out;
  backface-visibility: hidden;
}

.carrusel-camaras-slide.carrusel-camaras-zoom-activo .carrusel-camaras-imagen img {
  transform: scale(1.22);
}

.carrusel-camaras-particulas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .95;
  background-image: radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1.5px);
  background-size: 82px 82px;
  animation: snParticles 16s linear infinite;
  animation-play-state: paused;
}

.carrusel-camaras-en-viewport .carrusel-camaras-slide.carrusel-camaras-activo .carrusel-camaras-particulas {
  animation-play-state: running;
}

@keyframes snParticles {
  from { background-position: 0 0; }
  to   { background-position: 82px -164px; }
}

.carrusel-camaras-texto {
  position: absolute !important;
  top: 50% !important;
  left: 8% !important;
  right: auto !important;
  transform: translate(0, -50%) !important;
  text-align: left !important;
  z-index: 3 !important;
  width: 55% !important;
  max-width: 900px !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 40px 0 0 !important;
}

.carrusel-camaras-subtitulo {
  color: #FFC107 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  margin: 0 0 15px 0 !important;
  text-shadow: 0 2px 15px rgba(0,0,0,0.9), 0 0 20px rgba(255,193,7,0.45) !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1) .1s, transform .8s cubic-bezier(0.4, 0, 0.2, 1) .1s !important;
  line-height: 1.2 !important;
  font-family: 'Arial', sans-serif !important;
  background: none !important;
  border: none !important;
}

.carrusel-camaras-titulo {
  color: #00BFFF !important;
  font-size: 60px !important;
  font-weight: 800 !important;
  margin: 0 0 25px 0 !important;
  padding: 0 !important;
  letter-spacing: 4px !important;
  text-shadow: 0 2px 15px rgba(0,0,0,0.9), 0 0 40px rgba(0,191,255,0.3), 0 4px 8px rgba(0,0,0,0.5) !important;
  opacity: 0 !important;
  transform: translateY(40px) !important;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) .3s, transform 1s cubic-bezier(0.4, 0, 0.2, 1) .3s !important;
  line-height: 1.1 !important;
  font-family: 'Arial', sans-serif !important;
  background: none !important;
  border: none !important;
  text-transform: uppercase !important;
}

.carrusel-camaras-descripcion {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.9), 0 0 50px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6) !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1) .6s, transform .8s cubic-bezier(0.4, 0, 0.2, 1) .6s !important;
  line-height: 1.4 !important;
  font-family: 'Arial', sans-serif !important;
  background: none !important;
  border: none !important;
}

.carrusel-camaras-slide .carrusel-camaras-texto a.carrusel-camaras-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  box-sizing: content-box !important;
  margin-top: 28px;
  padding: 15px 30px;
  border-radius: 999px;
  background: #00BFFF;
  color: #fff;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 15px 40px rgba(0,191,255,.35);
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .8s ease .8s,
    transform .8s ease .8s,
    background .35s ease,
    box-shadow .35s ease;
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}

.carrusel-camaras-slide .carrusel-camaras-texto a.carrusel-camaras-btn:hover {
  background: #0099cc;
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,191,255,.45);
  text-decoration: none !important;
}

.carrusel-camaras.carrusel-camaras-texto-listo .carrusel-camaras-slide.carrusel-camaras-activo .carrusel-camaras-subtitulo,
.carrusel-camaras.carrusel-camaras-texto-listo .carrusel-camaras-slide.carrusel-camaras-activo .carrusel-camaras-titulo,
.carrusel-camaras.carrusel-camaras-texto-listo .carrusel-camaras-slide.carrusel-camaras-activo .carrusel-camaras-descripcion,
.carrusel-camaras.carrusel-camaras-texto-listo .carrusel-camaras-slide.carrusel-camaras-activo .carrusel-camaras-btn {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.carrusel-camaras button.scc-flecha {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0,0,0,0.48) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: none !important;
  border-radius: 50% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.carrusel-camaras button.scc-flecha:hover {
  background: rgba(0,191,255,0.38) !important;
  border-color: rgba(0,191,255,0.6) !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 0 30px rgba(0,191,255,0.3) !important;
}

.carrusel-camaras > button.scc-flecha.scc-flecha-izquierda[aria-label="Anterior"] {
  position: absolute !important;
  top: 50% !important;
  left: 30px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}

.carrusel-camaras > button.scc-flecha.scc-flecha-derecha[aria-label="Siguiente"] {
  position: absolute !important;
  top: 50% !important;
  right: 30px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

.carrusel-camaras button.scc-flecha,
.carrusel-camaras button.scc-flecha:focus,
.carrusel-camaras button.scc-flecha:focus-visible,
.carrusel-camaras button.scc-flecha:active {
  outline: none !important;
  box-shadow: none !important;
}

.carrusel-camaras-puntos {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.carrusel-camaras-punto {
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background-color 0.4s ease, width 0.4s ease, box-shadow 0.4s ease;
  display: block;
}

.carrusel-camaras-punto:hover {
  background: rgba(0,191,255,0.6);
}

.carrusel-camaras-punto.carrusel-camaras-punto-activo {
  background: #00BFFF;
  width: 50px !important;
  box-shadow: 0 0 20px rgba(0,191,255,0.5);
}

@media (max-width: 1400px) {
  .carrusel-camaras-texto {
    width: 60% !important;
    max-width: 950px !important;
    left: 6% !important;
  }
  .carrusel-camaras-titulo {
    font-size: 52px;
    letter-spacing: 2px !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 768px) {
  .carrusel-camaras {
    height: 460px !important;
  }

  /* Optimización: desactiva la animación de partículas en mobile,
     cuesta repintado continuo por animar background-position */
  .carrusel-camaras-particulas {
    animation: none !important;
  }

  /* Optimización: aísla el repintado del bloque de texto */
  .carrusel-camaras-texto {
    left: 6% !important;
    width: 65% !important;
    padding: 0 20px 0 0 !important;
    contain: content;
  }

  /* Optimización: prepara la capa de composición antes de la transición */
  .carrusel-camaras-subtitulo,
  .carrusel-camaras-titulo,
  .carrusel-camaras-descripcion {
    will-change: opacity, transform;
  }

  .carrusel-camaras-subtitulo {
    font-size: 12px !important;
    letter-spacing: 4px !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.85) !important;
  }
  .carrusel-camaras-titulo {
    font-size: 36px !important;
    letter-spacing: 2px !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.85) !important;
  }
  .carrusel-camaras-descripcion {
    font-size: 16px !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.85) !important;
  }
  .carrusel-camaras button.scc-flecha {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    font-size: 18px !important;
  }
  .carrusel-camaras > button.scc-flecha.scc-flecha-izquierda[aria-label="Anterior"] { left: 15px !important; right: auto !important; }
  .carrusel-camaras > button.scc-flecha.scc-flecha-derecha[aria-label="Siguiente"] { right: 15px !important; left: auto !important; }
  .carrusel-camaras-puntos { bottom: 30px !important; gap: 10px !important; }
  .carrusel-camaras-punto { width: 24px !important; height: 2px !important; }
  .carrusel-camaras-punto.carrusel-camaras-punto-activo { width: 38px !important; }
  .carrusel-camaras-slide .carrusel-camaras-texto a.carrusel-camaras-btn {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    padding: 12px 24px !important;
    margin-top: 20px !important;
  }
}

@media (max-width: 480px) {
  .carrusel-camaras { height: 480px !important; }
  .carrusel-camaras-texto { left: 7% !important; width: 72% !important; max-width: none !important; padding-right: 0 !important; }
  .carrusel-camaras-subtitulo { font-size: 10px !important; letter-spacing: 3px !important; margin-bottom: 10px !important; }
  .carrusel-camaras-titulo { font-size: 34px !important; line-height: 0.95 !important; margin-bottom: 14px !important; }
  .carrusel-camaras-descripcion { font-size: 16px !important; line-height: 1.35 !important; letter-spacing: 0 !important; margin-bottom: 18px !important; max-width: 95% !important; }
  .carrusel-camaras button.scc-flecha {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
  .carrusel-camaras > button.scc-flecha.scc-flecha-izquierda[aria-label="Anterior"] { left: 8px !important; right: auto !important; }
  .carrusel-camaras > button.scc-flecha.scc-flecha-derecha[aria-label="Siguiente"] { right: 8px !important; left: auto !important; }
  .carrusel-camaras-puntos { bottom: 30px !important; gap: 10px !important; }
  .carrusel-camaras-punto { width: 24px !important; height: 2px !important; }
  .carrusel-camaras-punto.carrusel-camaras-punto-activo { width: 38px !important; }
  .carrusel-camaras-slide .carrusel-camaras-texto a.carrusel-camaras-btn {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9ced3fa */.elementor-widget-html:has\(#sn-cam-sep2-bar\),
.elementor-widget-container:has\(#sn-cam-sep2-bar\){
  margin:0!important;
  padding:0!important;
  max-width:none!important;
  width:100vw!important;
  margin-left:calc(-50vw + 50%)!important;
  margin-right:calc(-50vw + 50%)!important;
}

#sn-cam-sep2-bar,
#sn-cam-sep2-bar *,
#sn-cam-sep2-bar *::before,
#sn-cam-sep2-bar *::after{
  box-sizing:border-box!important;
  margin:0;
  padding:0;
}

.sn-cam-sep2-bar {
  width: 100vw!important;
  position: relative!important;
  left: 50%!important;
  transform: translateX(-50%)!important;
  margin: 0!important;
  padding: 0!important;
  overflow: hidden!important;
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.05) 28%,
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b89c8 0%,
      #1ec8ff 52%,
      #0ea5d7 100%
    );
}

.sn-cam-sep2-bar::before {
  content: ""!important;
  position: absolute!important;
  inset: 0!important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    transparent 45%,
    rgba(0,100,160,.10)
  );
  pointer-events: none!important;
}

.sn-cam-sep2-line {
  position: absolute!important;
  left: 34px!important;
  width: calc(100% - 68px)!important;
  height: 2px!important;
  border-radius: 999px!important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.18) 14%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,.18) 86%,
      transparent 100%
    );
  box-shadow: 0 0 5px rgba(255,255,255,.22);
  animation: lineExpandLoop2 5s cubic-bezier(0.22,0.61,0.36,1) infinite;
  transform-origin: center center;
  will-change: transform;
}

.sn-cam-sep2-line-top    { top: 14px!important; }
.sn-cam-sep2-line-bottom { bottom: 14px!important; }

.sn-cam-sep2-inner {
  position: relative!important;
  height: 108px!important;
  max-width: 1250px!important;
  margin: 0 auto!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
}

.sn-cam-sep2-title {
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  gap: 14px!important;
  color: #fff!important;
  font-family: 'Inter','Segoe UI',Arial,sans-serif!important;
  font-size: 22px!important;
  font-weight: 800!important;
  letter-spacing: .6px!important;
  text-transform: uppercase!important;
  text-align: center!important;
  z-index: 2!important;
  text-shadow: 0 4px 18px rgba(0,70,120,.22);
  opacity: 0!important;
  transform: translateX(-60px)!important;
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.22,.61,.36,1);
}

.sn-cam-sep2-bar.visible .sn-cam-sep2-title {
  opacity: 1!important;
  transform: translateX(0)!important;
}

.sn-cam-sep2-title span:last-child {
  transition:
    transform .35s ease,
    text-shadow .35s ease,
    letter-spacing .35s ease;
}

.sn-cam-sep2-title:hover span:last-child {
  transform: translateY(-2px);
  letter-spacing: 1.2px;
  text-shadow:
    0 0 16px rgba(255,255,255,.35),
    0 4px 18px rgba(0,70,120,.22);
}

.sn-cam-sep2-icon {
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  flex-shrink: 0!important;
  filter: drop-shadow(0 4px 10px rgba(0,60,100,.30))!important;
  transition:
    transform .35s ease,
    filter .35s ease;
}

.sn-cam-sep2-icon svg {
  display: block!important;
  width: 44px!important;
  height: 40px!important;
}

.sn-cam-sep2-title:hover .sn-cam-sep2-icon {
  transform: scale(1.1) rotate(4deg);
  filter: drop-shadow(0 0 14px rgba(255,255,255,.45))!important;
}

@keyframes lineExpandLoop2 {
  0%   { transform: scaleX(0); opacity: 0; }
  15%  { opacity: .65; }
  38%  { transform: scaleX(1); opacity: .55; }
  68%  { transform: scaleX(1); opacity: .45; }
  100% { transform: scaleX(0); opacity: 0; }
}

@media (max-width: 768px) {
  .sn-cam-sep2-inner {
    height: 68px!important;
    padding: 0 18px!important;
  }

  .sn-cam-sep2-title{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }

  .sn-cam-sep2-icon{
    width:30px!important;
    flex-shrink:0!important;
  }

  .sn-cam-sep2-icon svg{
    width:37px!important;
    height:34px!important;
  }

  .sn-cam-sep2-line {
    left: 22px!important;
    width: calc(100% - 44px)!important;
  }

  .sn-cam-sep2-line-top    { top: 10px!important; }
  .sn-cam-sep2-line-bottom { bottom: 10px!important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4082174 *//* ── Reset Elementor ── */
.elementor-element:has\(.camara-wp\),
.elementor-widget-container:has\(.camara-wp\),
.elementor-widget-html:has\(.camara-wp\) {
  font-size: 0;
  line-height: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Contenedor raíz ── */
.camara-wp {
  background: #ffffff;
  clear: both;
  contain: layout paint style;
  float: none;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  left: 50%;
  line-height: normal;
  margin: 0;
  max-width: 100vw;
  min-width: 100vw;
  overflow: hidden;
  padding: 0;
  position: relative;
  transform: translateX(-50%);
  width: 100vw;
}

/* ── Fondo degradado ── */
.camara-bg {
  background:
    radial-gradient(
      circle at center,
      rgba(0,191,255,.16) 0%,
      rgba(0,191,255,.06) 24%,
      transparent 58%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.96) 0%,
      transparent 38%
    ),
    linear-gradient(
      90deg,
      rgba(0,119,182,.32) 0%,
      rgba(0,191,255,.18) 14%,
      #f3fcff 32%,
      #ffffff 50%,
      #f3fcff 68%,
      rgba(0,191,255,.18) 86%,
      rgba(0,153,204,.32) 100%
    );
  background-size: 100% 100%;
  inset: 0;
  position: absolute;
  z-index: 0;
}

/* ── Wrap interior ── */
.camara-wrap {
  margin: 0 auto;
  max-width: 1480px;
  padding: 60px 30px 90px;
  position: relative;
  width: 100%;
  z-index: 2;
}

/* ══ CABECERA ══════════════════════════════════════════ */
.camara-head {
  margin-bottom: 56px;
  opacity: 0;
  text-align: center;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.camara-head.animado { opacity: 1; transform: translateY(0); }

.camara-eyebrow {
  color: #00BFFF !important;
  display: block;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  margin-bottom: 14px;
  text-transform: uppercase !important;
}

.camara-head h2 {
  color: #0b1e33 !important;
  font-size: clamp(28px, 4vw, 46px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 0 0 30px;
}

/* ── Tabs ── */
.camara-.elementor-2801 .elementor-element.elementor-element-4082174 {
  display: inline-flex;
  justify-content: center;
}

.camara-tabs-track {
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 60px;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  display: inline-flex;
  gap: 4px;
  padding: 5px;
}

.camara-tab {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 50px;
  color: #475569 !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 7px;
  padding: 10px 24px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.camara-tab svg { transition: stroke .25s ease; }

.camara-tab.activo {
  background: #00BFFF;
  box-shadow: 0 6px 20px rgba(0,191,255,.32);
  color: #fff !important;
}
.camara-tab.activo svg { stroke: #fff; }

.camara-tab:not(.activo):hover {
  background: #e0f7ff;
  color: #00BFFF !important;
}
.camara-tab:not(.activo):hover svg { stroke: #00BFFF; }

.camara-arrow {
  align-items: center;
  background: transparent;
  border: none;
  color: #00BFFF;
  cursor: pointer;
  display: none;
  justify-content: center;
  outline: none;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.camara-arrow:hover { opacity: .7; }

/* ══ GRID ══════════════════════════════════════════════ */
.camara-grid {
  align-items: center;
  display: grid;
  gap: 90px;
  grid-template-columns: 1.05fr 0.95fr;
}

/* ══ COLUMNA IMAGEN (IZQUIERDA) ═══════════════════════ */
.camara-visual {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateX(-36px);
  will-change: opacity, transform;
  transition: opacity .7s ease .2s, transform .7s cubic-bezier(.22,.61,.36,1) .2s;
}
.camara-visual.animado {
  opacity: 1;
  transform: translateX(0);
}
.camara-visual.animado:not(.switching) {
  will-change: auto;
}
.camara-visual.switching {
  will-change: opacity, transform;
  transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
}

.camara-img-frame {
  border-radius: 24px;
  overflow: visible;
  position: relative;
  box-shadow:
    0 24px 60px rgba(15,23,42,.12),
    0 0 0 1px rgba(0,191,255,.12);
}

/* Marcos decorativos */
.camara-img-frame::before,
.camara-img-frame::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 34px;
  pointer-events: none;
  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    inset .7s cubic-bezier(.16,1,.3,1);
}
.camara-img-frame::before {
  border: 2px solid rgba(0,191,255,.75);
  box-shadow: 0 0 18px rgba(0,191,255,.18);
  transform: rotate(-2deg);
  z-index: 4;
}
.camara-img-frame::after {
  border: 2px solid rgba(255,255,255,.85);
  transform: rotate(2deg);
  z-index: 5;
}
.camara-img-frame:hover::before,
.camara-img-frame:hover::after {
  inset: 0;
  transform: rotate(0deg);
}

.camara-img-frame img {
  aspect-ratio: 4/3;
  border-radius: 24px;
  display: block;
  object-fit: cover;
  object-position: center;
  position: relative;
  transition: opacity .5s ease, transform .6s ease;
  width: 100%;
  z-index: 2;
}

/* Glow de fondo */
.camara-img-glow {
  background: radial-gradient(circle at 40% 40%, rgba(0,191,255,.22), transparent 70%);
  border-radius: 24px;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* Chip flotante */
.camara-chip {
  align-items: center;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50px;
  bottom: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
  color: #0b1e33 !important;
  display: inline-flex;
  font-size: 13px !important;
  font-weight: 700 !important;
  gap: 8px;
  left: 18px;
  padding: 8px 16px;
  position: absolute;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 6;
}
.camara-chip svg { color: #00BFFF; }

/* Tarjeta de compatibilidad */
.camara-compat {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 35px;
  padding: 14px 20px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.camara-compat-label {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.camara-compat-logos {
  align-items: center;
  display: flex;
  gap: 8px;
}
.camara-compat-logos span {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px;
  transition: background .35s ease, color .35s ease;
}
.camara-compat:hover {
  transform: translateY(-4px);
  background: #ffffff;
  border-color: rgba(0,191,255,.35);
  box-shadow: 0 12px 28px rgba(0,191,255,.12), 0 0 0 1px rgba(0,191,255,.08);
}
.camara-compat-logos span:hover {
  background: #00BFFF;
  color: #fff !important;
}

/* ══ TARJETA PROMOCIONAL ROTATIVA ══════════════════════ */
.camara-promo {
  position: relative;
  overflow: hidden;
  min-height: 72px;
  margin-top: 15px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(225,246,255,.92);
  border: 1px solid rgba(0,191,255,.35);
  box-shadow:
    0 10px 30px rgba(15,23,42,.06),
    0 0 0 1px rgba(255,255,255,.5) inset;
  color: #fff;
}

.camara-promo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 55px 18px 20px;
  opacity: 0;
  transform: translateX(25px);
  transition: opacity .5s ease, transform .5s ease;
}
.camara-promo-slide.activo {
  opacity: 1;
  transform: translateX(0);
}

.promo-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(0,191,255,.45);
  color: #00BFFF;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,191,255,.10);
}

.camara-promo strong {
  display: block;
  color: #00BFFF !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-bottom: 4px;
  white-space: nowrap;
}
.camara-promo p {
  margin: 0;
  color: #0F3D5C !important;
  font-size: 13px !important;
  line-height: 1.45;
  white-space: nowrap;
}
.promo-dark {
  background: none;
  padding: 0;
  color: #0F3D5C !important;
  font-weight: 800;
}

/* Flecha indicadora */
.camara-promo-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: #ffffff !important;
  border: 1px solid rgba(0,191,255,.30) !important;
  border-radius: 50%;
  color: #00BFFF !important;
  box-shadow: 0 4px 12px rgba(0,191,255,.08);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  z-index: 20;
}
.camara-promo-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  display: block;
  pointer-events: none;
}
.camara-promo-arrow:hover {
  background: #00BFFF !important;
  color: #ffffff !important;
  border-color: #00BFFF !important;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 20px rgba(0,191,255,.25);
}
.camara-promo-arrow:focus,
.camara-promo-arrow:focus-visible,
.camara-promo-arrow:active {
  outline: none !important;
  box-shadow: 0 8px 20px rgba(0,191,255,.25) !important;
}
button.camara-promo-arrow {
  background: #ffffff !important;
  min-height: auto !important;
  line-height: 1 !important;
}

/* ══ COLUMNA TEXTO (DERECHA) ══════════════════════════ */
.camara-info {
  opacity: 0;
  transform: translateX(36px);
  will-change: opacity, transform;
  transition: opacity .7s ease .35s, transform .7s cubic-bezier(.22,.61,.36,1) .35s;
}
.camara-info.animado {
  opacity: 1;
  transform: translateX(0);
}
.camara-info.animado:not(.switching) {
  will-change: auto;
}
.camara-info.switching {
  will-change: opacity, transform;
  transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
}

/* Badge */
.camara-badge-wrap { margin-bottom: 20px; }
.camara-badge {
  background: rgba(0,191,255,.10);
  border: 1px solid rgba(0,191,255,.25);
  border-radius: 20px;
  color: #0099cc !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  padding: 5px 14px;
  text-transform: uppercase;
}

/* Línea acento */
.camara-accent-line {
  background: #00BFFF;
  border-radius: 20px;
  height: 5px;
  margin-bottom: 18px;
  width: 56px;
}

/* Títulos */
.camara-title {
  color: #0b1e33 !important;
  font-size: clamp(30px, 3.5vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0 0 8px;
}
.camara-subtitle {
  color: #00BFFF !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin-bottom: 20px !important;
}
.camara-desc {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.75;
  margin: 0 0 8px;
}

/* ── Checks ── */
.camara-checks {
  border-left: 2px solid rgba(0,191,255,.4) !important;
  list-style: none;
  margin: 0 0 28px;
  padding: 0 0 0 24px;
}
.camara-checks li {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateX(16px);
  transition: transform .35s ease, opacity .35s ease;
}
.camara-checks li.visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.camara-checks li:last-child { margin-bottom: 0; }
.camara-checks li:hover { transform: translateX(6px); }

.camara-checks li:hover .camara-check-icon {
  will-change: transform;
  background: #00BFFF;
  border-color: #00BFFF;
  color: #ffffff;
  transform: rotate(360deg) scale(1.08);
}

.camara-check-icon {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: #ffffff;
  border: 1px solid rgba(0,191,255,.45) !important;
  border-radius: 50%;
  color: #00BFFF !important;
  box-shadow: 0 5px 15px rgba(0,0,0,.04), 0 0 0 1px rgba(255,255,255,.8) inset;
  transition: background .45s ease, border-color .45s ease, color .45s ease, transform .45s ease;
}
.camara-check-icon svg { stroke: #00BFFF !important; }
.camara-checks li:hover .camara-check-icon svg { stroke: #ffffff !important; }

.camara-checks li strong {
  color: #0b1e33 !important;
  display: block;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 2px;
}
.camara-checks li span {
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.55;
}

/* ── Precio ── */
.camara-precio {
  border-top: 1px solid rgba(0,191,255,.3) !important;
  margin-bottom: 28px;
  margin-top: 6px;
  opacity: 0;
  padding-top: 22px;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.camara-precio.visible { opacity: 1; transform: translateY(0); }

.camara-precio-label {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.camara-monto {
  color: #0b1e33 !important;
  font-size: clamp(32px, 4vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px;
  line-height: 1;
}

/* ── Botón ── */
.camara-btn {
  align-items: center;
  background: #00BFFF;
  border: none;
  border-radius: 50px;
  box-shadow: 0 10px 28px rgba(0,191,255,.30);
  color: #fff !important;
  display: inline-flex;
  font-size: 15px !important;
  font-weight: 600 !important;
  gap: 10px;
  letter-spacing: .3px;
  opacity: 0;
  padding: 14px 30px;
  text-decoration: none !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(12px);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease, opacity .5s ease;
}
.camara-btn svg { transition: transform .3s ease; }
.camara-btn:hover {
  background: #0099cc;
  box-shadow: 0 18px 38px rgba(0,191,255,.40);
  color: #fff !important;
  transform: translateY(-3px);
}
.camara-btn:hover svg { transform: translateX(5px); }
.camara-btn.visible { opacity: 1; transform: translateY(0); }

/* ══ ANIMACIÓN FLOAT ═══════════════════════════════════ */
@keyframes camaraFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.camara-visual.animado .camara-img-frame {
  animation: camaraFloat 5s ease-in-out infinite;
  animation-play-state: paused;
}
.camara-en-viewport .camara-visual.animado .camara-img-frame {
  animation-play-state: running;
}

/* ══ RESPONSIVE ════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1500px) {
  .camara-grid {
    gap: 55px;
    grid-template-columns: 1.12fr 0.88fr;
  }
}

@media (max-width: 1024px) {
  .camara-grid {
    gap: 44px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .camara-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .camara-visual {
    order: -1;
    transform: translateY(24px);
  }
  .camara-visual.animado { transform: translateY(0); }
  .camara-info { transform: translateY(24px); }
  .camara-info.animado { transform: translateY(0); }
  .camara-wrap { padding: 50px 24px 60px; }
}

@media (max-width: 620px) {
  .camara-wrap { padding: 40px 14px 50px; }
  .camara-head { margin-bottom: 24px; }
  .camara-head h2 { font-size: 42px !important; line-height: 1.1 !important; margin-bottom: 24px !important; }
  .camara-eyebrow { font-size: 12px !important; letter-spacing: 3px !important; }

  .camara-img-frame { border-radius: 20px; }
  .camara-img-frame img { aspect-ratio: auto; height: auto; width: 100%; }
  .camara-img-frame::before,
  .camara-img-frame::after { inset: -4px; }

  .camara-chip { left: 12px; bottom: 12px; padding: 8px 14px; font-size: 12px !important; }

  .camara-compat {
    width: 100%;
    margin-top: 20px;
    padding: 16px 14px;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .camara-compat-logos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .camara-compat-logos span { width: 100%; text-align: center; padding: 8px 6px; font-size: 11px !important; }

  .camara-promo { margin-top: 10px; min-height: 92px; }
  .camara-promo-slide { padding: 14px 48px 14px 14px; }
  .promo-icon { width: 38px; height: 38px; }
  .camara-promo strong { font-size: 13px !important; white-space: normal; }
  .camara-promo p { font-size: 12px !important; white-space: normal; line-height: 1.35; }

  .camara-badge { font-size: 11px !important; padding: 5px 12px; }
  .camara-title { font-size: 28px !important; }
  .camara-subtitle { font-size: 18px !important; }
  .camara-desc { font-size: 15px !important; line-height: 1.8 !important; text-align: left; }

  .camara-checks { padding-left: 14px; }
  .camara-checks li { gap: 12px; margin-bottom: 16px; }
  .camara-check-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .camara-checks li strong { font-size: 14px !important; line-height: 1.35; }
  .camara-checks li span { font-size: 13px !important; line-height: 1.55; }

  .camara-monto { font-size: 32px !important; }
  .camara-btn { width: 100%; justify-content: center; }

  /* Tabs móvil: solo se declara UNA vez (se quitó el bloque duplicado) */
  .camara-tabs-track {
    background: #f1f5f9;
    border: 1px solid rgba(0,191,255,.15);
    border-radius: 999px;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    max-width: 230px;
    padding: 5px;
    width: 100%;
    margin: 0 auto !important;
  }
  .camara-tab { display: none; }
  .camara-tab.activo {
    align-items: center;
    background: linear-gradient(135deg, #00BFFF, #0099cc);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,191,255,.30);
    color: #fff !important;
    display: flex;
    font-size: 13px !important;
    font-weight: 700 !important;
    gap: 7px;
    height: 38px;
    justify-content: center;
    padding: 0 12px;
    width: 100%;
  }
  .camara-tab.activo svg { stroke: #fff; }

  .camara-arrow {
    align-items: center;
    background: transparent !important;
    border: none;
    box-shadow: none !important;
    color: #00BFFF !important;
    display: flex;
    justify-content: center;
    outline: none !important;
    padding: 0;
  }
  .camara-arrow:active { transform: scale(1.1); }
}

@media (max-width: 390px) {
  .camara-head h2 { font-size: 32px !important; }
  .camara-title { font-size: 24px !important; }
  .camara-subtitle { font-size: 17px !important; }
  .camara-desc { font-size: 14px !important; }
  .camara-monto { font-size: 28px !important; }
}

/* ── Touch: sin hover pegajoso ── */
@media (hover: none) {
  .camara-tab:not(.activo):hover,
  .camara-tab:not(.activo):hover svg { background: transparent; color: #475569 !important; stroke: #475569; }
  .camara-arrow:hover { opacity: 1; }
  .camara-compat:hover { transform: none; background: #f8fafc; border-color: #e2e8f0; box-shadow: none; }
  .camara-compat-logos span:hover { background: #fff; color: #475569 !important; }
  .camara-promo-arrow:hover { transform: translateY(-50%); background: #ffffff !important; color: #00BFFF !important; border-color: rgba(0,191,255,.30) !important; box-shadow: 0 4px 12px rgba(0,191,255,.08); }
  .camara-checks li:hover { transform: none; }
  .camara-checks li:hover .camara-check-icon { background: #ffffff; border-color: rgba(0,191,255,.45) !important; color: #00BFFF !important; transform: none; }
  .camara-checks li:hover .camara-check-icon svg { stroke: #00BFFF !important; }
  .camara-btn:hover { background: #00BFFF; box-shadow: 0 10px 28px rgba(0,191,255,.30); color: #fff !important; transform: none; }
  .camara-btn:hover svg { transform: none; }
  .camara-img-frame:hover::before { inset: -10px; transform: rotate(-2deg); }
  .camara-img-frame:hover::after { inset: -10px; transform: rotate(2deg); }
}

@media (max-width: 620px) {
  @media (hover: none) {
    .camara-img-frame:hover::before { inset: -4px; }
    .camara-img-frame:hover::after { inset: -4px; }
  }
}

/* ── Flechas desktop/tablet: limpias a los lados (sin contenedor) ── */
@media (min-width: 621px) {
  .camara-arrow {
    background: transparent !important;
    border: none;
    box-shadow: none !important;
    color: #00BFFF !important;
    display: flex;
    justify-content: center;
    outline: none !important;
    padding: 0;
  }
  .camara-arrow:hover { opacity: 1; transform: scale(1.12); }
  .camara-arrow:active { transform: scale(1.1); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-39779ca */.elementor-widget-html:has\(#sn-cam-sep3-bar\),
.elementor-widget-container:has\(#sn-cam-sep3-bar\){
  margin:0!important;
  padding:0!important;
  max-width:none!important;
  width:100vw!important;
  margin-left:calc(-50vw + 50%)!important;
  margin-right:calc(-50vw + 50%)!important;
}

#sn-cam-sep3-bar,
#sn-cam-sep3-bar *,
#sn-cam-sep3-bar *::before,
#sn-cam-sep3-bar *::after{
  box-sizing:border-box!important;
  margin:0;
  padding:0;
}

.sn-cam-sep3-bar {
  width: 100vw!important;
  position: relative!important;
  left: 50%!important;
  transform: translateX(-50%)!important;
  margin: 0!important;
  padding: 0!important;
  overflow: hidden!important;
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.05) 28%,
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b89c8 0%,
      #1ec8ff 52%,
      #0ea5d7 100%
    );
}

.sn-cam-sep3-bar::before {
  content: ""!important;
  position: absolute!important;
  inset: 0!important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    transparent 45%,
    rgba(0,100,160,.10)
  );
  pointer-events: none!important;
}

.sn-cam-sep3-line {
  position: absolute!important;
  left: 34px!important;
  width: calc(100% - 68px)!important;
  height: 2px!important;
  border-radius: 999px!important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.18) 14%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,.18) 86%,
      transparent 100%
    );
  box-shadow: 0 0 5px rgba(255,255,255,.22);
  animation: lineExpandLoop3 5s cubic-bezier(0.22,0.61,0.36,1) infinite;
  transform-origin: center center;
  will-change: transform;
}

.sn-cam-sep3-line-top    { top: 14px!important; }
.sn-cam-sep3-line-bottom { bottom: 14px!important; }

.sn-cam-sep3-inner {
  position: relative!important;
  height: 108px!important;
  max-width: 1250px!important;
  margin: 0 auto!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
}

.sn-cam-sep3-title {
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  gap: 14px!important;
  color: #fff!important;
  font-family: 'Inter','Segoe UI',Arial,sans-serif!important;
  font-size: 22px!important;
  font-weight: 800!important;
  letter-spacing: .6px!important;
  text-transform: uppercase!important;
  text-align: center!important;
  z-index: 2!important;
  text-shadow: 0 4px 18px rgba(0,70,120,.22);
  opacity: 0!important;
  transform: translateX(-60px)!important;
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.22,.61,.36,1);
}

.sn-cam-sep3-bar.visible .sn-cam-sep3-title {
  opacity: 1!important;
  transform: translateX(0)!important;
}

.sn-cam-sep3-title span:last-child {
  transition:
    transform .35s ease,
    text-shadow .35s ease,
    letter-spacing .35s ease;
}

.sn-cam-sep3-title:hover span:last-child {
  transform: translateY(-2px);
  letter-spacing: 1.2px;
  text-shadow:
    0 0 16px rgba(255,255,255,.35),
    0 4px 18px rgba(0,70,120,.22);
}

.sn-cam-sep3-icon {
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  flex-shrink: 0!important;
  filter: drop-shadow(0 4px 10px rgba(0,60,100,.30))!important;
  transition:
    transform .35s ease,
    filter .35s ease;
}

.sn-cam-sep3-icon svg {
  display: block!important;
  width: 44px!important;
  height: 40px!important;
}

.sn-cam-sep3-title:hover .sn-cam-sep3-icon {
  transform: scale(1.1) rotate(4deg);
  filter: drop-shadow(0 0 14px rgba(255,255,255,.45))!important;
}

@keyframes lineExpandLoop3 {
  0%   { transform: scaleX(0); opacity: 0; }
  15%  { opacity: .65; }
  38%  { transform: scaleX(1); opacity: .55; }
  68%  { transform: scaleX(1); opacity: .45; }
  100% { transform: scaleX(0); opacity: 0; }
}

@media (max-width: 768px) {
  .sn-cam-sep3-inner {
    height: 68px!important;
    padding: 0 18px!important;
  }

  .sn-cam-sep3-title{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }

  .sn-cam-sep3-icon{
    width:30px!important;
    flex-shrink:0!important;
  }

  .sn-cam-sep3-icon svg{
    width:37px!important;
    height:34px!important;
  }

  .sn-cam-sep3-line {
    left: 22px!important;
    width: calc(100% - 44px)!important;
  }

  .sn-cam-sep3-line-top    { top: 10px!important; }
  .sn-cam-sep3-line-bottom { bottom: 10px!important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c4bff3a */.elementor-widget-html:has\(#sn-acc-catalogo-pro\),
.elementor-widget-container:has\(#sn-acc-catalogo-pro\){
  margin:0!important;
  padding:0!important;
  max-width:none!important;
  width:100vw!important;
  margin-left:calc(-50vw + 50%)!important;
  margin-right:calc(-50vw + 50%)!important;
}

#sn-acc-catalogo-pro,
#sn-acc-catalogo-pro *,
#sn-acc-catalogo-pro *::before,
#sn-acc-catalogo-pro *::after{
  box-sizing:border-box!important;
  margin:0;
  padding:0;
}

#sn-acc-catalogo-pro{
  width:100vw!important;
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  overflow:hidden!important;
  padding:60px 30px 90px!important;
  contain:layout paint style!important;
  background:
    radial-gradient(
      circle at center,
      rgba(0,191,255,.16) 0%,
      rgba(0,191,255,.06) 24%,
      transparent 58%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.96) 0%,
      transparent 38%
    ),
    linear-gradient(
      90deg,
      rgba(0,119,182,.32) 0%,
      rgba(0,191,255,.18) 14%,
      #f3fcff 32%,
      #ffffff 50%,
      #f3fcff 68%,
      rgba(0,191,255,.18) 86%,
      rgba(0,153,204,.32) 100%
    );
  background-size: 100% 100%;
  font-family:'Inter','Segoe UI',Arial,sans-serif!important;
}

.sn-cam-bg-orb{
  position:absolute!important;
  width:360px!important;
  height:360px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(0,191,255,.10),transparent 65%)!important;
  pointer-events:none!important;
  z-index:0!important;
}

.orb-a{
  left:-130px!important;
  top:80px!important;
}

.orb-b{
  right:-130px!important;
  bottom:40px!important;
}

.sn-cam-pro-wrap{
  max-width:1400px!important;
  margin:0 auto!important;
  position:relative!important;
  z-index:2!important;
}

/* ══ CABECERA — estilos alineados con la sección de cámaras ══ */
.sn-cam-pro-head{
  text-align:center!important;
  max-width:790px!important;
  margin:0 auto 56px!important;
  opacity:0!important;
  transform:translateY(24px)!important;
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22,.61,.36,1)!important;
}

#sn-acc-catalogo-pro.visible .sn-cam-pro-head{
  opacity:1!important;
  transform:translateY(0)!important;
}

.sn-cam-pro-head span{
  color:#00BFFF!important;
  display:block!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:3px!important;
  margin-bottom:14px!important;
  text-transform:uppercase!important;
}

.sn-cam-pro-head h2{
  color:#0b1e33!important;
  -webkit-text-fill-color:#0b1e33!important;
  font-size:clamp(28px,4vw,46px)!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:-0.5px!important;
  margin-bottom:20px!important;
}

.sn-cam-pro-head p{
  color:#475569!important;
  font-size:16px!important;
  line-height:1.75!important;
  margin:0!important;
}

.sn-cam-pro-layout{
  display:grid!important;
  grid-template-columns:1fr 1px 1fr!important;
  gap:42px!important;
  align-items:flex-start!important;
}

.sn-cam-products{
  opacity:0!important;
  transform:translateX(-70px)!important;
  transition:
    opacity 1s ease .1s,
    transform 1.15s cubic-bezier(.16,1,.3,1) .1s!important;
}

#sn-acc-catalogo-pro.visible .sn-cam-products{
  opacity:1!important;
  transform:translateX(0)!important;
}

.sn-cam-grid{
  display:grid!important;
  grid-template-columns:repeat(2,1fr)!important;
  gap:20px!important;
}

.sn-cam-card{
  position:relative!important;
  background:#ffffff!important;
  border:1px solid rgba(0,191,255,.14)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:0 10px 26px rgba(0,50,80,.07)!important;
  cursor:pointer!important;
  contain:layout paint style!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease!important;
}

.sn-cam-card:hover,
.sn-cam-card.active{
  transform:translateY(-8px)!important;
  border-color:rgba(0,191,255,.38)!important;
  box-shadow:0 16px 40px rgba(0,191,255,.16)!important;
}

/* Indicador de tarjeta seleccionada */
.sn-cam-card.active::after{
  content:"✓"!important;
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  z-index:6!important;
  width:30px!important;
  height:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#00BFFF!important;
  color:#ffffff!important;
  font-size:16px!important;
  font-weight:900!important;
  border-radius:50%!important;
  box-shadow:0 8px 18px rgba(0,191,255,.35)!important;
  animation:snCheckPop .4s cubic-bezier(.16,1,.3,1)!important;
}

@keyframes snCheckPop{
  0%{ transform:scale(.4); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

.sn-cam-img{
  height:220px!important;
  padding:0!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at center, rgba(0,191,255,.16), transparent 58%),
    linear-gradient(180deg,#f4fbff,#eaf8ff)!important;
  overflow:hidden!important;
}

.sn-cam-img::before{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  border-radius:16px!important;
  border:1.5px solid rgba(0,191,255,.25)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.40),
    0 0 0 1px rgba(0,191,255,.06)!important;
  z-index:3!important;
  pointer-events:none!important;
}

.sn-cam-img img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  position:relative!important;
  z-index:2!important;
  transition:transform .45s ease!important;
}

.sn-cam-card:hover .sn-cam-img img,
.sn-cam-card.active .sn-cam-img img{
  transform:scale(1.06)!important;
}

.sn-cam-img span{
  position:absolute!important;
  top:12px!important;
  left:12px!important;
  z-index:4!important;
  padding:6px 14px!important;
  border-radius:999px!important;
  background:#00BFFF!important;
  color:#ffffff!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:1.3px!important;
  text-transform:uppercase!important;
  box-shadow:0 8px 18px rgba(0,191,255,.24)!important;
}

.sn-cam-info{
  padding:20px!important;
}

/* ══ Tarjetas izquierdas — colores alineados con la sección de cámaras ══ */
.sn-cam-info h3{
  color:#0b1e33!important;
  -webkit-text-fill-color:#0b1e33!important;
  font-size:19px!important;
  line-height:1.2!important;
  font-weight:800!important;
  margin-bottom:8px!important;
}

.sn-cam-info p{
  color:#475569!important;
  font-size:13.5px!important;
  line-height:1.55!important;
  margin-bottom:15px!important;
}

/* Botón "Ver detalles" — píldora con chevron */
.sn-cam-detail{
  width:100%!important;
  position:relative!important;
  border:1.5px solid rgba(0,191,255,.35)!important;
  background:#ffffff!important;
  color:#00BFFF!important;
  border-radius:999px!important;
  padding:10px 40px 10px 16px!important;
  font-size:13px!important;
  font-weight:800!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:
    background .3s ease,
    color .3s ease,
    border-color .3s ease,
    transform .3s ease!important;
}

.sn-cam-detail::after{
  content:""!important;
  position:absolute!important;
  right:16px!important;
  top:50%!important;
  width:7px!important;
  height:7px!important;
  border-top:2px solid currentColor!important;
  border-right:2px solid currentColor!important;
  transform:translateY(-50%) rotate(45deg)!important;
  transition:transform .3s ease!important;
}

.sn-cam-detail:hover{
  background:#00BFFF!important;
  color:#ffffff!important;
  border-color:#00BFFF!important;
  transform:translateY(-2px)!important;
}

.sn-cam-detail:hover::after{
  transform:translateY(-50%) rotate(45deg) translateX(3px)!important;
}

/* ══ DESPLEGABLE "VER MÁS" — expandir/contraer suave ══ */
.sn-cam-extra-wrap{
  display:grid!important;
  grid-column:1 / -1!important;
  grid-template-rows:0fr!important;
  transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)!important;
}
.sn-cam-extra-wrap.open{
  grid-template-rows:1fr!important;
}
.sn-cam-extra-inner{
  display:grid!important;
  grid-template-columns:repeat(2,1fr)!important;
  gap:20px!important;
  min-height:0!important;
  overflow:hidden!important;
}
.sn-extra-card{
  min-height:0!important;
}

.sn-cam-more-area{
  text-align:center!important;
  margin-top:34px!important;
}

.sn-cam-more-btn{
  border:none!important;
  background:#00BFFF!important;
  color:#ffffff!important;
  border-radius:999px!important;
  padding:14px 46px 14px 34px!important;
  font-size:15px!important;
  font-weight:800!important;
  cursor:pointer!important;
  position:relative!important;
  box-shadow:0 14px 35px rgba(0,191,255,.28)!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease!important;
}

.sn-cam-more-btn::after{
  content:""!important;
  position:absolute!important;
  right:20px!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-right:2px solid #ffffff!important;
  border-bottom:2px solid #ffffff!important;
  transform:translateY(-70%) rotate(45deg)!important;
  transition:transform .35s ease!important;
}

.sn-cam-more-btn:hover{
  background:#0099cc!important;
  transform:translateY(-4px)!important;
  box-shadow:0 20px 48px rgba(0,191,255,.38)!important;
}

.sn-cam-more-btn.active::after{
  transform:translateY(-30%) rotate(-135deg)!important;
}

/* ══ SEPARADOR — se estira y se acopla al alto real del contenido ══ */
.sn-cam-separator{
  width:1px!important;
  height:auto!important;
  align-self:stretch!important;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,191,255,.22),
      #00BFFF,
      rgba(0,191,255,.22),
      transparent
    )!important;
  box-shadow:0 0 16px rgba(0,191,255,.22)!important;
  opacity:0!important;
  transform:scaleY(.25)!important;
  transform-origin:center!important;
  transition:
    opacity .8s ease .2s,
    transform 1s cubic-bezier(.16,1,.3,1) .2s!important;
}

#sn-acc-catalogo-pro.visible .sn-cam-separator{
  opacity:1!important;
  transform:scaleY(1)!important;
}

.sn-cam-showcase{
  position:relative!important;
  min-height:590px!important;
  border-radius:42px!important;
  background:
    linear-gradient(180deg,rgba(244,251,255,.92),rgba(235,248,255,.86))!important;
  border:1px solid rgba(0,191,255,.18)!important;
  box-shadow:
    0 28px 80px rgba(0,50,80,.10),
    inset 0 0 0 1px rgba(255,255,255,.65)!important;
  overflow:hidden!important;
  contain:layout paint style!important;
  opacity:0!important;
  transform:translateX(70px)!important;
  transition:
    opacity 1s ease .18s,
    transform 1.15s cubic-bezier(.16,1,.3,1) .18s!important;
}

#sn-acc-catalogo-pro.visible .sn-cam-showcase{
  opacity:1!important;
  transform:translateX(0)!important;
}

/* Optimización: el fondo punteado animado ahora se mueve con
   transform en vez de background-position — transform corre en
   el compositor (GPU) sin repintar cada frame durante 34s en loop */
.sn-show-bg{
  position:absolute!important;
  inset:-56px!important;
  background-image:
    radial-gradient(circle at 2px 2px, rgba(0,191,255,.16) 1.4px, transparent 1.5px)!important;
  background-size:28px 28px!important;
  opacity:.45!important;
  animation:snCamBgMove 34s linear infinite!important;
  pointer-events:none!important;
  will-change:transform!important;
}

@keyframes snCamBgMove{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-28px,-28px,0); }
}

#sn-acc-catalogo-pro.sn-cam-offscreen .sn-show-bg{
  animation-play-state:paused!important;
}

/* Barra de progreso del showcase */
.sn-show-progress{
  position:absolute!important;
  top:0!important;
  left:0!important;
  height:4px!important;
  width:0%!important;
  background:linear-gradient(90deg,#00BFFF,#00e5ff)!important;
  box-shadow:0 0 12px rgba(0,191,255,.6)!important;
  border-radius:0 4px 4px 0!important;
  z-index:5!important;
  pointer-events:none!important;
  opacity:0!important;
}

.sn-show-progress.run{
  opacity:1!important;
  animation:snShowProgress 1.5s cubic-bezier(.16,1,.3,1) forwards!important;
}

@keyframes snShowProgress{
  0%{ width:0%; opacity:1; }
  55%{ width:100%; opacity:1; }
  100%{ width:100%; opacity:0; }
}

.sn-show-main{
  position:relative!important;
  height:380px!important;
  padding:20px!important;
  margin-bottom:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:2!important;
  background:
    radial-gradient(
      circle at center,
      rgba(0,191,255,.08),
      transparent 70%
    ),
    rgba(255,255,255,.78)!important;
  border-radius:28px 28px 0 0!important;
  border:1px solid rgba(255,255,255,.85)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    0 12px 30px rgba(0,80,120,.08)!important;
}

.sn-show-frame{
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at center, rgba(0,191,255,.10), transparent 60%),
    rgba(255,255,255,.50)!important;
  border:2px solid rgba(0,191,255,.35)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.95),
    0 0 0 4px rgba(0,191,255,.06),
    0 0 0 1px rgba(0,191,255,.12)!important;
  padding:0!important;
  overflow:hidden!important;
}

.sn-show-main img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  max-width:none!important;
  position:relative!important;
  z-index:3!important;
  transition:
    opacity .25s ease,
    transform .35s ease!important;
}

/* ══ TARJETA SHOWCASE — colores alineados con la sección de cámaras ══ */
.sn-show-card{
  position:relative!important;
  z-index:3!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(0,191,255,.16)!important;
  border-radius:0 0 26px 26px!important;
  padding:24px!important;
  margin-top:-1px!important;
  box-shadow:0 20px 55px rgba(0,50,80,.10)!important;
}

.sn-show-card span{
  display:inline-flex!important;
  color:#0099cc!important;
  background:rgba(0,191,255,.10)!important;
  border:1px solid rgba(0,191,255,.25)!important;
  border-radius:20px!important;
  padding:5px 14px!important;
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:1px!important;
  margin-bottom:14px!important;
}

.sn-show-card h3{
  color:#0b1e33!important;
  -webkit-text-fill-color:#0b1e33!important;
  font-size:26px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:-1px!important;
  margin-bottom:10px!important;
}
.sn-show-card h3::before{
  content:""!important;
  display:block!important;
  width:56px!important;
  height:5px!important;
  border-radius:20px!important;
  background:#00BFFF!important;
  margin-bottom:14px!important;
}

.sn-show-card p{
  color:#475569!important;
  font-size:15px!important;
  line-height:1.75!important;
  margin-bottom:0!important;
}

.sn-show-features{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  margin-bottom:0!important;
  margin-top:18px!important;
}

.sn-feature-item{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  background:rgba(0,191,255,.03)!important;
  border:1px solid rgba(0,191,255,.08)!important;
  border-radius:14px!important;
  padding:12px 16px!important;
  color:#0b1e33!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.4!important;
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease!important;
}

.sn-feature-item:hover{
  background:rgba(0,191,255,.08)!important;
  border-color:rgba(0,191,255,.18)!important;
  transform:translateX(4px)!important;
}

/* ── PRECIO ── */
.sn-show-price{
  margin:22px 0 20px!important;
  padding:20px 0 0!important;
  border-top:1px solid rgba(0,191,255,.16)!important;
  border-bottom:1px solid rgba(0,191,255,.10)!important;
  padding-bottom:18px!important;
}

.sn-show-price-label{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:2.5px!important;
  text-transform:uppercase!important;
  margin-bottom:6px!important;
}

.sn-show-price-row{
  display:flex!important;
  align-items:baseline!important;
}

.sn-show-price strong{
  color:#0b1e33!important;
  font-size:42px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:-1.5px!important;
}

/* Botón "Solicitar cotización" — píldora con chevron */
.sn-show-btn{
  display:inline-flex!important;
  width:100%!important;
  align-items:center!important;
  justify-content:center!important;
  padding:14px 46px 14px 22px!important;
  border-radius:999px!important;
  background:#00BFFF!important;
  color:#ffffff!important;
  text-decoration:none!important;
  font-size:15px!important;
  font-weight:800!important;
  position:relative!important;
  box-shadow:0 14px 35px rgba(0,191,255,.28)!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:
    background .35s ease,
    transform .35s ease,
    box-shadow .35s ease!important;
}

.sn-show-btn::after{
  content:""!important;
  position:absolute!important;
  right:22px!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-top:2px solid #ffffff!important;
  border-right:2px solid #ffffff!important;
  transform:translateY(-50%) rotate(45deg)!important;
  transition:transform .3s ease!important;
}

.sn-show-btn:hover{
  background:#0099cc!important;
  transform:translateY(-3px)!important;
  box-shadow:0 20px 48px rgba(0,191,255,.38)!important;
}

.sn-show-btn:hover::after{
  transform:translateY(-50%) rotate(45deg) translateX(4px)!important;
}

@media(max-width:1050px){
  .sn-cam-pro-layout{
    grid-template-columns:1fr!important;
    gap:42px!important;
  }

  .sn-cam-separator{
    width:100%!important;
    height:1px!important;
    align-self:auto!important;
    transform:scaleX(.25)!important;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(0,191,255,.22),
        #00BFFF,
        rgba(0,191,255,.22),
        transparent
      )!important;
  }

  #sn-acc-catalogo-pro.visible .sn-cam-separator{
    transform:scaleX(1)!important;
  }

  .sn-cam-showcase{
    max-width:620px!important;
    width:100%!important;
    margin:0 auto!important;
  }
}

@media(max-width:700px){
  #sn-acc-catalogo-pro{
    padding:50px 15px 60px!important;
  }

  .sn-cam-pro-head{
    margin-bottom:24px!important;
  }

  .sn-cam-pro-head span{
    font-size:12px!important;
    letter-spacing:3px!important;
  }

  .sn-cam-pro-head h2{
    font-size:42px!important;
    line-height:1.1!important;
    margin-bottom:24px!important;
  }

  .sn-cam-pro-head p{
    font-size:15px!important;
    line-height:1.8!important;
  }

  .sn-cam-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .sn-cam-extra-inner{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  /* Optimización UX mobile: tarjetas horizontales (imagen a la
     izquierda, info a la derecha) — más fáciles de escanear y
     tocar que el formato vertical apilado, y caben más a la vista
     sin tanto scroll */
  .sn-cam-card{
    display:flex!important;
    align-items:stretch!important;
    min-height:128px!important;
  }

  .sn-cam-img{
    flex:0 0 128px!important;
    width:128px!important;
    height:auto!important;
  }

  .sn-cam-img::before{
    inset:6px!important;
    border-radius:12px!important;
  }

  .sn-cam-img span{
    top:8px!important;
    left:8px!important;
    padding:4px 10px!important;
    font-size:9px!important;
  }

  .sn-cam-info{
    flex:1!important;
    min-width:0!important;
    padding:14px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  .sn-cam-info h3{
    font-size:15px!important;
    margin-bottom:4px!important;
  }

  .sn-cam-info p{
    font-size:12.5px!important;
    line-height:1.4!important;
    margin-bottom:10px!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }

  .sn-cam-detail{
    width:auto!important;
    align-self:flex-start!important;
    padding:9px 32px 9px 14px!important;
    font-size:12px!important;
  }

  .sn-cam-showcase{
    min-height:auto!important;
    border-radius:28px!important;
  }

  /* Showcase más compacto en móvil */
  .sn-show-main{
    height:240px!important;
    padding:16px!important;
    border-radius:22px 22px 0 0!important;
  }

  .sn-show-frame{
    border-radius:16px!important;
    border-width:1.5px!important;
  }

  .sn-show-main img{
    width:100%!important;
    height:100%!important;
  }

  .sn-show-card{
    padding:20px!important;
    border-radius:0 0 22px 22px!important;
  }

  .sn-show-card h3{
    font-size:22px!important;
  }

  .sn-show-price strong{
    font-size:34px!important;
  }
}

/* ── Touch: sin hover pegajoso + feedback táctil ── */
@media (hover: none) {
  .sn-cam-card:hover{ transform:none; border-color:rgba(0,191,255,.14); box-shadow:0 10px 26px rgba(0,50,80,.07); }
  .sn-cam-card:hover .sn-cam-img img{ transform:none; }
  .sn-cam-card:active{ transform:scale(.98)!important; }
  .sn-cam-detail:hover{ background:#ffffff; color:#00BFFF; border-color:rgba(0,191,255,.35); transform:none; }
  .sn-cam-detail:hover::after{ transform:translateY(-50%) rotate(45deg); }
  .sn-cam-detail:active{ background:#00BFFF!important; color:#ffffff!important; }
  .sn-cam-more-btn:hover{ background:#00BFFF; transform:none; box-shadow:0 14px 35px rgba(0,191,255,.28); }
  .sn-cam-more-btn:active{ transform:scale(.97)!important; }
  .sn-show-btn:hover{ background:#00BFFF; transform:none; box-shadow:0 14px 35px rgba(0,191,255,.28); }
  .sn-show-btn:hover::after{ transform:translateY(-50%) rotate(45deg); }
  .sn-show-btn:active{ transform:scale(.97)!important; }
  .sn-feature-item:hover{ background:rgba(0,191,255,.03); border-color:rgba(0,191,255,.08); transform:none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a686415 */.elementor-widget-container:has\(.cta-cam-wp-alt\),
.elementor-widget-html:has\(.cta-cam-wp-alt\) {
  font-size: 0;
  line-height: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cta-cam-wp-alt,
.cta-cam-wp-alt *,
.cta-cam-wp-alt *::before,
.cta-cam-wp-alt *::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.cta-cam-wp-alt {
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.08) 24%,
      transparent 52%
    ),
    linear-gradient(
      135deg,
      #0b89c8 0%,
      #1ec8ff 52%,
      #0ea5d7 100%
    );
  font-family: 'Inter','Segoe UI',Arial,sans-serif;
  font-size: 16px;
  left: 50%;
  overflow: hidden;
  padding: 80px 30px;
  position: relative;
  transform: translateX(-50%);
  width: 100vw;
}

.cta-cam-wp-alt::before {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.10));
  content: "";
  height: 120px;
  inset: auto 0 0 0;
  pointer-events: none;
  position: absolute;
}

.cta-cam-line {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.35) 10%,
      rgba(255,255,255,.95) 50%,
      rgba(255,255,255,.35) 90%,
      transparent 100%
    );
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,255,255,.45);
  height: 2.5px;
  left: 24px;
  position: absolute;
  transform-origin: center center;
  width: calc(100% - 48px);
  will-change: transform;
}

.cta-cam-line-bottom {
  bottom: 20px;
}

.cta-cam-line-top {
  top: 20px;
}

.lines-visible .cta-cam-line-top {
  animation: lineExpandLoopCam 4.2s cubic-bezier(0.22,0.61,0.36,1) infinite;
}

.lines-visible .cta-cam-line-bottom {
  animation: lineExpandLoopCam 4.2s cubic-bezier(0.22,0.61,0.36,1) .25s infinite;
}

.cta-cam-wrap {
  align-items: center;
  display: grid;
  gap: 55px;
  grid-template-columns: 1.05fr .95fr;
  margin: 0 auto;
  max-width: 1180px;
  opacity: 0;
  position: relative;
  transform: translateX(180px);
  transition:
    opacity 1s ease,
    transform 1.15s cubic-bezier(0.22,0.61,0.36,1);
  will-change: transform, opacity;
  z-index: 2;
}

.cta-cam-wrap.visible {
  opacity: 1;
  transform: translateX(0);
  will-change: auto;
}

.cta-cam-content {
  padding: 10px 0;
}

.cta-cam-overline {
  color: #ffffff !important;
  display: block;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  margin-bottom: 14px;
  text-transform: uppercase !important;
}

.cta-cam-content h2 {
  color: #fff !important;
  font-size: clamp(34px,5vw,52px) !important;
  font-weight: 850 !important;
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin: 0 0 18px;
  max-width: 680px;
}

.cta-cam-content p {
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.8;
  margin: 0 0 30px;
  max-width: 620px;
}

.cta-cam-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
}

.cta-cam-btn {
  align-items: center;
  background: rgba(255,255,255,0.22);
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.10);
  color: #ffffff !important;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 15px !important;
  font-weight: 800 !important;
  gap: 10px;
  justify-content: center;
  padding: 15px 30px;
  text-decoration: none !important;
  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.cta-cam-btn svg {
  transition: transform .35s ease;
}

.cta-cam-btn:hover {
  background: rgba(255,255,255,0.32);
  border-color: #ffffff;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
  transform: translateY(-4px);
}

.cta-cam-btn:hover svg {
  transform: scale(1.1);
}

.cta-cam-buttons {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 12px;
}

.cta-cam-mini {
  border-left: 2px solid rgba(255,255,255,.40);
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  line-height: 1.25;
  max-width: 280px;
  min-width: 230px;
  padding-left: 18px;
}

.cta-cam-mini strong {
  color: #ffffff !important;
  display: block;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  white-space: nowrap;
}

.cta-cam-mini small {
  color: rgba(255,255,255,.85) !important;
  display: block;
  font-size: 13px !important;
  line-height: 1.35;
  white-space: normal;
}

.cta-cam-image {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 360px;
  position: relative;
}

.cta-cam-image::after {
  animation: ctaGlowBaseCam 4.5s ease-in-out infinite;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,45,80,.34) 0%,
      rgba(0,80,120,.22) 34%,
      rgba(255,255,255,.25) 52%,
      transparent 78%
    );
  bottom: -19px;
  content: "";
  filter: blur(12px);
  height: 85px;
  left: 50%;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 390px;
  will-change: transform, opacity;
  z-index: 5;
}

.cta-cam-image img {
  animation: floatCam 4.5s ease-in-out infinite;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 26px;
  box-shadow: 0 24px 45px rgba(0,0,0,.20);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.15));
  height: 250px;
  max-width: 92%;
  object-fit: cover;
  position: relative;
  width: 380px;
  will-change: transform;
  z-index: 3;
}

.cta-cam-rain {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.cam-image-bg {
  animation: morphCamBg 6s ease-in-out infinite;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.10)
    );
  border-radius: 44% 56% 50% 50%;
  box-shadow: inset 0 0 60px rgba(255,255,255,.50);
  height: 330px;
  position: absolute;
  width: 330px;
  will-change: transform;
  z-index: 1;
}

.cam-rain-icon {
  animation:
    lluviaCamTech linear infinite,
    brilloCamIcono 4s ease-in-out infinite;
  color: #ffffff !important;
  font-size: 26px !important;
  opacity: .55;
  position: absolute;
  user-select: none;
  will-change: transform, filter;
}

.cam-rain-icon:nth-child(1)  { animation-delay: -2s; animation-duration: 11s; left: 5%;  }
.cam-rain-icon:nth-child(2)  { animation-delay: -7s; animation-duration: 13s; left: 18%; }
.cam-rain-icon:nth-child(3)  { animation-delay: -4s; animation-duration: 12s; left: 30%; }
.cam-rain-icon:nth-child(4)  { animation-delay: -1s; animation-duration: 10s; left: 45%; }
.cam-rain-icon:nth-child(5)  { animation-delay: -8s; animation-duration: 15s; left: 58%; }
.cam-rain-icon:nth-child(6)  { animation-delay: -3s; animation-duration: 12s; left: 70%; }
.cam-rain-icon:nth-child(7)  { animation-delay: -9s; animation-duration: 14s; left: 82%; }
.cam-rain-icon:nth-child(8)  { animation-delay: -5s; animation-duration: 10s; left: 92%; }
.cam-rain-icon:nth-child(9)  { animation-delay: -6s; animation-duration: 13s; left: 38%; }
.cam-rain-icon:nth-child(10) { animation-delay: -2s; animation-duration: 11s; left: 62%; }

@keyframes brilloCamIcono {
  0%, 100% { filter: drop-shadow(0 0 8px  rgba(255,255,255,.40)); }
  50%       { filter: drop-shadow(0 0 20px rgba(255,255,255,.70)); }
}

@keyframes ctaGlowBaseCam {
  0%, 100% { opacity: .75; transform: translateX(-50%) scale(1);    }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

@keyframes floatCam {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-14px); }
}

@keyframes lineExpandLoopCam {
  0%   { opacity: 0;   transform: scaleX(0); }
  12%  { opacity: .9;                        }
  35%  { opacity: .80; transform: scaleX(1); }
  65%  { opacity: .70; transform: scaleX(1); }
  82%  { opacity: .25;                       }
  100% { opacity: 0;   transform: scaleX(0); }
}

@keyframes lluviaCamTech {
  0%   { opacity: 0;   transform: translateY(-120px) translateX(0)    rotate(0deg);  }
  10%  { opacity: .30;                                                                }
  50%  {               transform: translateY(260px)  translateX(12px)  rotate(8deg); }
  100% { opacity: 0;   transform: translateY(620px)  translateX(-10px) rotate(-6deg);}
}

@keyframes morphCamBg {
  0%, 100% { border-radius: 44% 56% 50% 50%; transform: rotate(0deg);             }
  50%       { border-radius: 55% 45% 42% 58%; transform: rotate(5deg) scale(1.04); }
}

@media (min-width:768px) and (max-width:1100px) {
  .cta-cam-actions {
    align-items: center;
    flex-direction: column;
    gap: 22px;
  }

  .cta-cam-buttons {
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
  }

  .cta-cam-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-left: 0;
  }

  .cta-cam-content p {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
  }

  .cta-cam-image {
    min-height: 300px;
  }

  .cta-cam-image img {
    width: 320px;
    height: 210px;
  }

  .cta-cam-mini {
    align-items: center;
    border-left: none;
    border-top: 2px solid rgba(255,255,255,.35);
    padding-left: 0;
    padding-top: 14px;
    text-align: center;
  }

  .cta-cam-wrap {
    gap: 45px;
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width:900px) {
  .cta-cam-actions {
    gap: 18px;
    justify-content: center;
  }

  .cta-cam-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-cam-mini {
    max-width: 300px;
    min-width: 220px;
    text-align: left;
  }

  .cta-cam-wrap {
    gap: 38px;
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (min-width:901px) and (max-width:1366px) {
  .cta-cam-content {
    padding-left: 10px;
  }

  .cta-cam-image {
    justify-content: flex-end;
  }

  .cta-cam-wrap {
    gap: 40px;
    grid-template-columns: 1fr .92fr;
    max-width: 1240px;
    padding-left: 35px;
    padding-right: 35px;
  }
}

@media (max-width:520px) {
  .cta-cam-actions {
    align-items: center;
    flex-direction: column;
    gap: 18px;
  }

  .cta-cam-btn {
    max-width: 285px;
    width: 100%;
  }

  .cta-cam-buttons {
    align-items: center;
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }

  .cta-cam-content h2 {
    font-size: clamp(31px,9vw,40px) !important;
  }

  .cta-cam-content p {
    font-size: 15px !important;
  }

  .cta-cam-image {
    min-height: 280px;
  }

  .cta-cam-image img {
    width: 100%;
    height: 190px;
  }

  .cta-cam-mini {
    align-items: center;
    border-left: none;
    border-top: 2px solid rgba(255,255,255,.35);
    max-width: 300px;
    min-width: 0;
    padding-left: 0;
    padding-top: 14px;
    text-align: center;
    width: 100%;
  }

  .cta-cam-mini strong {
    white-space: normal;
  }

  .cta-cam-wp-alt {
    padding: 60px 16px;
  }

  .cam-image-bg {
    height: 250px;
    width: 250px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-af32ce6 */.elementor-widget-html:has\(.sn-proceso-compra-camaras\),
.elementor-widget-container:has\(.sn-proceso-compra-camaras\){
  margin:0!important;
  padding:0!important;
  max-width:none!important;
  width:100vw!important;
  margin-left:calc(-50vw + 50%)!important;
  margin-right:calc(-50vw + 50%)!important;
}

.sn-proceso-compra-camaras,
.sn-proceso-compra-camaras *,
.sn-proceso-compra-camaras *::before,
.sn-proceso-compra-camaras *::after{
  box-sizing:border-box!important;
  margin:0;
  padding:0;
}

.sn-proceso-compra-camaras{
  width:100vw!important;
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  overflow:hidden!important;
  padding:60px 30px 90px!important;
  contain:layout paint style!important;
  font-family:'Inter','Segoe UI',Arial,sans-serif!important;
  background:
    radial-gradient(circle at center, rgba(0,191,255,.16) 0%, rgba(0,191,255,.06) 24%, transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0%, transparent 38%),
    linear-gradient(90deg, rgba(0,119,182,.32) 0%, rgba(0,191,255,.18) 14%, #f3fcff 32%, #ffffff 50%, #f3fcff 68%, rgba(0,191,255,.18) 86%, rgba(0,153,204,.32) 100%)!important;
  background-size:100% 100%!important;
}

/* ========== LÍNEAS DECORATIVAS ========== */
.proceso-border-line{
  position:absolute!important;
  left:0!important;
  width:100%!important;
  height:70px!important;
  z-index:1!important;
  pointer-events:none!important;
  fill:none!important;
  opacity:0!important;
}

.proceso-border-line path{
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.proceso-border-top{ top:12px!important; }
.proceso-border-bottom{ bottom:18px!important; }

.proceso-border-line .linea-base{
  stroke:#00BFFF!important;
  stroke-width:6!important;
  filter:drop-shadow(0 0 4px rgba(22,143,199,.14));
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  opacity:.92!important;
  --desde:1400;
}

.proceso-border-bottom .linea-base{
  --desde:-1400;
}

/* Optimización: un solo drop-shadow en vez de dos, con blur más chico
   — esta capa se repinta en cada frame mientras la luz corre, así que
   cada filtro extra cuesta directamente en fluidez */
.proceso-border-line .linea-luz{
  stroke:rgba(255,255,255,.92)!important;
  stroke-width:4!important;
  filter:drop-shadow(0 0 8px rgba(0,191,255,.35));
  stroke-dasharray:75 1325;
  stroke-dashoffset:1400;
  opacity:0;
  --luz-desde:1400;
  --luz-hasta:0;
}

.proceso-border-bottom .linea-luz{
  --luz-desde:0;
  --luz-hasta:1400;
}

.sn-proceso-compra-camaras.lineas-activas .proceso-border-line{ opacity:1!important; }
.sn-proceso-compra-camaras.lineas-activas .proceso-border-top .linea-base{ animation:dibujarLineaProceso 1.25s ease forwards; }
.sn-proceso-compra-camaras.lineas-activas .proceso-border-bottom .linea-base{ animation:dibujarLineaProceso 1.25s ease .18s forwards; }
.sn-proceso-compra-camaras.lineas-activas .proceso-border-line .linea-luz{ animation:luzRecorreProceso 4s linear 1.55s infinite; opacity:1; will-change:stroke-dashoffset!important; }

.sn-proceso-compra-camaras.proceso-offscreen .proceso-border-line .linea-luz,
.sn-proceso-compra-camaras.proceso-offscreen .sn-proceso-glow{
  animation-play-state:paused!important;
}

@keyframes dibujarLineaProceso{
  from{ stroke-dashoffset:var(--desde); }
  to{ stroke-dashoffset:0; }
}

@keyframes luzRecorreProceso{
  from{ stroke-dashoffset:var(--luz-desde); }
  to{ stroke-dashoffset:var(--luz-hasta); }
}

/* Línea decorativa sutil superior */
.sn-proceso-compra-camaras::before{
  content:''!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  height:1px!important;
  background:linear-gradient(90deg, transparent, #00BFFF, transparent)!important;
  opacity:.3!important;
  z-index:1!important;
}

.sn-proceso-wrap{
  max-width:1180px!important;
  margin:0 auto!important;
  position:relative!important;
  z-index:2!important;
}

.sn-proceso-head{
  text-align:center!important;
  max-width:790px!important;
  margin:0 auto 54px!important;
  opacity:0!important;
  transform:translateY(24px)!important;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1)!important;
  will-change:opacity, transform!important;
}

.sn-proceso-compra-camaras.visible .sn-proceso-head{ opacity:1!important; transform:translateY(0)!important; }

.sn-proceso-head span{
  display:block!important;
  color:#00BFFF!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:3px!important;
  text-transform:uppercase!important;
  margin-bottom:14px!important;
}

.sn-proceso-head h2{
  color:#0b1e33!important;
  font-size:clamp(28px,4vw,46px)!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:-.5px!important;
  margin-bottom:20px!important;
}

.sn-proceso-head p{
  color:#475569!important;
  font-size:16px!important;
  line-height:1.75!important;
}

.sn-proceso-content{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:55px!important;
  align-items:center!important;
}

.sn-proceso-steps{
  display:grid!important;
  gap:18px!important;
  opacity:0!important;
  transform:translateX(-70px)!important;
  transition:opacity 1s ease .1s, transform 1.15s cubic-bezier(.16,1,.3,1) .1s!important;
  will-change:opacity, transform!important;
}

.sn-proceso-compra-camaras.visible .sn-proceso-steps{ opacity:1!important; transform:translateX(0)!important; }

.sn-step-card{
  display:grid!important;
  grid-template-columns:58px 1fr!important;
  gap:16px!important;
  align-items:flex-start!important;
  background:#ffffff!important;
  border:1px solid rgba(0,191,255,.12)!important;
  border-radius:20px!important;
  padding:20px!important;
  box-shadow:0 4px 15px rgba(0,0,0,.02)!important;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease!important;
  position:relative!important;
  overflow:hidden!important;
  contain:layout paint style!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

.sn-step-card::before{
  content:''!important;
  position:absolute!important;
  bottom:0!important;
  left:0!important;
  width:0%!important;
  height:3px!important;
  background:linear-gradient(90deg, #00BFFF, #0099CC)!important;
  transition:width .4s ease!important;
}

.sn-step-card:hover::before{ width:100%!important; }

.sn-step-card:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(0,191,255,.25)!important;
  box-shadow:0 14px 28px rgba(0,191,255,.08)!important;
}

.sn-step-number{
  width:46px!important;
  height:46px!important;
  border-radius:15px!important;
  background:linear-gradient(135deg, #00BFFF, #0099CC)!important;
  color:#ffffff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:16px!important;
  font-weight:950!important;
  box-shadow:0 8px 20px rgba(0,191,255,.25)!important;
  transition:transform .3s ease, box-shadow .3s ease!important;
}

.sn-step-card:hover .sn-step-number{
  transform:scale(1.05)!important;
  box-shadow:0 12px 28px rgba(0,191,255,.35)!important;
}

.sn-step-card h3{
  color:#0b1e33!important;
  font-size:18px!important;
  font-weight:800!important;
  line-height:1.25!important;
  margin-bottom:6px!important;
}

.sn-step-card p{
  color:#475569!important;
  font-size:14px!important;
  line-height:1.6!important;
}

/* Lado derecho - Visual */
.sn-proceso-visual{
  position:relative!important;
  min-height:520px!important;
  opacity:0!important;
  transform:translateX(70px)!important;
  transition:opacity 1s ease .18s, transform 1.15s cubic-bezier(.16,1,.3,1) .18s!important;
  will-change:opacity, transform!important;
}

.sn-proceso-compra-camaras.visible .sn-proceso-visual{ opacity:1!important; transform:translateX(0)!important; }

/* Optimización: blur reducido — sigue el mismo efecto visual pero
   más barato de recalcular en cada frame del pulso (scale + opacity) */
.sn-proceso-glow{
  position:absolute!important;
  inset:60px 20px!important;
  background:radial-gradient(circle, rgba(0,191,255,.12), transparent 70%)!important;
  filter:blur(14px)!important;
  animation:snProcesoGlow 4s ease-in-out infinite!important;
  border-radius:40px!important;
  pointer-events:none!important;
  will-change:transform, opacity!important;
}

@keyframes snProcesoGlow{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.02); }
}

.sn-camera-shop-card{
  position:absolute!important;
  inset:20px 10px!important;
  overflow:hidden!important;
  border-radius:34px!important;
  background:#061826!important;
  box-shadow:0 30px 50px rgba(0,0,0,.12)!important;
  transition:transform .3s ease, box-shadow .3s ease!important;
  contain:layout paint style!important;
}

/* Barrido de luz ligero al hacer hover */
.sn-camera-shop-card::after{
  content:''!important;
  position:absolute!important;
  top:0!important;
  left:-120%!important;
  width:50%!important;
  height:100%!important;
  background:linear-gradient(105deg, transparent 25%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.08) 52%, transparent 75%)!important;
  transform:skewX(-18deg)!important;
  pointer-events:none!important;
  z-index:4!important;
  transition:left .55s ease!important;
}

.sn-camera-shop-card:hover::after{ left:160%!important; }

.sn-camera-shop-card:hover{
  transform:scale(1.01)!important;
  box-shadow:0 35px 60px rgba(0,191,255,.18), 0 0 24px rgba(0,191,255,.22)!important;
}

.sn-camera-shop-card img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  padding:26px!important;
  display:block!important;
  transition:transform 1.2s ease!important;
}

.sn-camera-shop-card:hover img{ transform:scale(1.04)!important; }

/* Responsive */
@media(max-width:950px){
  .sn-proceso-content{ grid-template-columns:1fr!important; gap:45px!important; }

  .sn-proceso-steps{
    max-width:680px!important;
    margin:0 auto!important;
    width:100%!important;
    transform:translateY(45px)!important;
  }
  .sn-proceso-compra-camaras.visible .sn-proceso-steps{ transform:translateY(0)!important; }

  .sn-proceso-visual{
    max-width:550px!important;
    width:100%!important;
    margin:0 auto!important;
    min-height:480px!important;
    transform:translateY(45px)!important;
  }
  .sn-proceso-compra-camaras.visible .sn-proceso-visual{ transform:translateY(0)!important; }
}

@media(max-width:768px){
  /* Optimización mobile: se desactivan las animaciones infinitas
     (luz recorriendo la línea + glow pulsante). Son decorativas,
     apenas se notan en pantallas chicas, y su costo continuo de
     repintado/filtro pesa más en celulares de gama media/baja.
     El dibujo inicial de las líneas (una sola vez, forwards) se
     mantiene intacto. */
  .proceso-border-line .linea-luz{
    animation:none!important;
    opacity:0!important;
  }

  .sn-proceso-glow{
    animation:none!important;
    opacity:.5!important;
  }
}

@media(max-width:560px){
  .sn-proceso-compra-camaras{ padding:78px 15px!important; }

  .proceso-border-line{ height:50px!important; }
  .proceso-border-line path{ stroke-width:5!important; }
  .proceso-border-top{ top:10px!important; }
  .proceso-border-bottom{ bottom:18px!important; }

  .sn-proceso-head h2{ font-size:31px!important; }
  .sn-proceso-head p{ font-size:15px!important; }

  .sn-step-card{ grid-template-columns:46px 1fr!important; padding:16px!important; }
  .sn-step-number{ width:38px!important; height:38px!important; border-radius:13px!important; font-size:14px!important; }
  .sn-step-card h3{ font-size:16px!important; }
  .sn-step-card p{ font-size:13.5px!important; }

  .sn-proceso-visual{ min-height:420px!important; }
  .sn-camera-shop-card{ inset:20px 0!important; border-radius:25px!important; }
  .sn-camera-shop-card img{ padding:18px!important; }
}

/* ── Touch: sin hover pegajoso ── */
@media (hover: none) {
  .sn-step-card:hover{ transform:none; border-color:rgba(0,191,255,.12); box-shadow:0 4px 15px rgba(0,0,0,.02); }
  .sn-step-card:hover::before{ width:0%; }
  .sn-step-card:hover .sn-step-number{ transform:none; box-shadow:0 8px 20px rgba(0,191,255,.25); }
  .sn-camera-shop-card:hover{ transform:none; box-shadow:0 30px 50px rgba(0,0,0,.12); }
  .sn-camera-shop-card:hover::after{ left:-120%; }
  .sn-camera-shop-card:hover img{ transform:none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8f7cf0b */.elementor-widget-html:has\(.beneficios-camaras-pro-wp\),
.elementor-widget-container:has\(.beneficios-camaras-pro-wp\) {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

.beneficios-camaras-pro-wp,
.beneficios-camaras-pro-wp *,
.beneficios-camaras-pro-wp *::before,
.beneficios-camaras-pro-wp *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

.beneficios-camaras-pro-wp {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at center, rgba(0,191,255,.16) 0%, rgba(0,191,255,.06) 24%, transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0%, transparent 38%),
    linear-gradient(90deg,
      rgba(0,119,182,.32) 0%, rgba(0,191,255,.18) 14%,
      #f3fcff 32%, #ffffff 50%, #f3fcff 68%,
      rgba(0,191,255,.18) 86%, rgba(0,153,204,.32) 100%) !important;
  background-size: 100% 100% !important;
  padding: 75px 30px 95px !important;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
}

/* Líneas decorativas */
.beneficios-border-line {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 70px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  fill: none !important;
  opacity: 0 !important;
}

.beneficios-border-top    { top: 12px !important; --desde: 1400; --luz-desde: 1400; --luz-hasta: 0; }
.beneficios-border-bottom { bottom: 18px !important; --desde: -1400; --luz-desde: 0; --luz-hasta: 1400; }

.beneficios-border-line .linea-base {
  stroke: #00BFFF !important;
  stroke-width: 6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 4px rgba(22, 143, 199, .14));
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  opacity: .92 !important;
}

.beneficios-border-line .linea-luz {
  stroke: rgba(255, 255, 255, .92) !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)) drop-shadow(0 0 12px rgba(0, 191, 255, .25));
  stroke-dasharray: 75 1325;
  stroke-dashoffset: 1400;
  opacity: 0;
}

.beneficios-camaras-pro-wp.lineas-activas .beneficios-border-line {
  opacity: 1 !important;
}

.beneficios-camaras-pro-wp.lineas-activas .beneficios-border-top .linea-base {
  animation: dibujarLinea 1.25s ease forwards;
}

.beneficios-camaras-pro-wp.lineas-activas .beneficios-border-bottom .linea-base {
  animation: dibujarLinea 1.25s ease .18s forwards;
}

.beneficios-camaras-pro-wp.lineas-activas .beneficios-border-top .linea-luz {
  animation: luzRecorre 4s linear 1.55s infinite;
  opacity: 1;
  will-change: stroke-dashoffset !important;
}

.beneficios-camaras-pro-wp.lineas-activas .beneficios-border-bottom .linea-luz {
  animation: luzRecorre 4s linear 1.55s infinite;
  opacity: 1;
  will-change: stroke-dashoffset !important;
}

@keyframes dibujarLinea {
  from { stroke-dashoffset: var(--desde); }
  to   { stroke-dashoffset: 0; }
}

@keyframes luzRecorre {
  from { stroke-dashoffset: var(--luz-desde); }
  to   { stroke-dashoffset: var(--luz-hasta); }
}

/* Fondo y contenedor principal */
.beneficios-camaras-bg {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(0, 191, 255, .12), transparent 28%),
    radial-gradient(circle at 90% 80%, rgba(0, 191, 255, .09), transparent 32%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.beneficios-camaras-wrap {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 0 !important;
  transform: translateX(-110px) !important;
  transition: opacity 1s ease, transform 1.15s cubic-bezier(.22, .61, .36, 1) !important;
  will-change: opacity, transform !important;
}

.beneficios-camaras-wrap.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.beneficios-camaras-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 55px !important;
  min-height: 480px !important;
}

/* Lado izquierdo */
.beneficios-camaras-left {
  width: 100% !important;
  max-width: 500px !important;
  justify-self: center !important;
}

.beneficios-camaras-linea {
  width: 72px !important;
  height: 6px !important;
  background: #00BFFF !important;
  border-radius: 20px !important;
  margin-bottom: 22px !important;
}

.beneficios-camaras-subtitulo {
  color: #00BFFF !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  display: block !important;
}

.beneficios-camaras-left h2 {
  margin: 12px 0 32px !important;
  color: #061826 !important;
  font-size: clamp(33px, 4vw, 48px) !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -0.6px !important;
}

/* Accordion */
.beneficios-camaras-accordion {
  position: relative !important;
  height: 330px !important;
  width: 100% !important;
  --pos2: 82px;
  --pos3: 164px;
}

.beneficios-camaras-accordion[data-activo="0"] { --pos2: 205px; --pos3: 287px; }
.beneficios-camaras-accordion[data-activo="1"] { --pos3: 287px; }

.beneficio-camara-item {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 35px rgba(0, 50, 80, .08) !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 191, 255, .12) !important;
  height: 67px !important;
  transition: top .42s ease, height .42s ease, box-shadow .35s ease, transform .35s ease, border-color .35s ease !important;
}

.beneficio-camara-item:nth-child(1) { top: 0 !important; }
.beneficio-camara-item:nth-child(2) { top: var(--pos2) !important; }
.beneficio-camara-item:nth-child(3) { top: var(--pos3) !important; }

.beneficio-camara-item.activo {
  height: 190px !important;
  box-shadow: 0 18px 45px rgba(0, 191, 255, .14) !important;
  border-color: rgba(0, 191, 255, .28) !important;
}

.beneficio-camara-item:hover {
  transform: translateY(-3px) !important;
}

.beneficio-camara-pregunta {
  width: 100% !important;
  height: 67px !important;
  border: none !important;
  background: #ffffff !important;
  padding: 0 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  color: #061826 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-align: left !important;
  font-family: inherit !important;
}

.beneficio-camara-pregunta span {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.beneficio-camara-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 13px !important;
  background: rgba(0,191,255,.10) !important;
  color: #00BFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  box-shadow: inset 0 0 0 1px rgba(0,191,255,.18) !important;
}

.beneficio-camara-pregunta b {
  color: #00BFFF !important;
  font-size: 24px !important;
  line-height: 1 !important;
  transition: transform .3s ease !important;
}

.beneficio-camara-item.activo .beneficio-camara-pregunta span {
  color: #00BFFF !important;
}

.beneficio-camara-item.activo .beneficio-camara-pregunta b {
  transform: rotate(45deg) !important;
}

.beneficio-camara-respuesta {
  height: 123px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition: opacity .28s ease, transform .28s ease !important;
}

.beneficio-camara-item.activo .beneficio-camara-respuesta {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.beneficio-camara-respuesta p {
  padding: 0 24px 22px 70px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

/* Lado derecho */
.beneficios-camaras-right {
  position: relative !important;
  min-height: 430px !important;
  width: 100% !important;
  max-width: 540px !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.beneficios-camaras-shape {
  position: absolute !important;
  width: 390px !important;
  height: 270px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, rgba(0, 191, 255, .15), rgba(0, 191, 255, .04)) !important;
  border: 2px solid rgba(0, 191, 255, .16) !important;
  transform: rotate(-10deg) !important;
  box-shadow: 0 25px 70px rgba(0, 191, 255, .10) !important;
  z-index: 1 !important;
}

.beneficios-camaras-tilt {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  will-change: transform !important;
  transition: transform .35s ease !important;
  transform-style: preserve-3d !important;
}

.beneficios-camaras-img {
  position: relative !important;
  z-index: 3 !important;
  width: 410px !important;
  max-width: 92% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 24px 38px rgba(0, 80, 120, .16)) !important;
  animation: beneficiosCamFloatImg 4.4s ease-in-out infinite !important;
}

@keyframes beneficiosCamFloatImg {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Tarjetas flotantes */
.beneficios-camaras-float {
  position: absolute !important;
  z-index: 4 !important;
  background: rgba(255, 255, 255, .95) !important;
  border: 1px solid rgba(0, 191, 255, .15) !important;
  border-radius: 16px !important;
  padding: 13px 17px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .10) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  animation: beneficiosCamFloatCard 4s ease-in-out infinite !important;
}

.beneficios-camaras-float strong { color: #00BFFF !important; font-size: 17px !important; font-weight: 950 !important; white-space: nowrap !important; }
.beneficios-camaras-float span   { color: #64748b !important; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; }

.card-uno { left: 18px !important; top: 135px !important; }
.card-dos { right: 14px !important; bottom: 112px !important; animation-delay: .8s !important; }

@keyframes beneficiosCamFloatCard {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Responsive */
@media (max-width: 950px) {
  .beneficios-camaras-pro-wp { padding: 82px 20px !important; }
  .beneficios-camaras-content { grid-template-columns: 1fr !important; gap: 35px !important; min-height: auto !important; }
  .beneficios-camaras-left { max-width: 620px !important; }
  .beneficios-camaras-right { min-height: 390px !important; }
}

@media (max-width: 560px) {
  .beneficios-camaras-pro-wp { padding: 75px 16px 82px !important; }
  .beneficios-camaras-left { text-align: center !important; }
  .beneficios-camaras-linea { margin-left: auto !important; margin-right: auto !important; }
  .beneficios-camaras-left h2 { font-size: 31px !important; margin-bottom: 26px !important; }
  .beneficios-camaras-accordion { height: 330px !important; text-align: left !important; }
  .beneficio-camara-pregunta { font-size: 13px !important; padding: 0 15px !important; }
  .beneficio-camara-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; }
  .beneficio-camara-respuesta p { font-size: 14px !important; padding: 0 18px 20px 62px !important; }
  .beneficios-camaras-right { min-height: 330px !important; }
  .beneficios-camaras-shape { width: 290px !important; height: 210px !important; border-radius: 38px !important; }
  .beneficios-camaras-img { width: 315px !important; }
  .beneficios-camaras-float { padding: 10px 13px !important; }
  .beneficios-camaras-float strong { font-size: 15px !important; }
  .beneficios-camaras-float span { font-size: 11px !important; }
  .card-uno { left: 0 !important; top: 105px !important; }
  .card-dos { right: 0 !important; bottom: 88px !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d266060 */.elementor-widget-html:has\(.sn-tipos-camaras-v2\),
.elementor-widget-container:has\(.sn-tipos-camaras-v2\){
  margin:0!important;
  padding:0!important;
  max-width:none!important;
  width:100vw!important;
  margin-left:calc(-50vw + 50%)!important;
  margin-right:calc(-50vw + 50%)!important;
}

.sn-tipos-camaras-v2,
.sn-tipos-camaras-v2 *,
.sn-tipos-camaras-v2 *::before,
.sn-tipos-camaras-v2 *::after{
  box-sizing:border-box!important;
  margin:0;
  padding:0;
}

.sn-tipos-camaras-v2{
  width:100vw!important;
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  overflow:hidden!important;
  padding:75px 30px 95px!important;
  font-family:'Inter','Segoe UI',Arial,sans-serif!important;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 24%, transparent 52%),
    linear-gradient(135deg, #0b89c8 0%, #1ec8ff 52%, #0ea5d7 100%)!important;
}

.sn-tipos-camaras-v2::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.10))!important;
  pointer-events:none!important;
  z-index:1!important;
}

/* Líneas animadas (estilo separadores) */
.sn-tipos-line{
  position:absolute!important;
  left:34px!important;
  width:calc(100% - 68px)!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 14%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.22) 86%, transparent 100%)!important;
  box-shadow:0 0 5px rgba(255,255,255,.25)!important;
  animation:snTiposLineExpand 5s cubic-bezier(0.22,0.61,0.36,1) infinite!important;
  transform-origin:center center!important;
  will-change:transform!important;
  z-index:2!important;
}

.sn-tipos-line-top    { top:20px!important; }
.sn-tipos-line-bottom { bottom:20px!important; }

@keyframes snTiposLineExpand {
  0%   { transform:scaleX(0); opacity:0; }
  15%  { opacity:.7; }
  38%  { transform:scaleX(1); opacity:.6; }
  68%  { transform:scaleX(1); opacity:.5; }
  100% { transform:scaleX(0); opacity:0; }
}

.sn-tipos-wrap{
  max-width:1180px!important;
  margin:0 auto!important;
  position:relative!important;
  z-index:3!important;
}

/* Header */
.sn-tipos-head{
  text-align:center!important;
  max-width:780px!important;
  margin:0 auto 55px!important;
  opacity:0!important;
  transform:translateY(45px)!important;
  transition:opacity 1s ease, transform 1.1s cubic-bezier(.16,1,.3,1)!important;
}

.sn-tipos-camaras-v2.visible .sn-tipos-head{
  opacity:1!important;
  transform:translateY(0)!important;
}

.sn-tipos-head span{
  display:block!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:4px!important;
  text-transform:uppercase!important;
  margin-bottom:12px!important;
  text-shadow:0 2px 12px rgba(0,60,110,.25)!important;
}

.sn-tipos-head h2{
  color:#fff!important;
  font-size:clamp(34px,4vw,52px)!important;
  line-height:1.1!important;
  font-weight:950!important;
  letter-spacing:-.8px!important;
  margin-bottom:14px!important;
  text-shadow:0 4px 22px rgba(0,60,110,.28)!important;
}

.sn-tipos-head p{
  color:rgba(255,255,255,.9)!important;
  font-size:16px!important;
  line-height:1.75!important;
}

/* Grid y tarjetas */
.sn-tipos-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:24px!important;
}

.sn-tipo-card{
  position:relative!important;
  background:#fff!important;
  border-radius:26px!important;
  padding:34px 28px!important;
  box-shadow:0 22px 55px rgba(0,60,110,.22)!important;
  overflow:hidden!important;
  opacity:0!important;
  transform:translateY(45px)!important;
  transition:opacity 1s ease, transform 1.1s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease!important;
}

.sn-tipos-camaras-v2.visible .sn-tipo-card{
  opacity:1!important;
  transform:translateY(0)!important;
}

.sn-tipos-camaras-v2.visible .sn-tipo-card:nth-child(2){ transition-delay:.12s!important; }
.sn-tipos-camaras-v2.visible .sn-tipo-card:nth-child(3){ transition-delay:.24s!important; }

.sn-tipo-card.destacado{
  background:linear-gradient(180deg,#f4fbff,#fff)!important;
  box-shadow:0 30px 80px rgba(0,40,80,.28)!important;
}

.sn-tipo-card:hover{
  transform:translateY(-10px)!important;
  border-color:#00BFFF!important;
  box-shadow:0 30px 80px rgba(0,40,80,.30)!important;
}

.sn-tipo-card::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  height:4px!important;
  background:rgba(0,191,255,.2)!important;
}

.sn-card-line{
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  height:4px!important;
  background:linear-gradient(90deg, transparent, #00BFFF, #00BFFF, #00BFFF, transparent)!important;
  transform:translateX(-100%)!important;
  transition:transform .6s cubic-bezier(.4,0,.2,1)!important;
}

.sn-tipo-card:hover .sn-card-line{
  transform:translateX(100%)!important;
}

/* Iconos */
.sn-tipo-icon{
  width:58px!important;
  height:58px!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg, #00BFFF, #0099CC)!important;
  color:#fff!important;
  margin-bottom:22px!important;
  box-shadow:0 8px 20px rgba(0,191,255,.35)!important;
  transition:transform .3s ease, box-shadow .3s ease!important;
}

.sn-tipo-card:hover .sn-tipo-icon{
  transform:scale(1.05)!important;
  box-shadow:0 12px 28px rgba(0,191,255,.45)!important;
}

.sn-tipo-icon svg{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))!important;
}

/* Contenido de tarjetas */
.sn-tipo-card h3{
  color:#061826!important;
  font-size:24px!important;
  line-height:1.15!important;
  font-weight:950!important;
  margin-bottom:12px!important;
}

.sn-tipo-card p{
  color:#5c6f7d!important;
  font-size:15px!important;
  line-height:1.65!important;
  margin-bottom:22px!important;
}

.sn-tipo-card ul{
  list-style:none!important;
  display:grid!important;
  gap:12px!important;
}

.sn-tipo-card li{
  position:relative!important;
  color:#3d5162!important;
  font-size:14px!important;
  line-height:1.4!important;
  padding-left:26px!important;
  transition:transform .2s ease, color .2s ease!important;
}

.sn-tipo-card li:hover{
  transform:translateX(4px)!important;
  color:#00BFFF!important;
}

.sn-tipo-card li::before{
  content:"✓"!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  color:#00BFFF!important;
  font-weight:950!important;
  transition:transform .2s ease!important;
}

.sn-tipo-card li:hover::before{
  transform:scale(1.2)!important;
}

.sn-tipos-rain-canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:2!important;
  pointer-events:none!important;
}

@media(max-width:900px){
  .sn-tipos-grid{
    grid-template-columns:1fr!important;
    max-width:560px!important;
    margin:0 auto!important;
  }

  .sn-tipos-line{
    left:22px!important;
    width:calc(100% - 44px)!important;
  }
}

@media(max-width:560px){
  .sn-tipos-camaras-v2{
    padding:70px 15px 80px!important;
  }

  .sn-tipos-head h2{ font-size:31px!important; }
  .sn-tipos-head p{ font-size:15px!important; }

  .sn-tipo-card{
    padding:28px 22px!important;
    border-radius:22px!important;
  }

  .sn-tipo-card h3{ font-size:21px!important; }
  .sn-tipo-card p{ font-size:14.5px!important; }

  .sn-tipo-icon{
    width:50px!important;
    height:50px!important;
  }

  .sn-tipo-icon svg{
    width:28px!important;
    height:28px!important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-767fbff *//* ═══════════════ WHATSAPP FLOAT ═══════════════ */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:94px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  box-shadow:0 6px 24px rgba(37,211,102,.35);
  transition:opacity .35s cubic-bezier(.22,.61,.36,1),
             transform .35s cubic-bezier(.22,.61,.36,1),
             visibility .35s,
             bottom .5s cubic-bezier(.22,.61,.36,1),
             box-shadow .2s;
  animation:pulseFab 1.2s ease-in-out infinite;
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  transform:scale(0.7) translateY(10px);
  pointer-events:none;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

.whatsapp-float.fab-open{
  opacity:1;
  visibility:visible;
  transform:scale(1) translateY(0);
  pointer-events:auto;
}

.whatsapp-icon-white{
  width:30px;
  height:30px;
  display:block;
  filter:brightness(0) invert(1);
}

.whatsapp-tooltip{
  position:absolute;
  right:68px;
  background:#fff;
  color:#0b1e33;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  padding:10px 18px;
  border-radius:8px;
  box-shadow:0 8px 25px rgba(0,0,0,.12);
  opacity:0;
  visibility:hidden;
  transform:translateX(10px);
  transition:all .3s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
}

.whatsapp-tooltip::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:#fff;
  border-right-width:0;
}

.whatsapp-float:hover .whatsapp-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 16px 40px rgba(37,211,102,.5);
}

.whatsapp-float:active{transform:scale(0.95);}

.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.3);
  animation:btnPulseGreen 2s ease-out infinite;
  will-change:transform,opacity;
}

@keyframes btnPulseGreen{
  0%{transform:scale(1);opacity:1;}
  100%{transform:scale(1.8);opacity:0;}
}

/* ═══════════════ PORTAL CLIENTE ═══════════════ */
.portal-float{
  position:fixed;
  right:24px;
  bottom:164px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#00BFFF,#0099cc);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9998;
  box-shadow:0 6px 24px rgba(0,191,255,.35);
  transition:opacity .35s cubic-bezier(.22,.61,.36,1) .05s,
             transform .35s cubic-bezier(.22,.61,.36,1) .05s,
             visibility .35s,
             bottom .5s cubic-bezier(.22,.61,.36,1),
             box-shadow .2s;
  animation:pulseFab 1.2s ease-in-out .3s infinite;
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  transform:scale(0.7) translateY(10px);
  pointer-events:none;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

.portal-float.fab-open{
  opacity:1;
  visibility:visible;
  transform:scale(1) translateY(0);
  pointer-events:auto;
}

.portal-float svg{
  width:28px;
  height:28px;
  display:block;
}

.portal-tooltip{
  position:absolute;
  right:68px;
  background:#fff;
  color:#0b1e33;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  padding:10px 18px;
  border-radius:8px;
  box-shadow:0 8px 25px rgba(0,0,0,.12);
  opacity:0;
  visibility:hidden;
  transform:translateX(10px);
  transition:all .3s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
}

.portal-tooltip::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:#fff;
  border-right-width:0;
}

.portal-float:hover .portal-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

.portal-float:hover{
  transform:scale(1.1);
  box-shadow:0 16px 40px rgba(0,191,255,.5);
}

.portal-float:active{transform:scale(0.95);}

.portal-float::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(0,191,255,.3);
  animation:btnPulseBlue 2s ease-out infinite;
  will-change:transform,opacity;
}

@keyframes btnPulseBlue{
  0%{transform:scale(1);opacity:1;}
  100%{transform:scale(1.8);opacity:0;}
}

/* ═══════════════ LLUVIA TOGGLE ═══════════════ */
.lluvia-float {
  position: fixed;
  right: 24px;
  bottom: 234px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00BFFF, #0099cc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  box-shadow: 0 6px 24px rgba(0,191,255,.35);
  transition: opacity .35s cubic-bezier(.22,.61,.36,1) .10s,
              transform .35s cubic-bezier(.22,.61,.36,1) .10s,
              visibility .35s,
              bottom .5s cubic-bezier(.22,.61,.36,1),
              box-shadow .2s,
              background .3s ease;
  animation: pulseFab 1.2s ease-in-out .6s infinite;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7) translateY(10px);
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  border: none;
  cursor: pointer;
  overflow: visible;
}

.lluvia-float.fab-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.lluvia-float::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(0,191,255,.35);
  animation: btnPulseBlue 2s ease-out infinite;
  will-change: transform, opacity;
}

.lluvia-float:hover {
  transform: scale(1.1);
  box-shadow:
    0 16px 40px rgba(0,191,255,.55),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.lluvia-float:active { transform: scale(0.95); }

/* ── íconos ON / OFF ── */
.lluvia-icon-on,
.lluvia-icon-off {
  position: absolute;
  transition: opacity .25s ease, transform .25s ease;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.18));
}

/* estado ON — muestra gota, oculta tachada */
.lluvia-icon-on  { opacity: 1; transform: scale(1);   }
.lluvia-icon-off { opacity: 0; transform: scale(0.7); }

/* ── Estado desactivado ── */
.lluvia-float.lluvia-off {
  background: linear-gradient(135deg,#00BFFF,#0099cc);
  box-shadow:
    0 6px 24px rgba(3,105,161,.35),
    inset 0 1px 0 rgba(255,255,255,.15);
  animation: none;
}

.lluvia-float.lluvia-off::before {
  border-color: rgba(56,189,248,.3);
  animation: btnPulseOff 2s ease-out infinite;
}

.lluvia-float.lluvia-off:hover {
  box-shadow:
    0 16px 40px rgba(3,105,161,.45),
    inset 0 1px 0 rgba(255,255,255,.15);
}

/* estado OFF — oculta gota, muestra tachada */
.lluvia-float.lluvia-off .lluvia-icon-on  { opacity: 0; transform: scale(0.7); }
.lluvia-float.lluvia-off .lluvia-icon-off { opacity: 1; transform: scale(1);   }

/* tooltip */
.lluvia-tooltip {
  position: absolute;
  right: 68px;
  background: #fff;
  color: #0b1e33;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all .3s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  font-family: 'Inter','Segoe UI',Arial,sans-serif;
}

.lluvia-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #fff;
  border-right-width: 0;
}

.lluvia-float:hover .lluvia-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@keyframes btnPulseOff {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.8); opacity: 0;  }
}

@media (max-width: 768px) {
  .lluvia-float {
    width: 50px;
    height: 50px;
    right: 16px;
  }

  .lluvia-tooltip {
    display: none;
  }
}

/* ═══════════════ BOTÓN +/− MEJORADO ═══════════════ */
.fab-toggle-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#00BFFF,#0099cc);
  color:#fff;
  border:none;
  cursor:pointer;
  z-index:9997;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  font-weight:400;
  line-height:56px;
  padding:0;
  font-family:Arial,sans-serif;
  box-shadow:0 6px 24px rgba(0,191,255,.35);
  transition:bottom .45s cubic-bezier(.22,.61,.36,1),
             transform .25s ease,
             box-shadow .25s ease,
             background .25s ease;
  animation:pulseFab 1.2s ease-in-out .3s infinite;
  will-change:transform;
  backface-visibility:hidden;
}

.fab-toggle-float::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(0,191,255,.3);
  animation:btnPulseBlue 2s ease-out infinite;
  will-change:transform,opacity;
}

.fab-toggle-float:hover{
  transform:scale(1.08);
  box-shadow:0 14px 36px rgba(0,191,255,.48);
}

.fab-toggle-float:active{transform:scale(.94);}

/* ═══════════════ SCROLL TOP ═══════════════ */
.scroll-top-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#00BFFF,#0099cc);
  border:none;
  cursor:pointer;
  z-index:9997;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 24px rgba(0,191,255,.35);
  opacity:0;
  visibility:hidden;
  transform:scale(0.8);
  transition:all .5s cubic-bezier(.22,.61,.36,1);
  overflow:visible !important;
  animation:none !important;
  will-change:transform,opacity;
}

.scroll-top-float.visible{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

.scroll-top-float::after{
  content:"";
  width:16px;
  height:16px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-20%) rotate(45deg);
  border-top:3px solid #fff;
  border-left:3px solid #fff;
  border-radius:2px;
  z-index:3;
}

.scroll-top-float:hover{
  transform:scale(1.1);
  box-shadow:0 16px 40px rgba(0,191,255,.5);
}

.scroll-top-float:active{transform:scale(0.95);}

/* ═══════════════ SHARED PULSE ═══════════════ */
@keyframes pulseFab{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.06);}
}

@media(max-width:768px){
  .whatsapp-float,
  .portal-float{
    width:50px;
    height:50px;
    right:16px;
  }

  .whatsapp-float svg,
  .portal-float svg{
    width:24px;
    height:24px;
  }

  .whatsapp-tooltip,
  .portal-tooltip{
    display:none;
  }

  .fab-toggle-float{
    width:50px;
    height:50px;
    right:16px;
    font-size:28px;
  }

  .scroll-top-float{
    display:none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e417fbc */.lluvia-padre-global {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 9998;
}

.lluvia-padre-global .confeti {
  position: absolute; /* era fixed — innecesario en hijo de fixed */
  pointer-events: none;
  opacity: 0.55;
  will-change: transform;
}

.lluvia-padre-global .confeti.cuadrado {
  width: 8px;
  height: 8px;
  background: var(--color-confeti);
}

.lluvia-padre-global .confeti.rectangulo {
  width: 4px;
  height: 12px;
  background: var(--color-confeti);
}

.lluvia-padre-global .confeti.triangulo {
  width: 10px;
  height: 10px;
  background: var(--color-confeti);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.lluvia-padre-global .confeti.rombo {
  width: 7px;
  height: 7px;
  background: var(--color-confeti);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.lluvia-padre-global .confeti.circulo {
  width: 6px;
  height: 6px;
  background: var(--color-confeti);
  border-radius: 50%;
}

.color-azul-oscuro-1 { --color-confeti: #003d99; }
.color-azul-oscuro-2 { --color-confeti: #0047AB; }
.color-azul-oscuro-3 { --color-confeti: #004B87; }
.color-azul-oscuro-4 { --color-confeti: #0033CC; }
.color-azul-oscuro-5 { --color-confeti: #001a4d; }
.color-azul-oscuro-6 { --color-confeti: #1E3A8A; }

/* NOTA: .confeti.empujado usa filter:brightness+drop-shadow
   Eso rompe el composite layer de will-change:transform.
   Si el efecto visual no es crítico, considera removerlo.
   Si lo necesitas, está aquí: */
/*
.confeti.empujado {
  filter: brightness(1.4) drop-shadow(0 0 2px rgba(255,255,255,0.5));
  opacity: 0.8;
}
*/

@media (max-width: 768px) {
  .lluvia-padre-global .confeti.cuadrado  { width: 6px;  height: 6px;  }
  .lluvia-padre-global .confeti.rectangulo{ width: 3px;  height: 10px; }
  .lluvia-padre-global .confeti.triangulo { width: 8px;  height: 8px;  }
  .lluvia-padre-global .confeti.rombo     { width: 5px;  height: 5px;  }
  .lluvia-padre-global .confeti.circulo   { width: 4px;  height: 4px;  }
}/* End custom CSS */