.elementor-629 .elementor-element.elementor-element-de61152{--display:flex;--min-height:91dvh;--justify-content:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-629 .elementor-element.elementor-element-de61152.e-con{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-d848aaa */*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: #0f1720;
  background: #eaf5ef;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.background {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    radial-gradient(90% 70% at 10% 20%, #f5faf6, rgba(241, 247, 243, 0)),
    radial-gradient(70% 70% at 80% 90%, rgba(188, 231, 204, 0.55), rgba(185, 233, 201, 0));
  background-size: 34px 34px, 34px 34px, auto, auto;
  z-index: -3;
  opacity: 0.7;
}

.background-blob {
  position: absolute;
  filter: blur(30px);
  border-radius: 50%;
  opacity: 0.45;
  z-index: -2;
}

.blob-1 {
  width: 240px;
  height: 240px;
  background: #e3f3e8;
  top: 5%;
  left: 8%;
}

.blob-2 {
  width: 260px;
  height: 260px;
  background: #c9efd8;
  bottom: 10%;
  right: 18%;
}

.blob-3 {
  width: 220px;
  height: 220px;
  background: #ddefe5;
  bottom: 8%;
  left: 15%;
}

.nav {
  max-width: 1140px;
  margin: 26px auto;
  padding: 16px 28px;
  background: #f5f9f6bd;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 50px;
  z-index: 10;
  backdrop-filter: blur(10px);
  border: 1px solid #ffffff80;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo img {
  height: 34px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  margin: auto;
}

.nav-links a {
  padding: 6px 0;
  position: relative;
}

.nav-links a:hover {
  text-decoration: underline;
}

.nav-links a.active {
  color: #3b9c6c;
  font-weight: 600;
}

.cta {
  margin-left: auto;
  background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%);
  color: #fff;
  padding: 12px 22px;
  border-radius: 100px;
  box-shadow: 0 16px 26px rgba(11, 123, 68, 0.25);
  font-weight: 600;
}

.login-cta {
  margin-left: auto;
  background: #fff;
  color: #292929;
  padding: 12px 22px;
  border: 1px solid #00000010;
  border-radius: 100px;
  font-weight: 600;
  margin-right: 5px;
}

.hero {
  max-width: 1180px;
  margin: 40px auto 120px;
  padding: 30px 20px;
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  align-items: center;
  gap: 40px;
  scroll-margin-top: 150px;
}

.hero-text h1 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.2em;
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hero-text p {
  font-size: 17px;
  margin: 0 0 28px;
  color: #2f3a40;
}

.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0c0c0c;
  color: #fff;
  padding: 16px 26px;
  border-radius: 50px;
  font-weight: 600;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.hero-button:hover {
  color: #fff;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ring {
  position: absolute;
  width: 340px;
  height: 340px;
  border: 2px solid rgba(17, 137, 92, 0.28);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.phone {
  width: min(480px, 100%);
  transform: rotate(0deg);
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.28));
}

.how {
  max-width: 1180px;
  margin: 0 auto 160px;
  padding: 0 20px;
}

.how-inner {
  background: linear-gradient(145deg, rgba(245, 249, 246, 0.9), rgba(230, 243, 236, 0.9));
  border: 1px solid rgba(17, 137, 92, 0.08);
  border-radius: 28px;
  padding: 42px 42px 48px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.how-inner::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(61, 176, 107, 0.18), rgba(61, 176, 107, 0));
  top: -60px;
  right: -60px;
  filter: blur(10px);
}

.eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #3b9c6c;
  margin: 0 0 12px;
  font-weight: 700;
}

.how h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
  font-weight: 800;
}

.how-subtitle {
  margin: 0 0 28px;
  color: #2f3a40;
  font-size: 16px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step-card {
  background: #fdfefc;
  border: 1px solid rgba(17, 137, 92, 0.08);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
}

.badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%);
  color: #fff;
  font-weight: 700;
  margin-bottom: 14px;
  box-shadow: 0 12px 20px rgba(11, 123, 68, 0.25);
}

.step-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.step-card p {
  margin: 0;
  color: #2f3a40;
  font-size: 15px;
}

.why {
  max-width: 1180px;
  margin: 0 auto 160px;
  padding: 0 20px;
}

.why-head {
  max-width: 760px;
  margin-bottom: 18px;
}

.mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0c0c0c;
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.why h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
  font-weight: 800;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.why-card {
  background: #fdfefc;
  border: 1px solid rgba(17, 137, 92, 0.08);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
}

.why-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.why-card p {
  margin: 0;
  color: #2f3a40;
  font-size: 15px;
}

.use-cases {
  max-width: 1180px;
  margin: 0 auto 160px;
  padding: 0 20px;
}

.use-head h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
  font-weight: 800;
}

.use-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.use-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(17, 137, 92, 0.06);
  border-radius: 16px;
  padding: 18px 18px 20px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.use-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(61, 176, 107, 0.18), rgba(61, 176, 107, 0.05));
  border: 1px dashed rgba(17, 137, 92, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.use-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.use-card p {
  margin: 0;
  color: #2f3a40;
  font-size: 15px;
}

.comparison {
  max-width: 1180px;
  margin: 0 auto 160px;
  padding: 0 20px;
}

.comparison-inner {
  background: linear-gradient(150deg, rgba(245, 249, 246, 0.95), rgba(230, 243, 236, 0.9));
  border: 1px solid rgba(17, 137, 92, 0.08);
  border-radius: 26px;
  padding: 32px 34px 40px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.comparison-head h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 34px);
  letter-spacing: -0.02em;
  font-weight: 800;
}

.comparison-table {
  margin-top: 18px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(17, 137, 92, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 18px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.comparison-row {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.85fr;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.comparison-row:not(:last-child) {
  border-bottom: 1px solid rgba(17, 137, 92, 0.06);
}

.comparison-header {
  background: #e1efe6;
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.comparison-cell {
  font-size: 15px;
  color: #2f3a40;
  display: flex;
  align-items: center;
  gap: 12px;
}

.comparison-cell.label {
  font-weight: 700;
  color: #142029;
  display: block;
}

.comparison-cell.highlight {
  color: #0a7b44;
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16px;
}

.status.check {
  background: rgba(17, 137, 92, 0.12);
  color: #0a7b44;
  box-shadow: inset 0 0 0 1px rgba(17, 137, 92, 0.18);
}

.status.cross {
  background: rgba(197, 41, 114, 0.12);
  color: #c52972;
  box-shadow: inset 0 0 0 1px rgba(197, 41, 114, 0.2);
}

.note-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(20, 32, 41, 0.06);
  color: #142029;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  margin-left: 10px;
  font-weight: 600;
}

.col-label {
  display: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0c0c0c;
  background: rgba(17, 137, 92, 0.12);
  padding: 4px 8px;
  border-radius: 999px;
}

.comparison-note {
  margin-top: 16px;
  font-weight: 700;
  color: #0c0c0c;
  background: #fdfefc;
  border: 1px dashed rgba(17, 137, 92, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: inline-flex;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.04);
}

.why-whatsapp {
  max-width: 1180px;
  margin: 0 auto 160px;
  padding: 0 20px;
}

.why-whatsapp h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
  font-weight: 800;
}

.why-whatsapp-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.why-whatsapp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(17, 137, 92, 0.06);
  border-radius: 16px;
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.06);
}

.why-whatsapp-card h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #0c0c0c;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%);
  box-shadow: 0 0 0 6px rgba(17, 137, 92, 0.08);
}

.cta-banner {
  max-width: 1180px;
  margin: 60px auto -80px;
  padding: 0 20px;
  position: relative;
  z-index: 3;
}

.cta-banner-inner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(245, 249, 246, 0.96), rgba(228, 243, 236, 0.96));
  border: 1px solid rgba(17, 137, 92, 0.1);
  border-radius: 28px;
  padding: 34px 32px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}


/* =========================================
   PRICING PAGE STYLES
   ========================================= */

.pricing-header {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 50px;
  padding: 0 20px;
}

.pricing-header h1 {
  font-size: clamp(36px, 4vw, 56px);
  margin: 16px 0;
  font-weight: 800;
  color: #0f1720;
  letter-spacing: -0.03em;
}

.pricing-header p {
  color: #5c6b72;
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 30px;
}

.pill-badge {
  display: inline-block;
  background: rgba(61, 176, 107, 0.1);
  color: #0a7b44;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}

.pricing-toggle-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.pricing-toggle {
  background: #f1f4f2;
  border-radius: 12px;
  padding: 4px;
  display: inline-flex;
  gap: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.toggle-btn {
  background: transparent;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  color: #4a5a63;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s ease;
}

.toggle-btn.active {
  background: #3db06b;
  color: #fff;
  box-shadow: 0 4px 10px rgba(61, 176, 107, 0.25);
}

.toggle-btn:hover {
  background: #3db06b95 !important;
}

.toggle-btn[disabled] {
  color: #aebdc2;
  cursor: default;
  position: relative;
  overflow: visible;
  pointer-events: none;
}

.toggle-btn[disabled]:hover {
  background: transparent !important;
  color: #aebdc2;
}

.coming-soon-label {
  position: absolute;
  top: -12px;
  right: -22px;
  background-color: #e3f5eb;
  color: #0d8a4e;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 50px;
  font-weight: 800;
  border: 1px solid rgba(13, 138, 78, 0.15);
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
  z-index: 5;
}

.pricing-container {
  max-width: 1200px;
  margin: 0 auto 120px;
  padding: 0 20px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: start;
}

/* Base Card Styles */
.pricing-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
  outline: 2px solid #ffffff90;
  outline-offset: 3px;
}

.pricing-card:hover {
  /* transform: translateY(-5px);  User requested to NOT move */
}

/* Card Header */
.card-header {
  margin-bottom: 24px;
}

.plan-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.pricing-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #0c0c0c;
}

.plan-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  background: #f0f2f1;
  color: #555;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.plan-badge.green {
  background: rgba(61, 176, 107, 0.15);
  color: #0a7b44;
  border-color: rgba(61, 176, 107, 0.2);
}

.plan-badge.blur {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
}

.price-row .currency {
  font-size: 24px;
  font-weight: 600;
  color: #0c0c0c;
}

.price-row .amount {
  font-size: 48px;
  font-weight: 800;
  color: #0c0c0c;
  line-height: 1;
}

.price-row .period {
  font-size: 16px;
  color: #6b7c85;
}

/* Pricing Buttons */
.pricing-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 100px;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.btn-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-text {
  transition: transform 0.3s ease;
  will-change: transform;
}

.btn-arrow {
  position: absolute;
  right: -15px;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.15s ease;
  font-weight: bold;
  font-size: 20px;
}

.pricing-btn:hover .btn-text {
  transform: translateX(-5px);
}

.pricing-btn:hover .btn-arrow {
  opacity: 1;
  transform: translateX(0);
}

.pricing-btn.outline {
  background: #fff;
  border: 1px solid #ddd;
  color: #0c0c0c;
}

.pricing-btn.outline:hover {
  background: #f9f9f9;
}

.pricing-btn.solid {
  background: #3db06b;
  /* Green */
  background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(61, 176, 107, 0.25);
}

.pricing-btn.solid:hover {
  filter: brightness(1.05);
}

.pricing-btn.white {
  background: #fff;
  color: #0a7b44;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.pricing-btn.white:hover {
  background: #fdfdfd;
}

.card-divider {
  height: 1px;
  background: #eee;
  margin-bottom: 24px;
  width: 100%;
}

/* Features List */
.card-features {
  font-size: 15px;
}

.features-label {
  font-size: 14px;
  font-weight: 600;
  color: #0c0c0c;
  margin: 0 0 16px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2px;
  line-height: 1.4;
  color: #4a5a63;
}

.check-icon {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23aebdc4'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-top: 2px;
  margin-right: 5px;
}

/* ==================
   Card Specific Overrides
   ================== */

/* Featured Card (Middle) - No special background per user req for "Autorización Rápida", but Image shows White. 
   WAIT. User said: "The middle one should be the 'Autorización Rápida' plan and it should be the one in different color."
   The image shows the RIGHTMOST card in Green. The User said MIDDLE one should be different color.
   I will make the MIDDLE card (Autorización Rápida) slightly different, maybe highlighted ring or slight bg tint, OR I follow the user instruction more literally?
   "The middle one ... should be the one in different color."
   
   If I look at the reference image, the *Custom* plan (Right) is Green.
   The user wants the *Middle* plan (Autorización Rápida) to be the "Different Color" one.
   So I will apply the Green style to the MIDDLE card.
*/

.pricing-card.featured {
  /* Middle card (Autorización Rápida) - Green Theme */
  background: linear-gradient(160deg, #3db06b 0%, #086b3b 100%);
  color: #fff;
  box-shadow: 0 30px 60px rgba(11, 123, 68, 0.3);
  border: none;
  outline: 2px solid #ffffff90;
  outline-offset: 5px;
  transform: scale(1.03);
  z-index: 2;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px) opacity(.5);
  /* For shiny effect */
}

/* Shiny Effect Animation */
@keyframes shine {
  0% {
    left: -150%;
    top: -150%;
  }

  100% {
    left: 150%;
    top: 150%;
  }
}

.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -150%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to bottom right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
  pointer-events: none;
  filter: blur(60px);
  /* Much blur for smoothness */
  opacity: 0;
  transition: opacity 0.3s;
}

.pricing-card.featured:hover::before {
  opacity: .3;
  animation: shine 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-3px);
}

/* Fix .elementor-629 .elementor-element.elementor-element-d848aaa specificites for Title */
.pricing-card.featured h3,
.pricing-card.featured .pricing-card h3 {
  color: #fff !important;
}

.pricing-card.featured .price-row .currency,
.pricing-card.featured .price-row .amount {
  color: #fff;
}

.pricing-card.featured .price-row .period {
  color: rgba(255, 255, 255, 0.8);
}

.pricing-card.featured .features-label {
  color: #fff;
}

.pricing-card.featured .feature-list li {
  color: #fff;
}

.pricing-card.featured .card-divider {
  background: rgba(255, 255, 255, 0.2);
}

.pricing-card.featured .check-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414L10.586 12 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Featured Card Button: White Background, Green Text */
.pricing-card.featured .pricing-btn.solid {
  background: #fff;
  color: #0a7b44;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.pricing-card.featured .pricing-btn.solid:hover {
  background: #fdfdfd;
  filter: none;
  /* remove brightness filter from generic .solid:hover */
}

/* Featured Card Badge: White Background, Green Text */
.pricing-card.featured .plan-badge.green {
  background: #fedd7a;
  color: #0a7b44;
}

/* Features of the white cards need check icons to be green */
.pricing-card:not(.dark-green):not(.featured) .check-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233db06b'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* 3rd Card (Dark Green in class name but I'm making it White based on user request "Middle... is different color" implying others are standard) 
   So I will override my HTML class logic and styling here.
   Middle card (.featured) IS the Colored one.
   Right card (.dark-green) should be WHITE again (like the first one), or maybe just standard.
   I'll style .dark-green as a standard white card but maybe with a different border or header.
   Actually, I used class "dark-green" in HTML for the 3rd card. I should style it just like the first one if the Middle is the only unique one.
*/
.pricing-card.dark-green {
  background: #fff;
  color: inherit;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.pricing-card.dark-green h3,
.pricing-card.dark-green .price-row .currency,
.pricing-card.dark-green .price-row .amount {
  color: #0c0c0c;
}

.pricing-card.dark-green .check-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233db06b'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.pricing-card.dark-green .pricing-btn.white {
  /* If it was white on green, now it needs to be green on white? or Solid? */
  /* Let's make it outline like the first one or solid? First one is outline. Let's make this one outline too or maybe solid secondary. */
  background: #fff;
  border: 1px solid #ddd;
  color: #0c0c0c;
  box-shadow: none;
}

.pricing-card.dark-green .pricing-btn.white:hover {
  background: #f9f9f9;
}


/* Payment Logos Section */
.payment-security {
  text-align: center;
  margin-top: -60px;
  /* Pull it slightly closer to cards */
  margin-bottom: 80px;
  padding: 0 20px;
}

.security-text {
  font-size: 14px;
  color: #6b7c85;
  margin-bottom: 16px;
  font-weight: 600;
}

.payment-logos {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  opacity: 0.5;
  /* Makes them grey */
  filter: grayscale(100%);
}

.pay-logo {
  height: 50px !important;
  /* Slightly smaller for better alignment */
  width: auto;
  opacity: 0.6;
  /* Ensure grey look */
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.pay-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}


/* Responsive */
@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  .pricing-card.featured {
    transform: none;
  }
}


@keyframes float-reverse {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(-2deg);
  }
}

.cta-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Ensure rings/icons don't spill out */
  border-radius: 28px;
}

.cta-floating-icon {
  position: absolute;
  width: clamp(60px, 8vw, 100px);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(11, 123, 68, 0.15));
  animation: float 6s ease-in-out infinite;
  z-index: 1;
}

.icon-check {
  top: -2%;
  left: -2%;
  width: clamp(120px, 7vw, 215px);
  animation-delay: 0s;
  transform: rotate(-5deg);
  opacity: .5;
}

.icon-doc {
  bottom: -14%;
  left: 8%;
  width: clamp(85px, 7vw, 180px);
  animation: float-reverse 7s ease-in-out infinite;
  animation-delay: 1s;
  opacity: .5;
}

.icon-msg {
  top: -4%;
  right: -4%;
  width: clamp(120px, 7vw, 215px);
  animation-delay: 2s;
  opacity: .5;
}

.icon-shield {
  bottom: -8%;
  right: 7%;
  width: clamp(120px, 7vw, 215px);
  animation: float-reverse 8s ease-in-out infinite;
  animation-delay: 1.5s;
  opacity: .5;
}

/* Decorative Rings */
.cta-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(17, 137, 92, 0.06);
  z-index: 0;
}

.ring-1 {
  width: 300px;
  height: 300px;
  top: -60px;
  left: -80px;
  border-width: 2px;
}

.ring-2 {
  width: 220px;
  height: 220px;
  bottom: -40px;
  right: -50px;
  border-width: 2px;
  border-color: rgba(17, 137, 92, 0.08);
}

.cta-content {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  z-index: 1;
}

.cta-content h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #0c0c0c;
}

.cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-form {
  width: min(640px, 100%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 246, 0.96));
  border: 1px solid rgba(17, 137, 92, 0.14);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-form {
  width: min(440px, 100%);
}

.cta-input {
  flex: 1;
  border: none !important;
  background: transparent;
  padding: 12px 14px 12px 16px;
  font-size: 15px;
  color: #0c0c0c;
  outline: none !important;
}

.cta-input::placeholder {
  color: #5c6b72;
}

.cta-submit {
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 18px 26px rgba(11, 123, 68, 0.25);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.cta-submit:hover {
  box-shadow: 0 18px 28px rgba(11, 123, 68, 0.32);
}

.arrow {
  font-size: 16px;
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 18px 26px rgba(11, 123, 68, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(17, 137, 92, 0.16);
  color: #0a7b44;
  font-weight: 700;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.06);
}

.play-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0a7b44;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.play-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #fff;
}

.site-footer {
  background: radial-gradient(120% 120% at 15% 20%, rgba(17, 137, 92, 0.22), transparent), radial-gradient(100% 90% at 80% 10%, rgba(7, 65, 40, 0.3), transparent), linear-gradient(180deg, #0d5a34 0%, #0a4a2b 100%);
  color: #e5f5ec;
  padding: 140px 20px 60px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none !important
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
  opacity: 0.6;
  pointer-events: none;
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 26px;
}

.footer-brand {
  max-width: 360px;
  display: grid;
  gap: 12px;
}

.footer-logo {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.2);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.footer-col {
  display: grid;
  gap: 8px;
}

.footer-col h4 {
  margin: 0 0 4px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b7e0c7;
}

.footer-col a {
  color: #e5f5ec;
  font-weight: 500;
  font-size: 14px;
}

.footer-col a:hover {
  color: #ffffff;
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: #cde9d8;
  font-size: 13px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

.footer-copy {
  font-weight: 600;
}

.hero-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f9f6bd;
  backdrop-filter: blur(10px);
  border: 1px solid #00000020;
  padding: 16px 26px;
  border-radius: 50px;
  font-weight: 600;
}

.hero-cta-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* Feature Switcher Styles */

.feature-switcher {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  margin-top: 40px;
}

/* Visual Area (Images) */
.feature-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 24px;
  overflow: hidden;
  background: #f0f7f4;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(17, 137, 92, 0.1);
}

.feature-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-out;
  transform: scale(1.05);
}

.feature-image.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Feature List (Tabs) */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-item {
  position: relative;
  padding: 24px 28px;
  border-radius: 18px;
  cursor: pointer;
  background: transparent;
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid transparent;
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.5);
}

.feature-item.active {
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  border-color: rgba(17, 137, 92, 0.08);
}

/* Progress Bar */
.feature-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(17, 137, 92, 0.1);
}

.feature-item.active .feature-progress .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  /* Starts at 0 */
  background: #3db06b;
  /* Animation is controlled via JS or CSS Keyframes on active */
}

/* Typography */
.feature-content h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: #142029;
  transition: color 0.3s ease;
}

.feature-item.active .feature-content h3 {
  color: #0a7b44;
}

.feature-content p {
  margin: 0;
  font-size: 15px;
  color: #5c6b72;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.feature-item.active .feature-content p {
  color: #2f3a40;
}

/* Responsive */
@media (max-width: 900px) {
  .feature-switcher {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .feature-visual {
    order: -1;
    /* Image visual on top for mobile/tablet */
    aspect-ratio: 16/9;
  }
}

@media (max-width: 600px) {
  .feature-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .feature-item {
    min-width: 280px;
    scroll-snap-align: center;
    background: #fff;
    /* Cards approach on mobile */
    border: 1px solid rgba(17, 137, 92, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  }

  /* Horizontal progress bar for mobile cards if we want,
     but vertical bar design might look weird.
     Let's adjust progress bar for horizontal layout */
  .feature-progress {
    width: 100%;
    height: 4px;
    bottom: 0;
    top: auto;
    left: 0;
  }

  .feature-item.active .feature-progress .progress-bar {
    height: 100%;
    width: 0%;
    /* We will animate width on horizontal?
                 Actually let's keep it consistent.
                 The layout above changes flex-direction to row.
                 Let's stick to the vertical logic visually or adapt.
    */
  }
}

@media (max-width: 980px) {
  .nav {
    margin: 18px 18px 0;
    padding: 14px 18px;
    gap: 18px;
  }

  .nav-links {
    gap: 16px;
  }

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    margin: 30px auto 60px;
    padding: 0 22px;
  }

  .hero-visual {
    order: -1;
  }

  .hero-button {
    justify-content: center;
    width: 100%;
    max-width: 360px;
  }

  .ring {
    width: 280px;
    height: 280px;
  }

  .how-inner {
    padding: 32px 28px 38px;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .use-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .comparison-row {
    grid-template-columns: 1.1fr 0.7fr 0.7fr;
    padding: 14px 14px;
  }

  .why-whatsapp-points {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    margin: 40px auto -60px;
  }

  .cta-banner-inner {
    padding: 30px 24px;
  }

  .cta-avatar {
    opacity: 0.4;
  }

  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-form {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .use-grid {
    grid-template-columns: 1fr;
  }

  .comparison-table {
    border-radius: 16px;
  }

  .comparison-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: flex-start;
  }

  .col-label {
    display: inline-flex;
    margin-bottom: 4px;
  }

  .comparison-header {
    display: none;
  }

  .comparison-row .comparison-cell:nth-child(2),
  .comparison-row .comparison-cell:nth-child(3) {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .comparison-cell.label {
    margin-bottom: 6px;
  }

  .cta-banner {
    margin: 26px auto -50px;
  }

  .cta-content h2 {
    font-size: 26px;
  }

  /* Hide floating icons on mobile to save space */
  .cta-floating-icon,
  .cta-ring {
    display: none;
  }

  .cta-actions {
    width: 100%;
  }

  .cta-primary,
  .cta-secondary {
    width: 100%;
    justify-content: center;
  }

  .cta-form {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
  }

  .cta-submit {
    width: 100%;
    justify-content: center;
  }

  .footer-columns {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding-top: 120px;
  }
}

/* Multi-step Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 24, 18, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background: #fff;
  width: min(600px, 100%);
  border-radius: 24px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(17, 137, 92, 0.08);
  position: relative;
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal-overlay.active .modal-container {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #8c9fa5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.2s;
  z-index: 10;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0c0c0c;
}

/* Steps Animation */
.modal-step {
  padding: 40px;
  width: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-step.hidden {
  display: none !important;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.step-header {
  text-align: center;
  margin-bottom: 32px;
}

.step-indicator {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #3db06b;
  margin-bottom: 8px;
  background: rgba(61, 176, 107, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
}

.step-header h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  color: #0c0c0c;
  line-height: 1.2;
}

.step-header p {
  margin: 0;
  color: #5c6b72;
  font-size: 15px;
}

/* Step 1 Grid */
.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.option-card-radio {
  cursor: pointer;
  position: relative;
}

.option-card-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  background: #fdfefc;
  border: 2px solid rgba(17, 137, 92, 0.08);
  border-radius: 16px;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 100%;
}

.card-content .icon {
  font-size: 28px;
  filter: grayscale(1);
  transition: all 0.2s;
}

.card-content .label {
  font-size: 14px;
  font-weight: 600;
  color: #2f3a40;
  line-height: 1.3;
}

.option-card-radio input:checked+.card-content {
  border-color: #3db06b;
  background: rgba(61, 176, 107, 0.04);
  box-shadow: 0 8px 16px rgba(61, 176, 107, 0.12);
  transform: translateY(-2px);
}

.option-card-radio input:checked+.card-content .icon {
  filter: grayscale(0);
  transform: scale(1.1);
}

.option-card-radio:hover .card-content {
  border-color: rgba(17, 137, 92, 0.3);
  background: #fff;
}

/* Step 2/3 List */
.option-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-row {
  cursor: pointer;
  position: relative;
  display: block;
}

.option-row input {
  position: absolute;
  opacity: 0;
}

.row-content {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: #fdfefc;
  border: 2px solid rgba(17, 137, 92, 0.08);
  border-radius: 12px;
  font-weight: 600;
  color: #2f3a40;
  transition: all 0.2s;
  font-size: 15px;
}

.row-content::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid #ced4da;
  border-radius: 50%;
  margin-right: 14px;
  transition: all 0.2s;
  box-sizing: border-box;
}

.option-row input:checked+.row-content {
  border-color: #3db06b;
  background: rgba(61, 176, 107, 0.04);
  color: #0c0c0c;
}

.option-row input:checked+.row-content::before {
  border-color: #3db06b;
  background: #3db06b;
  box-shadow: inset 0 0 0 3px #fff;
}

.option-row:hover .row-content {
  border-color: rgba(17, 137, 92, 0.3);
}

/* Footer & Buttons */
.step-footer {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* If only one button, push it to right */
.step-footer button:only-child {
  margin-left: auto;
}

.btn-next,
.btn-finish {
  background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(11, 123, 68, 0.2);
  transition: all 0.2s;
}

.btn-next:disabled,
.btn-finish:disabled {
  background: #e9ecef;
  color: #adb5bd;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-next:not(:disabled):hover,
.btn-finish:not(:disabled):hover {
  box-shadow: 0 6px 16px rgba(11, 123, 68, 0.3);
  transform: translateY(-1px);
}

.btn-back {
  background: transparent;
  color: #5c6b72;
  border: none;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s;
}

.btn-back:hover {
  color: #0c0c0c;
  background: rgba(0, 0, 0, 0.04);
}

/* Success State */
.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 20px 0;
}

.success-icon {
  font-size: 64px;
  margin-bottom: 8px;
  animation: pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.success-content h3 {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  color: #0c0c0c;
}

.success-content p {
  color: #5c6b72;
  margin: 0;
  font-size: 16px;
  max-width: 400px;
  line-height: 1.5;
}

.btn-close-final {
  margin-top: 24px;
  background: #f1f3f5;
  color: #212529;
  border: none;
  padding: 12px 32px;
  border-radius: 99px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-close-final:hover {
  background: #e9ecef;
  color: #000;
}

/* Responsive adjustment for small screens */
@media (max-width: 480px) {
  .modal-step {
    padding: 24px 20px 32px;
  }

  .step-header h3 {
    font-size: 20px;
  }

  .option-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Nav Button Interaction Overlay */
.page-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.page-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.hero-form {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Ensure it has a background if it doesn't already */
}

/* Why WhatsApp Redesign */
.why-whatsapp-grid {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  align-items: center;
  gap: 20px;
}

.why-left {
  /* Aligns eyebrow and h2 */
}

.why-right {
  display: flex;
  align-items: center;
  height: 120px;
  text-align: center;
  /* Fixed height for carousel stability */
}

.why-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.why-item {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateY(20px);
  /* Start slightly lower + hidden */
  opacity: 0;
  pointer-events: none;
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.1em;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 100%;
}

.why-item.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(-50%) translateY(0);
}

/* Typography Variants */
.highlight-green {
  color: #0a7b44;
  font-weight: 800;
}

.highlight-light {
  color: #5c6b72;
  font-weight: 500;
}

#como-funciona,
#beneficios,
#casos-de-uso {
  scroll-margin-top: 120px;
}

@media (max-width: 768px) {
  .why-whatsapp-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .why-right {
    height: 100px;
  }

  .why-item {
    font-size: 28px;
    text-align: center;
  }

  .why-carousel {
    justify-content: center;
  }

  .why-left {
    text-align: center;
  }
}



/* =========================================
   MOBILE NAV STYLES (From index.html)
   ========================================= */

/* Ensure header stays on top */
.nav {
  position: sticky;
  top: 25px;
  z-index: 1000;
}

.nav-toggle {
  width: 44px;
  height: 44px;
  display: none;
  /* Hidden by default on desktop */
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #111;
  /* inherits to currentColor */
  flex-direction: column;
}

/* Each bar */
.nav-toggle .nav-toggle-bar {
  display: block !important;
  width: 24px;
  height: 2px;
  margin: 3px 0;
  background: currentColor !important;
  border-radius: 2px;
  line-height: 0 !important;
  font-size: 0 !important;
}


/* Desktop: drawer behaves like normal layout */
.nav-drawer {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 80%;
}

/* ===== Mobile ===== */
@media (max-width: 860px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Drawer becomes dropdown */
  .nav-drawer {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 10px);
    display: none;
    /* closed by default */
    flex-direction: column;
    align-items: stretch;
    gap: 14px;

    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
  }

  /* When open */
  .nav.nav--open .nav-drawer {
    display: flex;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .nav-links a {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .nav-cta {
    display: grid;
    gap: 10px;
  }

  .nav-cta a {
    text-align: center;
  }
}

/* Block scroll when menu is open */
body.nav-locked {
  overflow: hidden;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-309e9c3 *//* Existing functional styles - kept */
.arm_setup_form_inner_container {
    display: flex;
    flex-direction: column;
}

.arm_setup_gatewaybox_main_wrapper {
    order: 0;
}

.arm_module_forms_main_container {
    order: 1;
}

.arm_setup_submit_btn_main_wrapper {
    order: 3;
}

.plan-shortcodes {
    display: none;
}

.arm_strength_meter_block_container .arm_strength_meter_block {
    float: left !important;
    width: 20px !important;
    margin-right: 10px !important;
    max-height: 20px !important;
    border-radius: 100px !important;
    margin-right: 2px !important;
}

.arm_strength_meter_block_container {
    inline-size: fit-content !important;
}

.arm_setup_form_field_label_wrapper_text {
    display: none !important;
}

/* =========================================
   NEW STYLES TO IMPROVE LOOK AND FEEL
   ========================================= */

/* Font Family Override */
.arm_setup_form_inner_container,
.arm_setup_form_inner_container input,
.arm_setup_form_inner_container button,
.arm_setup_form_inner_container select,
.arm_setup_form_inner_container textarea,
.arm_setup_form_inner_container label,
.arm_setup_form_inner_container span,
.arm_setup_form_inner_container div {
    font-family: 'Manrope', sans-serif !important;
}

/* Keep FontAwesome for icons */
.armfa,
.fa,
.fas,
.far,
.fab {
    font-family: FontAwesome !important;
}

/* -----------------------------------------
   Layout: First Name & Last Name 50% Split
   ----------------------------------------- */

/* Flex container for the form groups to handle clearing safely if needed, 
   but float is safer for specific ID targeting without changing parent. */

#arm-df__form-group_150 {
    display: inline-block !important;
    width: 50% !important;
    float: left !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    clear: none !important;
    margin-bottom: 0 !important;
    /* Remove bottom margin if any to align perfectly */
}

#arm-df__form-group_151 {
    display: inline-block !important;
    width: 50% !important;
    float: left !important;
    padding-left: 8px !important;
    box-sizing: border-box !important;
    clear: none !important;
    margin-bottom: 0 !important;
}

/* Ensure Email input clears the floated elements */
#arm-df__form-group_152 {
    clear: both !important;
    width: 100% !important;
    padding-top: 15px !important;
    /* Add space since we might have removed margin above */
}

/* -----------------------------------------
   Input Styling (Matching Site Design)
   ----------------------------------------- */

/* Turn off the material design notch borders to create a cleaner look */
.arm-notched-outline,
.arm-notched-outline__leading,
.arm-notched-outline__notch,
.arm-notched-outline__trailing {
    border: none !important;
    box-shadow: none !important;
}

/* Input Fields */
.arm_material_input {
    background: #fff !important;
    border: 1px solid rgba(17, 137, 92, 0.20) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: #0f1720 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
    height: auto !important;
    transition: all 0.2s ease !important;
    margin-top: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.arm_material_input:focus {
    border-color: #3db06b !important;
    box-shadow: 0 0 0 3px rgba(61, 176, 107, 0.15) !important;
    outline: none !important;
}

/* Fix Labels - Move them above input like standard form */
.arm-df__form-field-wrap {
    display: flex !important;
    flex-direction: column !important;
}

.arm-notched-outline__notch {
    order: -1 !important;
    /* Move label to top */
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}

.arm-df__label-text {
    position: static !important;
    transform: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #142029 !important;
    display: block !important;
    pointer-events: auto !important;
    background: transparent !important;
}

/* -----------------------------------------
   Buttons
   ----------------------------------------- */

.arm_setup_submit_btn,
button.arm-df__form-control-submit-btn,
.arm-df__form-control-submit-btn {
    background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    cursor: pointer !important;
    text-transform: none !important;
    box-shadow: 0 12px 24px rgba(11, 123, 68, 0.25) !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.arm_setup_submit_btn:hover,
button.arm-df__form-control-submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 30px rgba(11, 123, 68, 0.35) !important;
}

.arm_setup_submit_btn .arm_spinner svg {
    margin-right: 10px !important;
    fill: #fff !important;
}

/* "Volver" / Back buttons if any */
button[data-id="arm_setup_two_step_previous"] {
    background: #f1f4f2 !important;
    color: #4a5a63 !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

button[data-id="arm_setup_two_step_previous"]:hover {
    background: #e1e4e2 !important;
}


/* -----------------------------------------
   Section Titles & Headers
   ----------------------------------------- */

.arm_setup_section_title_wrapper,
.arm-df__heading-text {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0c0c0c !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    display: block !important;
    letter-spacing: -0.02em !important;
}

.arm-df__heading {
    margin-bottom: 20px !important;
}


/* -----------------------------------------
   Gateway / Plan Cards
   ----------------------------------------- */

/* Gateway Options */
.arm_module_gateways_container ul li {
    list-style: none !important;
}

.arm_module_gateways_container .arm_module_gateway_option {
    background: #fff !important;
    border: 1px solid rgba(17, 137, 92, 0.1) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

.arm_module_gateways_container .arm_active .arm_module_gateway_option {
    border-color: #3db06b !important;
    background: rgba(61, 176, 107, 0.04) !important;
    box-shadow: 0 8px 15px rgba(61, 176, 107, 0.1) !important;
}

.arm_module_gateway_name {
    font-weight: 700 !important;
    color: #142029 !important;
    font-size: 15px !important;
}

/* User Account Section */
.arm_module_forms_container {
    background: transparent !important;
    padding-top: 20px !important;
}

/* Adjust spacings */
.arm-df__form-group {
    margin-bottom: 15px !important;
}

/* Remove default plugin focus glows if any */
.arm_material_input:focus~.arm-notched-outline .arm-notched-outline__notch label {
    color: #3db06b !important;
}

.arm_setup_submit_btn,
button.arm-df__form-control-submit-btn,
.arm-df__form-control-submit-btn {
    width: 30% !important;
}

.arm--material-outline-style .arm-df__form-field .arm-df__form-field-wrap {
    align-content: center !important;
}

.arm-default-form .arm_module_box.arm_module_forms_container,
.arm-default-form .arm_module_forms_container {
    border-bottom: none !important;
}

.arm_form_101.arm--material-outline-style.arm_materialize_form .arm-df__form-field-wrap label {
    font-family: 'Manrope' !important;
}

.arm_form_101.arm--material-outline-style .arm-df__form-field-wrap input:not([type='checkbox'], [type='radio'], .arm-df__dc--head__autocomplete) {
    background-color: #f0f0f0 !important;
}

.arm-default-form .arm-df__form-group.arm-df__form-group_submit .arm-df__form-field-wrap_submit {
    margin-top: -50px !important;
}

[data-field_id="180"],
[data-field_id="181"] {
    width: 50% !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9907217 *//* Existing functional styles - kept */
.arm_setup_form_inner_container {
    display: flex;
    flex-direction: column;
}

.arm_setup_gatewaybox_main_wrapper {
    order: 0;
}

.arm_module_forms_main_container {
    order: 1;
}

.arm_setup_submit_btn_main_wrapper {
    order: 3;
}

.plan-shortcodes {
    display: none;
}

.arm_strength_meter_block_container .arm_strength_meter_block {
    float: left !important;
    width: 20px !important;
    margin-right: 10px !important;
    max-height: 20px !important;
    border-radius: 100px !important;
    margin-right: 2px !important;
}

.arm_strength_meter_block_container {
    inline-size: fit-content !important;
}

.arm_setup_form_field_label_wrapper_text {
    display: none !important;
}

/* =========================================
   NEW STYLES TO IMPROVE LOOK AND FEEL
   ========================================= */

/* Font Family Override */
.arm_setup_form_inner_container,
.arm_setup_form_inner_container input,
.arm_setup_form_inner_container button,
.arm_setup_form_inner_container select,
.arm_setup_form_inner_container textarea,
.arm_setup_form_inner_container label,
.arm_setup_form_inner_container span,
.arm_setup_form_inner_container div {
    font-family: 'Manrope', sans-serif !important;
}

/* Keep FontAwesome for icons */
.armfa,
.fa,
.fas,
.far,
.fab {
    font-family: FontAwesome !important;
}

/* -----------------------------------------
   Layout: First Name & Last Name 50% Split
   ----------------------------------------- */

/* Flex container for the form groups to handle clearing safely if needed, 
   but float is safer for specific ID targeting without changing parent. */

#arm-df__form-group_150 {
    display: inline-block !important;
    width: 50% !important;
    float: left !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    clear: none !important;
    margin-bottom: 0 !important;
    /* Remove bottom margin if any to align perfectly */
}

#arm-df__form-group_151 {
    display: inline-block !important;
    width: 50% !important;
    float: left !important;
    padding-left: 8px !important;
    box-sizing: border-box !important;
    clear: none !important;
    margin-bottom: 0 !important;
}

/* Ensure Email input clears the floated elements */
#arm-df__form-group_152 {
    clear: both !important;
    width: 100% !important;
    padding-top: 15px !important;
    /* Add space since we might have removed margin above */
}

/* -----------------------------------------
   Input Styling (Matching Site Design)
   ----------------------------------------- */

/* Turn off the material design notch borders to create a cleaner look */
.arm-notched-outline,
.arm-notched-outline__leading,
.arm-notched-outline__notch,
.arm-notched-outline__trailing {
    border: none !important;
    box-shadow: none !important;
}

/* Input Fields */
.arm_material_input {
    background: #fff !important;
    border: 1px solid rgba(17, 137, 92, 0.20) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: #0f1720 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
    height: auto !important;
    transition: all 0.2s ease !important;
    margin-top: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.arm_material_input:focus {
    border-color: #3db06b !important;
    box-shadow: 0 0 0 3px rgba(61, 176, 107, 0.15) !important;
    outline: none !important;
}

/* Fix Labels - Move them above input like standard form */
.arm-df__form-field-wrap {
    display: flex !important;
    flex-direction: column !important;
}

.arm-notched-outline__notch {
    order: -1 !important;
    /* Move label to top */
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}

.arm-df__label-text {
    position: static !important;
    transform: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #142029 !important;
    display: block !important;
    pointer-events: auto !important;
    background: transparent !important;
}

/* -----------------------------------------
   Buttons
   ----------------------------------------- */

.arm_setup_submit_btn,
button.arm-df__form-control-submit-btn,
.arm-df__form-control-submit-btn {
    background: linear-gradient(180deg, #3db06b 0%, #0a7b44 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    cursor: pointer !important;
    text-transform: none !important;
    box-shadow: 0 12px 24px rgba(11, 123, 68, 0.25) !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.arm_setup_submit_btn:hover,
button.arm-df__form-control-submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 30px rgba(11, 123, 68, 0.35) !important;
}

.arm_setup_submit_btn .arm_spinner svg {
    margin-right: 10px !important;
    fill: #fff !important;
}

/* "Volver" / Back buttons if any */
button[data-id="arm_setup_two_step_previous"] {
    background: #f1f4f2 !important;
    color: #4a5a63 !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

button[data-id="arm_setup_two_step_previous"]:hover {
    background: #e1e4e2 !important;
}


/* -----------------------------------------
   Section Titles & Headers
   ----------------------------------------- */

.arm_setup_section_title_wrapper,
.arm-df__heading-text {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0c0c0c !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    display: block !important;
    letter-spacing: -0.02em !important;
}

.arm-df__heading {
    margin-bottom: 20px !important;
}


/* -----------------------------------------
   Gateway / Plan Cards
   ----------------------------------------- */

/* Gateway Options */
.arm_module_gateways_container ul li {
    list-style: none !important;
}

.arm_module_gateways_container .arm_module_gateway_option {
    background: #fff !important;
    border: 1px solid rgba(17, 137, 92, 0.1) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

.arm_module_gateways_container .arm_active .arm_module_gateway_option {
    border-color: #3db06b !important;
    background: rgba(61, 176, 107, 0.04) !important;
    box-shadow: 0 8px 15px rgba(61, 176, 107, 0.1) !important;
}

.arm_module_gateway_name {
    font-weight: 700 !important;
    color: #142029 !important;
    font-size: 15px !important;
}

/* User Account Section */
.arm_module_forms_container {
    background: transparent !important;
    padding-top: 20px !important;
}

/* Adjust spacings */
.arm-df__form-group {
    margin-bottom: 15px !important;
}

/* Remove default plugin focus glows if any */
.arm_material_input:focus~.arm-notched-outline .arm-notched-outline__notch label {
    color: #3db06b !important;
}

.arm_setup_submit_btn,
button.arm-df__form-control-submit-btn,
.arm-df__form-control-submit-btn {
    width: 30% !important;
}

.arm--material-outline-style .arm-df__form-field .arm-df__form-field-wrap {
    align-content: center !important;
}

.arm-default-form .arm_module_box.arm_module_forms_container,
.arm-default-form .arm_module_forms_container {
    border-bottom: none !important;
}

.arm_form_101.arm--material-outline-style.arm_materialize_form .arm-df__form-field-wrap label {
    font-family: 'Manrope' !important;
}

.arm_form_101.arm--material-outline-style .arm-df__form-field-wrap input:not([type='checkbox'], [type='radio'], .arm-df__dc--head__autocomplete) {
    background-color: #f0f0f0 !important;
}

.arm-default-form .arm-df__form-group.arm-df__form-group_submit .arm-df__form-field-wrap_submit {
    margin-top: -50px !important;
}

[data-field_id="174"],
[data-field_id="175"] {
    width: 50% !important;
}/* End custom CSS */