:root {
  --primary: #5BBAD5;
  --dark: #0F2A3A;
  --ink: #0B1220;
  --addons-blue: #3F85ED;

  --bg1: rgba(91, 186, 213, 0.10);
  --bg2: #ffffff;

  --border: rgba(0, 0, 0, .10);
  --muted: rgba(15, 23, 42, .55);
  --soft: rgba(255, 255, 255, .75);
  --soft2: rgba(255, 255, 255, .70);

  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 16px;

  /* Soft, layered shadows for depth */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, .02), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 12px 24px -6px rgba(0, 0, 0, .08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, .12), 0 8px 24px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 32px 64px -12px rgba(0, 0, 0, .14);

  /* Glass/Relief Highlights */
  --glass-border: 1px solid rgba(255, 255, 255, 0.65);
  --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 55%);
}

/* --- SCROLL REVEAL ANIMATIONS --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

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

a:hover {
  opacity: .9;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.page {
  min-height: 100vh;
}

.hide-sm {
  display: inline;
}

@media (max-width: 720px) {
  .hide-sm {
    display: none;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(10px);
}

.topbar__inner {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

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

.brand__logo {
  height: 52px;
  width: auto;
  display: block;
}

.brand__logoFallback {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.brand__logoFallback span {
  background: var(--primary);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 2px;
}

.brand__pill {
  height: 32px;
  width: 32px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__title {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand__sub {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(0, 0, 0, .55);
}

.topbar__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.hero {
  padding: 40px 0 18px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 28px;
  align-items: center;
}

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

.h1 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.h2 {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.accent {
  color: var(--primary);
}

.lead {
  margin: 12px 0 0;
  color: rgba(0, 0, 0, .62);
  font-size: 15px;
  line-height: 1.55;
}

.lead__strong {
  font-weight: 700;
  color: rgba(0, 0, 0, .80);
}

.stack {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.badgesLine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.section {
  padding: 32px 0;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 860px) {
  .section__head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.grid {
  display: grid;
  gap: 18px;
}

.grid--3 {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .9fr);
}

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

  .colSpan2 {
    order: 1;
  }
}

.colSpan2 {
  grid-column: span 2;
}

.row {
  display: flex;
  align-items: center;
}

.row--gap {
  gap: 12px;
}

.row--between {
  justify-content: space-between;
}

.grow {
  flex: 1;
  min-width: 0;
}

.muted {
  color: rgba(0, 0, 0, .55);
}

.tiny {
  font-size: 12px;
}

.price {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.card {
  border: var(--glass-border);
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  /* Top light for 3D relief */
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card--soft {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  /* Stronger blur */
  box-shadow: var(--shadow-md);
  /* Inner light */
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.card__title {
  font-weight: 800;
}

.card__sub {
  margin-top: 2px;
  color: rgba(0, 0, 0, .62);
  font-size: 13px;
}

.pill {
  height: 40px;
  width: 40px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
}

.pill--dark {
  background: var(--dark);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .80);
  font-size: 12px;
  font-weight: 600;
}

.badge--thin {
  padding: 6px 10px;
  font-weight: 600;
  font-size: 12px;
  background: rgba(255, 255, 255, .70);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .05s ease, filter .2s ease;
}

.btn:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
}

.btn:active {
  transform: scale(.98);
}

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn--dark {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}

.btn--outline {
  background: rgba(255, 255, 255, .85);
}

.wa-button-premium {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  gap: 12px;
  background-color: #25D366 !important;
  /* Fallback */
  background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #fff !important;
  /* Force white text */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 20px;
  padding: 14px 20px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  width: 100%;
  text-align: left;
}

.wa-button-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5);
  filter: brightness(1.05);
}

.wa-button-premium img {
  width: 32px;
  height: 32px;
  max-width: 32px;
  /* Safety */
  flex-shrink: 0;
}

/* ... */

@media (max-width: 640px) {

  /* ... */
  .wa-button-premium img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    /* Safety */
  }
}

.wa-button-premium__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.wa-button-premium__title {
  font-weight: 800;
  font-size: 16px;
}

.wa-button-premium__sub {
  font-size: 13px;
  opacity: 0.92;
  font-weight: 500;
}

.wa-button-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  gap: 8px;
  background-color: #25D366 !important;
  /* Fallback */
  background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #fff !important;
  /* Force white text */
  border-radius: 14px;
  -webkit-appearance: none;
  appearance: none;
  /* Matches premium button squarer look */
  padding: 8px 16px;
  /* Slightly larger for better touch target */
  text-decoration: none;
  font-weight: 800;
  /* Bolder text */
  font-size: 13px;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
  /* Stronger shadow */
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.wa-button-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5);
  filter: brightness(1.05);
}

.wa-button-compact img {
  width: 20px;
  height: 20px;
  max-width: 20px;
  /* Safety */
}

/* Pulse Animation */
@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .wa-button-premium {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    /* Reduced padding */
    animation: pulse-green 2s infinite;
  }

  .wa-button-premium img {
    width: 24px;
    /* Smaller logo on mobile */
    height: 24px;
  }

  .wa-button-premium__title {
    font-size: 15px;
    /* Slightly smaller text */
  }

  .wa-button-premium__sub {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .wa-button-compact {
    padding: 12px;
    /* Increased padding */
    font-size: 15px;
    /* Increased font size to match premium button */
    width: 100%;
    justify-content: center;
    border-radius: 14px;
  }

  .wa-button-compact img {
    width: 22px;
    /* Slightly larger icon */
    height: 22px;
  }

  /* Force the "bottom" button (standard btn) to match the top one exactly */
  .topbar__actions .btn {
    font-size: 15px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    width: 100%;
    justify-content: center;
  }
}

.w100 {
  width: 100%;
}

.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 12px;
  font: inherit;
  outline: none;
}

.input:focus {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .06);
}

.input--soft {
  background: rgba(15, 23, 42, .04);
}

.iphoneGlow {
  position: absolute;
  inset: -18px;
  border-radius: 44px;
  filter: blur(24px);
  opacity: .30;
  background: radial-gradient(circle at 30% 30%, var(--primary), transparent 60%);
  pointer-events: none;
}

.hero__right {
  position: relative;
  display: flex;
  justify-content: center;
}

.iphone {
  width: 320px;
}

.iphone__frame {
  border-radius: 44px;
  background: #000;
  padding: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.iphone__screen {
  border-radius: 36px;
  background: #000;
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 9/19.5;
  /* Prop open the container since videos are absolute */
}

/* View Toggle (Patient vs Doctor) */
.viewToggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  padding: 4px;
  border-radius: 99px;
  margin: 0 auto 24px;
  width: fit-content;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}

.viewToggle__opt {
  appearance: none;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  padding: 8px 16px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.viewToggle__opt:hover {
  color: rgba(0, 0, 0, 0.9);
}

.viewToggle__opt.is-active {
  background: #fff;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Dual Video Positioning */
.iphone__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Ensures full video visibility without cropping */
  background: #000;
  /* Black background for any letterboxing */
  display: block;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.iphone__video.is-visible {
  opacity: 1;
  z-index: 2;
}

.iphone__top {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.chatHead__avatar {
  height: 36px;
  width: 36px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.avatarFallback {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  background: rgba(91, 186, 213, .12);
  color: var(--dark);
}

.chatHead__title {
  font-weight: 900;
  font-size: 12px;
}

.chatHead__sub {
  font-size: 10px;
  color: rgba(0, 0, 0, .55);
}

.iphone__modes {
  padding: 10px 12px;
  background: rgba(15, 23, 42, .04);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

.chip {
  font: inherit;
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: filter .15s ease;
}

.chip:hover {
  filter: brightness(.98);
}

.chip.is-active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.chat {
  height: 420px;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bubbleRow {
  display: flex;
}

.bubbleRow.is-user {
  justify-content: flex-end;
}

.bubble {
  max-width: 78%;
  border-radius: 24px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.3;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, .04);
  color: rgba(0, 0, 0, .82);
}

.bubble.is-user {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.meta {
  margin-top: 7px;
  font-size: 10px;
  opacity: .78;
}

.iphone__input {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* iPhone demo input: más pequeño para que se vea como antes */
.iphone__input .input {
  font-size: 12px;
  padding: 9px 12px;
}

/* iPhone demo: ajusta tipografía + elimina el botón “Agendar” del header */
.iphone .chatHead__title {
  font-size: 11px;
}

.iphone .chatHead__sub {
  font-size: 9px;
}

/* Nota inferior del iPhone (aún más pequeña para que el teléfono se vea como antes) */
.iphone .tinyNote {
  font-size: 8px;
  line-height: 1.15;
}

/* Si el botón del header del iPhone usa .btn (ej. “Agendar”), lo ocultamos */
.iphone__top .btn,
.iphone__top a.btn,
.iphone__top button.btn {
  display: none !important;
}

.sendBtn {
  height: 40px;
  width: 40px;
  border-radius: 18px;
  border: 1px solid var(--dark);
  background: var(--dark);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform .05s ease, filter .2s ease;
}

.sendBtn:active {
  transform: scale(.98);
}

.sendBtn:hover {
  filter: brightness(1.03);
}

.tinyNote {
  padding: 0 12px 10px;
  font-size: 9px;
  line-height: 1.2;
  color: rgba(0, 0, 0, .45);
}

/* Extra compact en pantallas chicas */
@media (max-width: 520px) {
  .bubble {
    font-size: 11.5px;
  }

  .meta {
    font-size: 9.5px;
  }

  .chip {
    font-size: 10.5px;
  }

  .chatHead__title {
    font-size: 11.5px;
  }

  .chatHead__sub {
    font-size: 9.5px;
  }

  .iphone .chatHead__title {
    font-size: 11px;
  }

  .iphone .tinyNote {
    font-size: 8px;
  }
}

.toggle {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.toggle:hover {
  background: rgba(0, 0, 0, .015);
}

.toggle.is-on {
  border-color: rgba(91, 186, 213, .75);
  background: rgba(91, 186, 213, .06);
}

.toggle__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.toggle__icon {
  height: 40px;
  width: 40px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--dark);
}

.toggle.is-on .toggle__icon {
  background: var(--primary);
}

.toggle__title {
  font-weight: 800;
}

.toggle__desc {
  margin-top: 6px;
  color: rgba(0, 0, 0, .60);
  font-size: 13px;
}

.toggle__switch {
  margin-left: auto;
  height: 22px;
  width: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 2px;
  background: rgba(0, 0, 0, .08);
}

.toggle.is-on .toggle__switch {
  background: var(--primary);
  border-color: var(--primary);
}

.toggle__knob {
  height: 16px;
  width: 16px;
  border-radius: 999px;
  background: #fff;
  transition: transform .2s ease;
}

.toggle.is-on .toggle__knob {
  transform: translateX(18px);
}



.summaryBox {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, .85);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Cada fila: texto / precio */
.sumRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  font-size: 12px;
  line-height: 1.25;
  margin: 8px 0;
}

/* Texto del concepto */
.sumRow span,
.sumRow .muted {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Precio */
.sumRow strong {
  white-space: nowrap;
  font-weight: 900;
}

/* Separador */
.sumDivider {
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* TOTAL más grande */
/* TOTAL más grande */
.summaryBox .sumDivider+.sumRow {
  font-size: 13px;
  align-items: center;
}

.summaryBox .sumDivider+.sumRow span {
  font-weight: 800;
}

.summaryBox .sumDivider+.sumRow strong {
  font-size: 15px;
  /* Reduced to fit better */
  font-weight: 900;
  text-align: right;
}

@media (max-width: 520px) {
  .sumRow {
    font-size: 11px;
  }

  .summaryBox .sumDivider+.sumRow strong {
    font-size: 16px;
  }
}

.miniChecks {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: rgba(0, 0, 0, .58);
}

.miniChecks__accent {
  color: var(--primary);
  font-weight: 800;
  display: flex;
  gap: 8px;
  align-items: center;
}


/* ===== Journey header: evita recortes y fuerza wrap ===== */

/* ===== FIX EXACT LOOK – 5 PASOS (NO layout changes) ===== */

/* Quita cualquier subrayado, highlight o fondo azul del título */
.journeyHeading {
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Asegura texto limpio, sin pseudo-elementos */
.journeyHeading::before,
.journeyHeading::after {
  content: none !important;
  display: none !important;
}

/* Mantén exactamente el espaciado del diseño original */
.journeyHead {
  padding-bottom: 0 !important;
}

.journeyHead {
  /* padding interno del header dentro del card */
  padding: 18px 18px 0;
}

.journeyHeading {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;

  /* permitir salto de línea */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.journeyHead .muted {
  margin-top: 10px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.journeyGrid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;

  /* IMPORTANT: el card padre tiene overflow:hidden, así que necesitamos padding interno */
  padding: 16px 18px 18px;
}

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

@media (max-width: 720px) {
  .journeyHead {
    padding: 16px 16px 0;
  }

  .journeyGrid {
    padding: 14px 16px 16px;
  }

  .journeyHeading {
    font-size: 26px;
    line-height: 1.08;
  }

  .journeyHead .muted {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .journeyHeading {
    font-size: 24px;
  }
}

.journeyCard {
  border: var(--glass-border);
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: rgba(255, 255, 255, .90);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.journeyCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  background: rgba(255, 255, 255, .95);
  z-index: 2;
}

.journeyIcon {
  height: 40px;
  width: 40px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--dark);
}

.journeyCard:nth-child(2) .journeyIcon {
  background: var(--primary);
}

.journeyTitle {
  margin-top: 10px;
  font-weight: 900;
}

.journeyDesc {
  margin-top: 6px;
  color: rgba(0, 0, 0, .60);
  font-size: 13px;
}

.footer {
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(10px);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
  font-size: 12px;
  color: rgba(0, 0, 0, .55);
}

.footer__links {
  display: flex;
  gap: 14px;
}

.footer__links a:hover {
  color: rgba(0, 0, 0, .80);
}

/* Modal */
/* Modal (iOS blur + sombra premium) */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 60;
}

.modal.is-open {
  display: block;
}

/* Bloquea scroll del fondo cuando el modal está abierto */
html.modal-open,
html.modal-open body {
  height: 100%;
  overflow: hidden;
}

/* Evita “rebote”/scroll encimado en iOS */
html.modal-open body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 58, .45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal__wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  overflow: auto;
}

.modal__panel {
  width: min(980px, 100%);
  margin-top: 6vh;
  max-height: 92vh;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .80);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .25),
    0 12px 30px rgba(0, 0, 0, .12);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* permite que el body crezca/scroll */
}

.modal__head {
  padding: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.modal__title {
  font-weight: 900;
  font-size: 16px;
  padding-right: 64px;
  /* deja espacio real para la X */
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.modal__body {
  padding: 18px;
  overflow: auto;
  flex: 1;
  /* IMPORTANT: para que el contenido de pago se vea */
  min-height: 0;
  /* IMPORTANT: evita que colapse por flexbox */
}


/* Base para botones de icono (ej. cerrar modal) */
.iconBtn {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  width: 40px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, .18);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.iconBtn:hover {
  filter: brightness(.98);
}

.iconBtn:active {
  transform: scale(.98);
}

.modal__panel * {
  min-width: 0;
}

.modal__body .formGrid {
  width: 100%;
}

@media (max-width: 600px) {
  .modal__panel {
    border-radius: 22px;
  }

  .modal__body {
    min-height: 0;
  }
}

/* Modal content */
.formGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

.box {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: rgba(255, 255, 255, .85);
}

.field {
  display: grid;
  gap: 8px;
}

.field__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field__label {
  font-size: 13px;
  font-weight: 800;
}

.field__hint {
  font-size: 12px;
  color: rgba(0, 0, 0, .45);
}

textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 12px;
  font: inherit;
  outline: none;
}

textarea:focus {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .06);
}

.select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}

.checkRow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(0, 0, 0, .75);
}

.notice {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: rgba(0, 0, 0, .03);
  font-size: 13px;
  color: rgba(0, 0, 0, .75);
}

.okBox {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: rgba(255, 255, 255, .90);
}

.rightAlign {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Icons (mini SVG in CSS, ) */
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.i-arrow {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 5l7 7-7 7v-4H4v-6h9V5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 5l7 7-7 7v-4H4v-6h9V5z'/%3E%3C/svg%3E");
}

.i-chevron {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E");
}

.i-x {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.i-sparkles {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l1.2 5.2L18 9l-4.8 1.8L12 16l-1.2-5.2L6 9l4.8-1.8L12 2zm7 9l.7 3 2.3 1-2.3 1-.7 3-.7-3-2.3-1 2.3-1 .7-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l1.2 5.2L18 9l-4.8 1.8L12 16l-1.2-5.2L6 9l4.8-1.8L12 2zm7 9l.7 3 2.3 1-2.3 1-.7 3-.7-3-2.3-1 2.3-1 .7-3z'/%3E%3C/svg%3E");
}

.i-stethoscope {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h2v5a4 4 0 108 0V2h2v5a6 6 0 01-5 5.92V17a3 3 0 006 0v-1h2v1a5 5 0 01-10 0v-4.08A6 6 0 016 7V2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h2v5a4 4 0 108 0V2h2v5a6 6 0 01-5 5.92V17a3 3 0 006 0v-1h2v1a5 5 0 01-10 0v-4.08A6 6 0 016 7V2z'/%3E%3C/svg%3E");
}

.i-money {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1a11 11 0 1011 11A11 11 0 0012 1zm1 18h-2v-1.1a4.1 4.1 0 01-2.6-1.5l1.5-1.3a2.6 2.6 0 003.4.5 1.2 1.2 0 00-.5-2.1l-1.7-.5c-2.6-.7-3-2.2-3-3.2a3.4 3.4 0 013-3.2V5h2v1.1a4 4 0 012.3 1.1l-1.3 1.5a2.4 2.4 0 00-3-.2 1.2 1.2 0 00.4 2l1.7.5c2 .6 3.1 1.8 3.1 3.4A3.6 3.6 0 0113 17.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1a11 11 0 1011 11A11 11 0 0012 1zm1 18h-2v-1.1a4.1 4.1 0 01-2.6-1.5l1.5-1.3a2.6 2.6 0 003.4.5 1.2 1.2 0 00-.5-2.1l-1.7-.5c-2.6-.7-3-2.2-3-3.2a3.4 3.4 0 013-3.2V5h2v1.1a4 4 0 012.3 1.1l-1.3 1.5a2.4 2.4 0 00-3-.2 1.2 1.2 0 00.4 2l1.7.5c2 .6 3.1 1.8 3.1 3.4A3.6 3.6 0 0113 17.9z'/%3E%3C/svg%3E");
}

.i-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5L9 16.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5L9 16.2z'/%3E%3C/svg%3E");
}

.i-card {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6a3 3 0 013-3h12a3 3 0 013 3v1H3V6zm0 4h18v8a3 3 0 01-3 3H6a3 3 0 01-3-3v-8zm4 6h6v2H7v-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6a3 3 0 013-3h12a3 3 0 013 3v1H3V6zm0 4h18v8a3 3 0 01-3 3H6a3 3 0 01-3-3v-8zm4 6h6v2H7v-2z'/%3E%3C/svg%3E");
}

.i-clip {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.5 6.5l-7.8 7.8a3 3 0 104.2 4.2l7.8-7.8a5 5 0 10-7.1-7.1L6.6 10.6a7 7 0 109.9 9.9l6.4-6.4-1.4-1.4-6.4 6.4a5 5 0 11-7.1-7.1l6.9-6.9a3 3 0 014.2 4.2l-7.8 7.8a1 1 0 01-1.4-1.4l7.8-7.8-1.4-1.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.5 6.5l-7.8 7.8a3 3 0 104.2 4.2l7.8-7.8a5 5 0 10-7.1-7.1L6.6 10.6a7 7 0 109.9 9.9l6.4-6.4-1.4-1.4-6.4 6.4a5 5 0 11-7.1-7.1l6.9-6.9a3 3 0 014.2 4.2l-7.8 7.8a1 1 0 01-1.4-1.4l7.8-7.8-1.4-1.4z'/%3E%3C/svg%3E");
}

.i-headphones {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 00-9 9v6a3 3 0 003 3h2v-8H6v-1a6 6 0 0112 0v1h-2v8h2a3 3 0 003-3v-6a9 9 0 00-9-9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 00-9 9v6a3 3 0 003 3h2v-8H6v-1a6 6 0 0112 0v1h-2v8h2a3 3 0 003-3v-6a9 9 0 00-9-9z'/%3E%3C/svg%3E");
}

.i-shield {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l8 4v6c0 5-3.4 9.4-8 10-4.6-.6-8-5-8-10V6l8-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l8 4v6c0 5-3.4 9.4-8 10-4.6-.6-8-5-8-10V6l8-4z'/%3E%3C/svg%3E");
}

.i-calendar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h3V2zm15 8H2v12h20V10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h3V2zm15 8H2v12h20V10z'/%3E%3C/svg%3E");
}

.i-chat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

.i-settings {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.488.488 0 00-.59.22L2.85 8.87a.49.49 0 00.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.488.488 0 00-.59.22L2.85 8.87a.49.49 0 00.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
}

.i-rocket {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 9.87L7.91 7.1C7 8.46 6.22 9.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 2.69C8.81 3.63 7.03 4.9 5.69 6.29L10.59 11.19L12.81 13.41L17.71 18.31C19.1 16.97 20.37 15.19 21.31 13C23.73 7.34 21.61 2.39 21.61 2.39M14.5 7.5C14.5 6.4 15.4 5.5 16.5 5.5C17.6 5.5 18.5 6.4 18.5 7.5C18.5 8.6 17.6 9.5 16.5 9.5C15.4 9.5 14.5 8.6 14.5 7.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 9.87L7.91 7.1C7 8.46 6.22 9.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 2.69C8.81 3.63 7.03 4.9 5.69 6.29L10.59 11.19L12.81 13.41L17.71 18.31C19.1 16.97 20.37 15.19 21.31 13C23.73 7.34 21.61 2.39 21.61 2.39M14.5 7.5C14.5 6.4 15.4 5.5 16.5 5.5C17.6 5.5 18.5 6.4 18.5 7.5C18.5 8.6 17.6 9.5 16.5 9.5C15.4 9.5 14.5 8.6 14.5 7.5Z'/%3E%3C/svg%3E");
}

.i-bell {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
}

.i-lock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
}

.i-edit {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

.i-link {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
}


/* ===== servicios adicionales ===== */

/* Azul de títulos (como en la versión móvil) */
.toggle__title,
.toggle__title * {
  color: var(--addons-blue) !important;
}

/* texto mas grande */
.toggle__title {
  font-size: 16px;
  line-height: 1.35;
}

.toggle__desc {
  font-size: 14px;
  line-height: 1.45;
}

/* texto en pantallas grandes */
@media (min-width: 1024px) {
  .toggle__title {
    font-size: 17px;
  }

  .toggle__desc {
    font-size: 15px;
  }
}

/* Desplegable “Detalles / Ocultar” en Servicios adicionales */
.toggle [data-expander='1'] {
  cursor: pointer;
  user-select: none;
}

.toggle [data-expander='1']:hover {
  opacity: .85;
}

/* Cuando se muestra la descripción (la controla el JS con display:block/none)
   le damos look de “sección desplegable” */
.toggle__desc {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .62);
}

/* En web, que el texto no se vea enorme ni desborde */
@media (min-width: 769px) {
  .toggle__desc {
    font-size: 13px;
    line-height: 1.45;
  }
}

/* ===== FIX HEADER RESUMEN DE COMPRA (FINAL) ===== */
/* Objetivo:
   fix textos
*/

.summaryHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: nowrap;
}

/* Texto del resumen (izquierda) */
.summaryHead__text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.summaryHead__text .card__title {
  font-weight: 900;
  line-height: 1.15;
  margin: 0;
  white-space: normal;
}

.summaryHead__text .tiny {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Botón Checkout (derecha) */
.checkoutBtn {
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
  margin-left: auto;
}





/* =====================================================
   MOBILE ONLY – FIX FINAL (no afecta desktop)
   ===================================================== */
@media (max-width: 640px) {

  /* Más aire lateral en móvil (evita que todo quede al ras) */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---------- TOPBAR ---------- */
  .topbar__inner {
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
  }

  .topbar__actions,
  .topbar .actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .topbar__actions .btn,
  .topbar .actions .btn {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }


  /* ---------- RESUMEN DE COMPRA ---------- */
  .summaryHead {
    flex-wrap: wrap;
    gap: 8px;
  }

  .summaryHead__text {
    width: 100%;
  }

  .checkoutBtn {
    margin-left: auto;
    margin-top: 6px;
  }

  /* Caja y contenidos: que respiren y no se vean amontonados */
  .summaryBox {
    padding: 14px;
  }

  /* Lista de checks: un poco más de aire */
  .miniChecks {
    margin-top: 16px;
    gap: 10px;
    font-size: 13px;
    line-height: 1.35;
  }

  .miniChecks__accent {
    line-height: 1.25;
  }

  /* Botón "Comprar y configurar": bájalo (más separación arriba) */
  .miniChecks+.btn,
  .miniChecks+.btn.w100,
  .miniChecks~.btn,
  .miniChecks~.btn.w100 {
    margin-top: 18px;
  }

  /* ---------- SECTIONS (evita encimes en headers) ---------- */
  .section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .section__head .badge {
    align-self: flex-end;
    white-space: nowrap;
  }

  /* ---------- BADGES / ACTIONS (que respiren en móvil) ---------- */
  .badgesLine {
    gap: 10px;
  }

  .badgesLine .badge {
    flex: 1 1 auto;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .actions .btn {
    width: 100%;
  }

  /* ---------- MODAL (móvil: padding y grid a 1 columna) ---------- */
  .modal__wrap {
    padding: 12px;
  }

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

/* Botón "Ver detalles" mejorado */
.addonV2__detailsBtn {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* Borde sutil */
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  /* Efecto 3D simple */
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  /* Asegura que no rompa el flow */
  margin-top: 8px;
  display: inline-block;
  backdrop-filter: blur(4px);
}

.addonV2__detailsBtn:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  color: var(--primary);
  /* Highlight text on hover */
}

.addonV2__detailsBtn:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* iPhone chico */
@media (max-width: 420px) {
  .summaryHead__text .card__title {
    font-size: 16px;
  }

  .summaryHead__text .tiny {
    font-size: 11px;
  }
}



/* =========================================================
   RESPONSIVE SAFETY NET (no cambia el look, solo evita desbordes)
   ========================================================= */

/* Evita scroll horizontal por cualquier cosa rara */
html,
body {
  overflow-x: hidden;
}

/* Medios nunca rompen layout */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* Textos largos no empujan cards */
.card,
.toggle,
.box,
.journeyCard,
.modal__panel {
  overflow: hidden;
}

/* En grids/flex: permite encoger contenido */
.grid,
.hero__grid,
.grid--3,
.section__head,
.topbar__inner,
.summaryHead,
.toggle__row,
.row {
  min-width: 0;
}

/* Botones/pills no se desbordan en móvil */
.btn,
.badge,
.chip {
  max-width: 100%;
}

.btn {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .badge {
    white-space: normal;
  }

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

/* =====================================================
   DESKTOP ONLY – Reduce tamaños en Resumen de compra
   (NO afecta móvil)
   ===================================================== */
@media (min-width: 769px) {

  /* Card / padding general */
  .summaryCard {
    padding: 18px 18px 20px !important;
  }

  /* Header: título + subtítulo */
  .summaryCard .summaryHead__text .card__title {
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
  }

  .summaryCard .summaryHead__text .tiny {
    font-size: 13px !important;
    line-height: 1.25 !important;
    max-width: 38ch;
  }

  /* Botón/pill de Checkout */
  .summaryCard .checkoutBtn {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Caja interna */
  .summaryCard .summaryBox {
    margin-top: 14px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  /* Filas base/conversacional */
  .summaryCard .sumRow {
    font-size: 14px !important;
    line-height: 1.25 !important;
    gap: 12px !important;
    align-items: center;
  }

  .summaryCard .sumRow strong {
    font-size: 14px !important;
    font-weight: 900;
    white-space: nowrap;
  }

  /* TOTAL: evita que se parta "To tal" */
  .summaryCard .summaryBox .sumDivider+.sumRow {
    font-size: 18px !important;
    line-height: 1.05 !important;
    align-items: center;
  }

  .summaryCard .summaryBox .sumDivider+.sumRow span {
    font-weight: 900;
    white-space: nowrap;
  }

  .summaryCard .summaryBox .sumDivider+.sumRow strong {
    font-size: 22px !important;
    font-weight: 900;
    white-space: nowrap;
  }

  /* Texto azul + checks */
  .summaryCard .miniChecks__accent {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .summaryCard .miniChecks {
    margin-top: 16px !important;
    gap: 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* Botón final */
  .summaryCard #btnBuySidebar,
  .summaryCard .btn.w100 {
    margin-top: 18px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: 999px !important;
  }
}

/* =====================================================
   FINAL OVERRIDE (last wins)
   1) La X del modal SIEMPRE visible (aunque falle mask/icon)
   2) Títulos largos no rompen cajas en web
   ===================================================== */

/* ---- 1) Modal close: fuerza una “×” real y visible ---- */
.modal__head {
  position: relative !important;
}

#modalClose {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 9999 !important;

  width: 40px !important;
  height: 40px !important;
  border-radius: 16px !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid rgba(0, 0, 0, .18) !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;

  color: var(--ink) !important;
}

/* Oculta el icono por máscara si existe */
#modalClose .icon,
#modalClose .i-x {
  display: none !important;
}

/* Fallback universal: siempre pinta una “×” encima */
#modalClose::before {
  content: "×";
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}

/* ---- 2) Web: evita que títulos largos se salgan de cards/heads ---- */
@media (min-width: 769px) {

  .section__head,
  .section__head>div,
  .summaryHead,
  .summaryHead__text,
  .brand,
  .brand__text {
    min-width: 0;
  }

  .section__head .h2,
  .summaryHead__text .card__title {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* =====================================================
   ACTIVATION FORM (many questions) – UX fixes
   - better spacing
   - section cards
   - 2-column only on desktop
   - sticky actions inside modal
   ===================================================== */

/* Generic wrapper you can apply on the activation form container */
.activationForm {
  display: grid;
  gap: 14px;
}

.activationForm .sectionCard {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: rgba(255, 255, 255, .88);
}

.activationForm .sectionTitle {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.activationForm .sectionHint {
  margin: 0 0 12px;
  font-size: 12px;
  color: rgba(0, 0, 0, .55);
  line-height: 1.35;
}

/* Make long labels wrap nicely */
.activationForm label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, .82);
  line-height: 1.25;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.activationForm .help {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0, 0, 0, .52);
  line-height: 1.35;
}

/* Inputs inside activation form inherit your style */
.activationForm .input,
.activationForm textarea,
.activationForm .select {
  width: 100%;
}

/* Checkbox / radio rows that don't feel cramped */
.optList {
  display: grid;
  gap: 10px;
}

.optRow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: rgba(0, 0, 0, .78);
  line-height: 1.25;
}

.optRow input {
  margin-top: 2px;
}

/* 2-column ONLY on desktop for big forms */
@media (min-width: 900px) {
  .activationForm .twoCol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

/* Modal: sticky actions (so user doesn't scroll forever to submit) */
.modal__actions {
  position: sticky;
  bottom: 0;
  margin: 14px -18px -18px;
  /* match modal body padding */
  padding: 12px 18px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .modal__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .modal__actions .btn {
    width: 100%;
  }
}

/* =====================================================
   FIXES QUE FALTABAN (FORMULARIO + GRID)
   ===================================================== */

/* ---- grid--2 (no existía) ---- */
.grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

/* ---- Radios y checks del formulario ---- */
.radioGroup,
.checkGroup {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.radioGroup label,
.checkGroup label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 14px;
  background: rgba(255, 255, 255, .75);
  font-size: 13px;
  line-height: 1.25;
  color: rgba(0, 0, 0, .78);
}

.radioGroup input,
.checkGroup input {
  margin-top: 2px;
}

/* ---- Separadores dentro del modal ---- */
.modal__body hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .10);
  margin: 16px 0;
}

/* ---- Fallback / cuadro de pago cuando algo falla ---- */
.checkoutFallback {
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .80);
  padding: 16px;
}

.checkoutFallback__title {
  font-weight: 900;
  font-size: 15px;
}


.checkoutFallback__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 0, 0, .62);
}

/* ===== Fallback wrapper (para evitar que se encime con el checkout real) ===== */
#fallbackWrap {
  display: block;
}

#fallbackWrap[hidden] {
  display: none !important;
}


/* =====================================================
   Floating WhatsApp button (bottom-right)
   ===================================================== */
.waFloat {
  position: fixed;
  bottom: 18px;
  z-index: 99999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .10);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);

  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}

.waFloat:hover {
  filter: brightness(.98);
}

.waFloat__icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background-color: #25D366;

  /* WhatsApp logo (SVG) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M19.11 17.79c-.29-.15-1.7-.84-1.96-.93-.26-.1-.46-.15-.65.15-.19.29-.75.93-.92 1.12-.17.19-.34.22-.63.07-.29-.15-1.24-.46-2.36-1.47-.87-.78-1.46-1.75-1.63-2.04-.17-.29-.02-.45.13-.6.13-.13.29-.34.43-.51.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.51-.07-.15-.65-1.56-.89-2.14-.23-.55-.46-.48-.65-.49h-.55c-.19 0-.51.07-.78.36-.27.29-1.03 1-1.03 2.44s1.06 2.83 1.21 3.03c.15.19 2.08 3.17 5.05 4.45.71.31 1.26.49 1.69.62.71.23 1.35.2 1.86.12.57-.08 1.7-.69 1.94-1.35.24-.66.24-1.22.17-1.35-.07-.13-.26-.2-.55-.35z'/%3E%3Cpath fill='%23fff' d='M16 3C9.37 3 4 8.37 4 15c0 2.11.55 4.17 1.59 5.99L4 29l8.19-1.53A11.9 11.9 0 0016 27c6.63 0 12-5.37 12-12S22.63 3 16 3zm0 21.86c-1.8 0-3.56-.49-5.08-1.42l-.37-.22-4.87.91.92-4.75-.24-.39A9.85 9.85 0 016.14 15c0-5.45 4.42-9.86 9.86-9.86S25.86 9.55 25.86 15 21.45 24.86 16 24.86z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;

  /* Hide any leftover text */
  font-size: 0;
  line-height: 0;
}

.waFloat__text {
  white-space: nowrap;
}

/* Mobile: sólo el botón redondo */
@media (max-width: 520px) {
  .waFloat {
    bottom: 14px;
    padding: 10px;
  }

  .waFloat__text {
    display: none;
  }
}

/* ===== WhatsApp flotantes (izquierda y derecha) ===== */
.waFloat--contact {
  left: 18px;
  right: auto;
}

.waFloat--demo {
  right: 18px;
  left: auto;
}

@media (max-width: 520px) {
  .waFloat--contact {
    left: 14px;
  }

  .waFloat--demo {
    right: 14px;
  }
}

/* =====================================================
   HYBRID FORM (Desktop Accordion + Mobile Wizard)
   - Aplica al fallback form #activationForm dentro del modal
   ===================================================== */

#activationForm[data-enhanced="1"] .accWrap {
  display: grid;
  gap: 12px;
}

#activationForm[data-enhanced="1"] .accSec {
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .80);
  overflow: hidden;
}

#activationForm[data-enhanced="1"] .accHead {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .85);
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.01em;
}

#activationForm[data-enhanced="1"] .accHead .chev {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .10);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .75);
  flex: 0 0 auto;
}

#activationForm[data-enhanced="1"] .accBody {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

#activationForm[data-enhanced="1"] .accSec.is-collapsed .accBody {
  display: none;
}

/* Wizard UI (solo móvil) */
#activationForm[data-enhanced="1"] .wizTop {
  display: none;
  gap: 10px;
  margin-bottom: 12px;
}

#activationForm[data-enhanced="1"] .wizProgress {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  overflow: hidden;
}

#activationForm[data-enhanced="1"] .wizBar {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 999px;
  transition: width .25s ease;
}

#activationForm[data-enhanced="1"] .wizMeta {
  font-size: 12px;
  color: rgba(0, 0, 0, .55);
}

#activationForm[data-enhanced="1"] .wizNav {
  display: none;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 720px) {

  /* En móvil: wizard */
  #activationForm[data-enhanced="1"] .wizTop {
    display: grid;
  }

  #activationForm[data-enhanced="1"] .wizNav {
    display: flex;
  }

  #activationForm[data-enhanced="1"] .wizNav .btn {
    width: 100%;
  }

  /* En móvil ocultamos headers del acordeón y mostramos solo 1 sección */
  #activationForm[data-enhanced="1"] .accHead {
    display: none;
  }

  #activationForm[data-enhanced="1"] .accSec {
    display: none;
  }

  #activationForm[data-enhanced="1"] .accSec.is-active {
    display: block;
  }

  /* Nav pegado abajo dentro del modal */
  #activationForm[data-enhanced="1"] .wizNav {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 0 2px;
  }
}

/* =====================================================
   FINAL TOUCHES 
   - Acordeón: chevron gira + hover
   - Evitar recortes por overflow hidden
   - Móvil: padding menos agresivo
   ===================================================== */

/* 1) Acordeón: que el chevron gire al colapsar */
#activationForm[data-enhanced="1"] .accHead {
  transition: filter .15s ease;
}

#activationForm[data-enhanced="1"] .accHead:hover {
  filter: brightness(.98);
}

#activationForm[data-enhanced="1"] .accHead .chev {
  transition: transform .2s ease;
}

#activationForm[data-enhanced="1"] .accSec.is-collapsed .accHead .chev {
  transform: rotate(-90deg);
}

/* 2) Evita recortes sin romper bordes redondeados */
.card,
.toggle,
.box,
.journeyCard {
  overflow: hidden;
}

/* Permite que el texto se ajuste en vez de empujar el layout */
.card *,
.toggle *,
.box *,
.journeyCard *,
.summaryBox * {
  min-width: 0;
}

/* Mantén overflow hidden solo donde conviene */
.modal__panel {
  overflow: hidden;
}

.iphone__screen {
  overflow: hidden;
}

/* 3) Móvil: padding menos agresivo */

@media (max-width: 640px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =====================================================
   MISSING: Disabled buttons + Terms checkbox styling
   ===================================================== */

/* Botones deshabilitados (ej. Finalizar compra) */
.btn:disabled,
button.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn:disabled:hover,
button.btn:disabled:hover {
  filter: none;
  box-shadow: none;
}

/* CheckRow como “tarjetita” (para Términos y condiciones) */
.checkRow {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 14px;
  background: rgba(255, 255, 255, .75);

  font-size: 13px;
  color: rgba(0, 0, 0, .75);
  line-height: 1.25;
}

.checkRow input {
  margin-top: 2px;
}

/* En móvil: que no se pegue al borde dentro del modal */
@media (max-width: 520px) {
  .checkRow {
    padding: 10px 10px;
  }
}


/* =========================================
   FAQs section (accordion)
   ========================================= */

.faqSection .card {
  padding: 18px;
}

.faqGrid {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.faqItem {
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  overflow: hidden;
}

.faqQ {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 14px;
  background: rgba(255, 255, 255, .88);
  border: none;
  cursor: pointer;

  font: inherit;
  text-align: left;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.faqChevron {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .10);
  background: rgba(255, 255, 255, .75);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: transform .2s ease;
}

/* Fuerza mismo azul de móvil en web para FAQs */
.faqQ span {
  color: var(--addons-blue) !important;
}

.faqChevron {
  color: var(--addons-blue) !important;
}

.faqA {
  display: none;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .70);
  font-size: 13px;
  line-height: 1.45;
}

.faqItem.is-open .faqA {
  display: block;
}

.faqItem.is-open .faqChevron {
  transform: rotate(180deg);
}

@media (max-width: 720px) {
  .faqSection .card {
    padding: 16px;
  }
}


/* =====================================================
   Comprar y configurar (MODAL)
   1) Eliminar el cuadro de “¿Qué quieres que haga tu bot? (elige módulos)”
   2) WEB: intercambiar columnas (izquierda <-> derecha)
   3) MÓVIL: NO mover nada (solo ocultar el cuadro de módulos)
   Nota: aplica SOLO dentro del modal
   ===================================================== */

/* --- 1) Oculta el cuadro de módulos (WEB + MÓVIL) ---
   La UI de módulos normalmente es el primer .box del lado derecho (2do panel del grid).
   Dejamos varios selectores por si cambia el markup.
*/
.modal__body .formGrid>*:nth-child(2) .box:first-of-type,
.modal__body .formGrid>*:nth-child(2) #modulesBox,
.modal__body .formGrid>*:nth-child(2) #botModules,
.modal__body .formGrid>*:nth-child(2) .modulesBox,
.modal__body .formGrid>*:nth-child(2) .modules,
.modal__body .formGrid>*:nth-child(2) [data-modules],
.modal__body .formGrid>*:nth-child(2) [data-section="modules"] {
  display: none !important;
}

/* Si por alguna razón ese cuadro cae en el 1er panel, también lo ocultamos */
.modal__body .formGrid>*:nth-child(1) #modulesBox,
.modal__body .formGrid>*:nth-child(1) #botModules,
.modal__body .formGrid>*:nth-child(1) .modulesBox,
.modal__body .formGrid>*:nth-child(1) .modules,
.modal__body .formGrid>*:nth-child(1) [data-modules],
.modal__body .formGrid>*:nth-child(1) [data-section="modules"] {
  display: none !important;
}

/* Cuando se oculta el primer .box, quitamos el “hueco” que deja arriba */
.modal__body .formGrid>*:nth-child(2) .box+.box {
  margin-top: 0;
}

/* --- 2) WEB: intercambia columnas ---
   DOM 1 = columna izquierda original
   DOM 2 = columna derecha original
   Queremos: lo de la derecha a la izquierda y viceversa.
*/
@media (min-width: 921px) {
  .modal__body .formGrid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .modal__body .formGrid>* {
    order: 0;
  }

  .modal__body .formGrid>*:nth-child(1) {
    order: 2;
  }

  .modal__body .formGrid>*:nth-child(2) {
    order: 1;
  }
}

/* --- 3) MÓVIL: NO reordenar (solo 1 columna) --- */
@media (max-width: 920px) {
  .modal__body .formGrid {
    grid-template-columns: 1fr;
  }

  .modal__body .formGrid>* {
    order: 0;
  }
}

/* =====================================================
   WEB ONLY – Espacios y alineación (evita amontonado)
   No afecta móvil
   ===================================================== */
@media (min-width: 921px) {

  /* Más aire general en el bloque de servicios adicionales + resumen */
  .grid {
    gap: 22px;
  }

  .grid--3 {
    gap: 26px;
    align-items: start;
  }

  /* Columna izquierda (servicios) respira más */
  .colSpan2.stack {
    gap: 16px;
  }

  /* Tarjetas de servicios adicionales */
  .toggle {
    padding: 18px;
  }

  .toggle__row {
    gap: 14px;
  }

  .toggle__icon {
    flex: 0 0 auto;
  }

  .toggle__title {
    line-height: 1.25;
  }

  .toggle__desc {
    margin-top: 8px;
  }

  /* Resumen de compra: separaciones para que no se encime */
  .summaryCard {
    padding: 18px 18px 22px;
  }

  .summaryHead {
    gap: 14px;
  }

  .summaryBox {
    margin-top: 16px;
  }

  .miniChecks {
    margin-top: 16px;
    gap: 10px;
  }

  /* Botón final: un poco más abajo para que se vea ordenado */
  .summaryCard .btn.w100,
  .summaryCard #btnBuySidebar {
    margin-top: 20px !important;
  }

  /* Evita que textos largos empujen el layout */
  .toggle__title,
  .toggle__desc,
  .summaryHead__text .card__title,
  .summaryHead__text .tiny,
  .miniChecks div {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* =====================================================
   MODAL – Anti-freeze (definitivo & bulletproof)
   ===================================================== */

/* 1. ESTADO BASE (CERRADO): Invisible y NO interactivo */
.modal {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Enviar al fondo para que no tape nada */
  display: none;
  /* Oculto por defecto */
  visibility: hidden;
  /* Invisible para screen readers/mouse */
  pointer-events: none;
  /* Los clicks lo atraviesan */
  opacity: 0;
  /* Transparente */
}

/* 2. ESTADO ABIERTO: Visible e Interactivo */
.modal.is-open {
  display: block;
  z-index: 60;
  /* Traer al frente */
  visibility: visible;
  pointer-events: auto;
  /* Captura clicks */
  opacity: 1;
}

/* Seguridad extra: Si NO tiene la clase .is-open, forzamos ocultamiento */
.modal:not(.is-open) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: -1 !important;
}

/* 3. BACKDROP & WRAPPER */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 58, .45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
  /* El fondo captura clicks para cerrar */
}

.modal__wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  overflow: auto;
  pointer-events: auto;
  /* El contenido es interactivo */
  -webkit-overflow-scrolling: touch;
}

/* 4. PANEL DEL MODAL */
.modal__panel {
  width: min(980px, 100%);
  margin-top: 6vh;
  max-height: 92vh;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .80);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .25),
    0 12px 30px rgba(0, 0, 0, .12);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.modal__head {
  position: relative;
  padding: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.modal__title {
  font-weight: 900;
  font-size: 16px;
  padding-right: 64px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.modal__body {
  padding: 18px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* 5. BOTÓN DE CIERRE (Safety X) */
#modalClose {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, .18);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  /* Asegura que siempre sea clickeable si es visible */
}

/* Fallback visual por si falla el icono */
#modalClose .icon,
#modalClose .i-x {
  display: none !important;
}

#modalClose::before {
  content: "×";
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

/* 6. BLOQUEO DE SCROLL (Solo si modal abierto) */
html.modal-open,
html.modal-open body {
  height: 100%;
  overflow: hidden;
}

@media (max-width: 600px) {
  .modal__panel {
    border-radius: 22px;
  }

  .modal__wrap {
    padding: 12px;
  }
}

/* =====================================================
   Panel para el doctor – alinear bullets como los de arriba
   (solo estilo, sin tocar HTML/JS)
   ===================================================== */

.leadPro__panelList {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 12px;
}

.leadPro__panelList li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.45;
  color: rgba(0, 0, 0, .72);
  font-weight: 500;
}

/* Bolita + icono (mismo lenguaje visual que los bullets superiores) */
.leadPro__panelList li::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(91, 186, 213, .14);
  /* azul suave del brand */
  border: 1px solid rgba(0, 0, 0, .06);
  flex: 0 0 34px;

  /* icono centrado */
  display: inline-block;
  margin-top: 1px;

  /* el icono va por mask */
  background-color: rgba(91, 186, 213, .14);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 18px 18px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 18px 18px;
}

/* 1) Agenda diaria/semanal -> calendario */
.leadPro__panelList li:nth-child(1)::before {
  background-color: rgba(91, 186, 213, .14);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h3V2zm15 8H2v12h20V10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h3V2zm15 8H2v12h20V10z'/%3E%3C/svg%3E");
}

/* 2) Bloquea horarios -> pausa */
.leadPro__panelList li:nth-child(2)::before {
  background-color: rgba(91, 186, 213, .14);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 5h3v14H7V5zm7 0h3v14h-3V5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 5h3v14H7V5zm7 0h3v14h-3V5z'/%3E%3C/svg%3E");
}

/* 3) Cancela o mueve citas -> refresh */
.leadPro__panelList li:nth-child(3)::before {
  background-color: rgba(91, 186, 213, .14);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35A7.95 7.95 0 0012 4V1L7 6l5 5V7a5 5 0 11-5 5H5a7 7 0 107.75-6.93 7.1 7.1 0 014.9 1.28z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35A7.95 7.95 0 0012 4V1L7 6l5 5V7a5 5 0 11-5 5H5a7 7 0 107.75-6.93 7.1 7.1 0 014.9 1.28z'/%3E%3C/svg%3E");
}

/* Que los textos se alineen bonito en móviles también */
@media (max-width: 520px) {
  .leadPro__panelList {
    gap: 10px;
  }

  .leadPro__panelList li {
    gap: 10px;
  }

  .leadPro__panelList li::before {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    -webkit-mask-size: 17px 17px;
    mask-size: 17px 17px;
  }
}

/* =====================================================
   Panel para el doctor – override: mismo azul/tamaño que bullets superiores
   (solo estilo)
   ===================================================== */

/* Tamaño y look como los bullets de arriba */
.leadPro__panelList {
  gap: 10px;
}

.leadPro__panelList li {
  gap: 10px;
  align-items: flex-start;
}

.leadPro__panelList li::before {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border-radius: 999px !important;

  /* círculo suave */
  background: rgba(63, 133, 237, .10) !important;
  border: 1px solid rgba(63, 133, 237, .10) !important;

  /* color del icono (mask) */
  background-color: var(--addons-blue) !important;

  -webkit-mask-size: 16px 16px !important;
  mask-size: 16px 16px !important;
}

/* Mantén los mismos svg por línea (solo heredarán el nuevo azul) */
.leadPro__panelList li:nth-child(1)::before {
  background-color: var(--addons-blue) !important;
}

.leadPro__panelList li:nth-child(2)::before {
  background-color: var(--addons-blue) !important;
}

.leadPro__panelList li:nth-child(3)::before {
  background-color: var(--addons-blue) !important;
}

@media (max-width: 520px) {
  .leadPro__panelList li::before {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
    -webkit-mask-size: 16px 16px !important;
    mask-size: 16px 16px !important;
  }
}

/* =====================================================
   MOBILE – Add-ons como la 2da imagen
   - Quita el header duplicado (rojo)
   - Todo en 1 columna
   - Resumen primero, luego tarjetas
   ===================================================== */
@media (max-width: 640px) {

  /* ===== ADDONS – FIX DEFINITIVO MOBILE ===== */

  /* Oculta encabezado desktop */
  #addons .servicesHead--desktop {
    display: none !important;
  }

  /* Muestra encabezado móvil (el que debe ir en la zona roja) */
  #addons .servicesHead--mobile {
    display: block !important;
    width: 100%;
  }

  /* Fuerza layout vertical */
  #addons .grid.grid--3,
  #addons .grid--3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Orden exacto:
     1. Resumen
     2. Encabezado móvil
     3. Tarjetas / addons
  */
  #addons .summaryCard {
    order: 1 !important;
    width: 100% !important;
  }

  #addons .servicesHead--mobile {
    order: 2 !important;
  }

  #addons #addonList {
    order: 3 !important;
    width: 100% !important;
  }

  /* Neutraliza spans de grid */
  #addons .colSpan2,
  #addons .summaryCard {
    grid-column: auto !important;
  }

  /* Resumen sin recortes (móvil) */
  #addons .summaryCard,
  #addons .summaryBox {
    overflow: visible !important;
  }

  /* ===== Resumen de compra (móvil) – look web, sin recortes ===== */
  #addons .summaryCard,
  #addons .summaryCard.card {
    overflow: visible !important;
    /* pisa overflow hidden global */
    padding: 18px 16px 16px !important;
    border-radius: 24px !important;
  }

  #addons .summaryHead {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  #addons .summaryHead__text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #addons .summaryHead__text .card__title {
    font-size: 28px !important;
    line-height: 1.06 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    padding-top: 2px !important;
    /* evita recorte visual superior */
  }

  #addons .summaryHead__text .tiny.muted {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin-top: 8px !important;
    color: rgba(0, 0, 0, .55) !important;
  }

  #addons .checkoutBtn {
    white-space: nowrap !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    align-self: flex-start !important;
  }

  #addons .summaryBox {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    border-radius: 24px !important;
  }

  #addons .sumRow {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 10px 0 !important;
    gap: 12px !important;
    align-items: center !important;
  }

  #addons .sumRow strong,
  #addons .sumRow b {
    white-space: nowrap !important;
    font-weight: 900 !important;
  }

  #addons .summaryBox .sumDivider+.sumRow strong {
    font-size: 22px !important;
  }

  #addons .miniChecks {
    margin-top: 16px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    gap: 12px !important;
  }

  #addons #btnBuySidebar {
    width: 100% !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    margin-top: 16px !important;
  }
}

/* FIX: iPhone chico – mantener Resumen de compra como en web (solo #addons) */
@media (max-width: 420px) {
  #addons .summaryHead__text .card__title {
    font-size: 28px !important;
  }

  #addons .summaryHead__text .tiny.muted {
    font-size: 16px !important;
  }
}

/* =====================================================
   MODAL (MÓVIL) – Reorden + inputs de pago grandes
   Orden: 1) Summary 2) Config 3) Pay
   ===================================================== */
@media (max-width: 640px) {

  /* La grilla del modal (formGrid) se vuelve stack vertical */
  .modal__body .formGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Los wrappers de columnas no deben interferir en móvil */
  .modal__body .modalCol {
    display: contents !important;
  }

  /* Orden por sección */
  .modal__body .modalSec--summary {
    order: 1 !important;
  }

  .modal__body .modalSec--config {
    order: 2 !important;
  }

  .modal__body .modalSec--pay {
    order: 3 !important;
  }

  /* Inputs de pago con look “grande” (solo dentro de pago) */
  .modal__body .modalSec--pay .input,
  .modal__body .modalSec--pay input,
  .modal__body .modalSec--pay select {
    height: 52px !important;
    border-radius: 999px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }

  .modal__body .modalSec--pay textarea,
  .modal__body .modalSec--pay textarea.input {
    height: auto !important;
    min-height: 96px !important;
    border-radius: 22px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }

  /* Radios/checkbox tipo "acepto términos" */
  .modal__body .modalSec--pay .checkRow {
    border-radius: 16px !important;
    padding: 14px 14px !important;
  }
}

/* =========================================================
   Hero WhatsApp CTA (bullet redondo, menta marcado)
   ========================================================= */

.heroBullet {
  margin-top: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  /* ⬅️ píldora, como precio base */
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: all .18s ease;
  border: 1px solid transparent;
}

/* Menta Cognitia más marcado */
.heroBullet--wa {
  background: rgba(91, 186, 213, 0.22);
  border-color: rgba(91, 186, 213, 0.55);
}

.heroBullet--wa:hover {
  background: rgba(91, 186, 213, 0.30);
  transform: translateY(-1px);
}

/* Icono */
.heroBullet__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #5BBAD5;
  /* menta sólido */
  flex: 0 0 36px;
}

.heroBullet__icon .icon {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* Texto */
.heroBullet__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  color: rgba(0, 0, 0, .85);
}

.heroBullet__text strong {
  font-size: 14.5px;
  font-weight: 800;
}

.heroBullet__text span {
  font-size: 12.5px;
  color: rgba(0, 0, 0, .70);
}

/* ================================
   CTA final – Cancelar servicio
   ================================ */

.footerCancel {
  margin-top: 56px;
  margin-bottom: 32px;

  display: flex;
  justify-content: flex-end;
}

/* Botón cancelar servicio (NO flotante) */
.btnCancelWA {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 22px;
  border-radius: 999px;

  background: #2EC4B6;
  /* menta marcado */
  color: #0B2E2A;

  font-weight: 700;
  font-size: 14px;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  box-shadow: 0 6px 18px rgba(46, 196, 182, 0.35);
  transition: all 0.18s ease;
}

.btnCancelWA:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(46, 196, 182, 0.45);
}

/* Flechita opcional */
.btnCancelWA__chev {
  font-size: 16px;
  line-height: 1;
}

/* Responsive */
@media (max-width: 640px) {
  .footerCancel {
    justify-content: center;
    padding: 0 16px;
    /* Ensure padding on sides */
  }

  .btnCancelWA {
    width: 100%;
    justify-content: center;
    border-radius: 14px;
    /* Match top buttons */
    font-size: 15px;
    /* Match top buttons */
    padding: 12px;
    /* Match top buttons */
  }
}

/* ================================
   Mostrar SOLO el botón final
   ================================ */

/* Oculta cualquier botón cancelar que NO esté en footerCancel */
.btnCancelWA {
  display: none;
}

.footerCancel .btnCancelWA {
  display: inline-flex;
}

/* ===== Modal Términos y Condiciones ===== */
.termsModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.termsModal.hidden {
  display: none;
}

.termsBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}

.termsBox {
  position: relative;
  width: min(900px, 92vw);
  height: min(80vh, 90vh);
  background: #fff;
  margin: 5vh auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.termsFrame {
  width: 100%;
  height: 100%;
  border: none;
}

.termsClose {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #111;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
}

/* Botón Prueba Gratis (topbar) */
.btn--mint {
  background: #5BBAD5;
  /* azul menta CognitIA */
  color: #ffffff;
  border: none;
}

.btn--mint:hover {
  background: #4aa8c2;
}

/* ============================
   MOBILE: mover bot web debajo del badge
   ============================ */
@media (max-width: 640px) {

  .hero__grid {
    display: flex;
    flex-direction: column;
  }

  /* Badge arriba */
  .hero__left>.badge {
    order: 1;
  }

  /* Bot web justo después del badge */
  .hero__right {
    order: 2;
    margin: 16px 0 24px;
  }

  /* Resto del texto */
  .hero__left {
    order: 3;
  }

}