.elementor-3191 .elementor-element.elementor-element-3810090{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3191 .elementor-element.elementor-element-3810090:not(.elementor-motion-effects-element-type-background), .elementor-3191 .elementor-element.elementor-element-3810090 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.codigovisual.com.co/wp-content/uploads/2026/10/MOCKUP-CODIGO.webp");background-position:center center;background-size:cover;}/* Start custom CSS for html, class: .elementor-element-cf82a4d *//* =========================================================
   CODIGO VISUAL — TARJETA VIRTUAL
   ========================================================= */

.cv-card {
  --cv-beige: #DEC1AB;
  --cv-brown: #755054;
  --cv-dark: #473033;
  --cv-white: #ffffff;

  width: 100%;
  max-width: 510px;
  margin: 0 auto;
  padding: 20px 24px 16px;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;

  /* EFECTO ACRÍLICO */
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;

  box-shadow:
    0 20px 50px rgba(71, 48, 51, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);

  overflow: hidden;
}


/* =========================================================
   LOGOTIPO
   ========================================================= */

.cv-logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
}

.cv-logo img {
  display: block;
  width: min(100%, 470px);
  height: auto;
  object-fit: contain;
}


/* =========================================================
   REDES SOCIALES
   ========================================================= */

.cv-socials {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 2px 0 22px;
}


/* CONTENEDOR INDIVIDUAL */

.cv-social {
  position: relative;

  width: 46px;
  height: 46px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.48);

  border: 1px solid rgba(71, 48, 51, 0.13);

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.9),
    0 3px 8px rgba(71, 48, 51, 0.08);

  text-decoration: none;

  transform-style: preserve-3d;

  transition:
    transform 0.3s cubic-bezier(0.68, 0.85, 0.265, 1.85),
    background 0.25s ease,
    box-shadow 0.25s ease;
}


/* ICONO */

.cv-social svg {
  width: 21px;
  height: 21px;

  fill: var(--cv-dark);

  transition:
    transform 0.3s cubic-bezier(0.68, -0.85, 0.265, 1.55),
    fill 0.25s ease;
}


/* EFECTO 3D */

.cv-social:hover {
  background: #ffffff;

  transform:
    perspective(180px)
    rotateX(60deg)
    translateY(2px);
}


/* EL ICONO SUBE */

.cv-social:hover svg {
  transform:
    translate3d(0, -8px, 25px)
    perspective(80px)
    rotateX(-60deg);
}


/* COLORES DE CADA RED */

.cv-facebook:hover {
  box-shadow:
    0 10px 15px rgba(59, 89, 152, 0.38);
}

.cv-facebook:hover svg {
  fill: #3b5998;
}


.cv-instagram:hover {
  box-shadow:
    0 10px 15px rgba(193, 53, 132, 0.35);
}

.cv-instagram:hover svg {
  fill: #c13584;
}


.cv-tiktok:hover {
  box-shadow:
    0 10px 15px rgba(71, 48, 51, 0.35);
}

.cv-tiktok:hover svg {
  fill: #000000;
}


.cv-gift:hover {
  box-shadow:
    0 10px 15px rgba(117, 80, 84, 0.38);
}

.cv-gift:hover svg {
  fill: var(--cv-brown);
}


/* =========================================================
   SEPARADOR
   ========================================================= */

.cv-divider {
  width: 92%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin: 0 auto 17px;
}

.cv-divider span {
  height: 1px;
  flex: 1;

  background: rgba(117, 80, 84, 0.45);
}

.cv-divider img {
  width: 30px;
  height: 30px;

  object-fit: contain;

  display: block;

  opacity: 0.92;
}


/* =========================================================
   LISTA DE BOTONES
   ========================================================= */

.cv-buttons {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 9px;
}


/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

.cv-button {
  position: relative;

  width: 100%;
  min-height: 56px;

  box-sizing: border-box;

  display: flex;
  align-items: center;

  padding: 7px 10px 7px 10px;

  text-decoration: none;

  border-radius: 16px;

  /* PALETA DE LA EMPRESA */
  background:
    linear-gradient(
      90deg,
      var(--cv-beige) 0%,
      #cfae9e 32%,
      var(--cv-brown) 100%
    );

  border: 1px solid rgba(71, 48, 51, 0.30);

  color: #ffffff;

  overflow: hidden;

  box-shadow:
    0 5px 12px rgba(71, 48, 51, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}


/* BRILLO SUPERIOR */

.cv-button::before {
  content: "";

  position: absolute;
  inset: 1px;

  border-radius: 15px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.22),
      rgba(255,255,255,0) 40%
    );

  pointer-events: none;
}


/* ESQUINA PLEGADA */

.cv-button::after {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 13px;
  height: 13px;

  background: rgba(255,255,255,0.78);

  clip-path: polygon(0 0, 100% 0, 100% 100%);

  border-bottom-left-radius: 6px;

  opacity: 0.75;

  transition:
    width 0.25s ease,
    height 0.25s ease;
}


/* HOVER */

.cv-button:hover {
  transform: translateY(-2px);

  filter: brightness(1.035);

  box-shadow:
    0 9px 18px rgba(71, 48, 51, 0.17),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.cv-button:hover::after {
  width: 17px;
  height: 17px;
}


/* CLICK */

.cv-button:active {
  transform: translateY(0) scale(0.985);
}


/* =========================================================
   ICONOS DE LOS BOTONES
   ========================================================= */

.cv-button-icon {
  position: relative;
  z-index: 2;

  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.55);

  border: 1px solid rgba(71, 48, 51, 0.12);

  color: var(--cv-dark);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.85),
    0 2px 5px rgba(71,48,51,0.08);

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.cv-button-icon svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* WHATSAPP OFICIAL */

.cv-button-icon.cv-whatsapp svg {
  fill: currentColor;
  stroke: none;

  width: 21px;
  height: 21px;
}


/* PAYPAL */

.cv-button-icon.cv-paypal svg {
  fill: currentColor;
  stroke: none;

  width: 22px;
  height: 22px;
}


/* SITIO WEB */

.cv-button-icon.cv-web svg {
  fill: none;
}


/* MOVIMIENTO DEL ICONO */

.cv-button:hover .cv-button-icon {
  transform: scale(1.06);
  background: rgba(255,255,255,0.72);
}


/* =========================================================
   TEXTO
   ========================================================= */

.cv-button-text {
  position: relative;
  z-index: 2;

  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;

  justify-content: center;

  padding: 0 10px;
}

.cv-button-text strong {
  display: block;

  font-family: "Poppins", sans-serif;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.2;

  color: #ffffff;
}

.cv-button-text small {
  display: block;

  margin-top: 2px;

  font-family: "Poppins", sans-serif;

  font-size: 10px;
  font-weight: 400;

  line-height: 1.2;

  color: rgba(255,255,255,0.88);
}


/* =========================================================
   FLECHA
   ========================================================= */

.cv-arrow {
  position: relative;
  z-index: 2;

  flex: 0 0 32px;

  width: 32px;
  height: 32px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,0.62);

  border: 1px solid rgba(71,48,51,0.10);

  color: var(--cv-dark);

  font-size: 19px;
  font-weight: 400;

  line-height: 1;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.8),
    0 2px 5px rgba(71,48,51,0.08);

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.cv-button:hover .cv-arrow {
  transform: translateX(3px);
  background: rgba(255,255,255,0.78);
}


/* =========================================================
   FOOTER
   ========================================================= */

.cv-footer {
  margin-top: 18px;
  padding-top: 4px;
}

.cv-footer-line {
  width: 92%;
  height: 1px;

  margin: 0 auto 10px;

  background: rgba(117,80,84,0.32);
}

.cv-footer-brand {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 4px;

  font-family: "Poppins", sans-serif;

  font-size: 8px;
}

.cv-footer-brand span {
  color: rgba(71,48,51,0.60);
}

.cv-footer-brand a {
  color: var(--cv-brown);

  font-weight: 700;

  text-decoration: none;

  transition: color 0.2s ease;
}

.cv-footer-brand a:hover {
  color: var(--cv-dark);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 600px) {

  .cv-card {
    max-width: 100%;

    padding:
      14px
      16px
      12px;

    border-radius: 20px;
  }

  .cv-logo {
    margin-bottom: 9px;
  }

  .cv-logo img {
    width: min(100%, 360px);
  }

  .cv-socials {
    gap: 9px;
    margin-bottom: 15px;
  }

  .cv-social {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .cv-social svg {
    width: 19px;
    height: 19px;
  }

  .cv-divider {
    width: 94%;
    gap: 9px;
    margin-bottom: 13px;
  }

  .cv-divider img {
    width: 25px;
    height: 25px;
  }

  .cv-buttons {
    gap: 7px;
  }

  .cv-button {
    min-height: 53px;
    border-radius: 14px;
  }

  .cv-button::after {
    border-bottom-left-radius: 5px;
  }

  .cv-button-icon {
    flex-basis: 36px;

    width: 36px;
    height: 36px;
  }

  .cv-button-icon svg {
    width: 18px;
    height: 18px;
  }

  .cv-button-text strong {
    font-size: 13px;
  }

  .cv-button-text small {
    font-size: 9px;
  }

  .cv-arrow {
    flex-basis: 30px;

    width: 30px;
    height: 30px;

    font-size: 17px;
  }

  .cv-footer {
    margin-top: 13px;
  }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {

  .cv-card {
    padding-left: 12px;
    padding-right: 12px;
  }

  .cv-logo img {
    width: 300px;
    max-width: 92%;
  }

  .cv-socials {
    gap: 7px;
  }

  .cv-social {
    width: 39px;
    height: 39px;
  }

  .cv-button {
    min-height: 51px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .cv-button-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .cv-button-text {
    padding-left: 8px;
    padding-right: 6px;
  }

  .cv-button-text strong {
    font-size: 12px;
  }

  .cv-button-text small {
    font-size: 8.5px;
  }

  .cv-arrow {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
  }
}/* End custom CSS */