/* Membresía START: composición clara con círculos y ondas, sin imágenes de fondo. */
.membership-start {
  --start-ink: #061d59;
  --start-blue: #0054ff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--start-ink);
  background:
    radial-gradient(ellipse at 17% 50%, #c4e5ff80, transparent 49%), #fff;
  padding: clamp(2rem, 4vw, 4rem) 0;
}
.membership-start::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 56vw;
  height: 56vw;
  max-width: 65rem;
  max-height: 65rem;
  top: 5%;
  left: -15%;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 40%, #8cc5f5aa, #e3f2ff 70%);
  border: clamp(2rem, 4vw, 5rem) solid #e7f4ff;
  box-shadow:
    0 0 0 0.1rem #fff,
    inset 0 0 0 0.1rem #fff;
}
.membership-start::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 24rem;
  height: 24rem;
  right: -13rem;
  top: -17rem;
  border-radius: 50%;
  background: #e7f4ff;
  box-shadow: -3rem 72rem 0 6rem #edf7ff;
}
.membership-start__layout {
  width: 94%;
  max-width: 100rem;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.membership-start__visual {
  position: relative;
  padding: 3rem 0;
}
.membership-start__visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -40%;
  bottom: 0;
  width: 140%;
  height: 45%;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff9, #badefa88);
  border-top: 0.15rem solid #fff;
  transform: rotate(16deg);
}
.membership-start__card {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.5rem 1rem #27377730);
}
.membership-start__content {
  min-width: 0;
}
.membership-start__brands {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: min(100%, 30rem);
  margin-bottom: 1rem;
}
.membership-start__brands img {
  width: 45%;
  max-height: 7rem;
  object-fit: contain;
}
.membership-start__brands > span {
  width: 0.1rem;
  height: 4.5rem;
  background: #9ca8b6;
}
.membership-start__badge {
  display: inline-block;
  border-radius: 2rem;
  background: #e0f2ff;
  color: var(--start-blue);
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}
.membership-start :is(h1, h2) {
  font-size: clamp(2rem, 3.9vw, 4.3rem);
  letter-spacing: -0.045em;
  line-height: 1.12;
  margin: 0.4rem 0;
}
.membership-start :is(h1, h2) > span {
  color: #ff5100;
}
.membership-start__intro {
  font-size: clamp(1rem, 1.5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
  color: #505b70;
}
.membership-start__pricing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.6rem 0;
  color: var(--start-blue);
}
.membership-start__pricing p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-weight: 700;
}
.membership-start__pricing strong {
  font-size: clamp(2.5rem, 3.6vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 1.2;
}
.membership-start__pricing del {
  position: relative;
  border-left: 0.1rem solid #bac3ce;
  padding-left: 1rem;
  color: #a6a6ac;
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 700;
  text-decoration-color: #ff4681;
  text-decoration-thickness: 0.12rem;
}
.membership-start__pricing small {
  font-size: 0.7em;
}
.membership-start__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.membership-start__benefits ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
}
.membership-start__benefit {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem;
  border: 0.0625rem solid #e5f3ff;
  border-radius: var(--radius-md);
  background: linear-gradient(110deg, #fff, #fafcff);
  box-shadow: 0 0.3rem 1.4rem #3d9aec10;
  font-size: clamp(0.72rem, 0.9vw, 0.95rem);
  line-height: 1.2;
}
.membership-start__benefit strong {
  display: block;
  font-weight: 700;
}
.membership-start__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e4f3ff;
  color: #003bff;
  font-size: 1.5rem;
}
.membership-start__value {
  align-self: start;
  border-radius: 2rem;
  padding: 0.4rem 0.5rem;
  background: #e1f2ff;
  color: #0036db;
  font-weight: 700;
  white-space: nowrap;
  font-size: 0.78em;
}
.membership-start__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: min(100%, 28rem);
  margin: 0.8rem auto 0;
  border-radius: 4rem;
  padding: 0.7rem 1.5rem;
  background: linear-gradient(110deg, #ffae00, #ff4a00);
  box-shadow: 0 1rem 2rem #ff610025;
  color: #fff;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 700;
  text-decoration: none;
}
.membership-start__buy:hover {
  filter: brightness(1.06);
}
.membership-start a:focus-visible {
  outline: 0.2rem solid var(--start-blue);
  outline-offset: 0.3rem;
}
/* Tablet y móvil: apilar sin comprimir texto ni recortar la tarjeta. */
@media (max-width: 75rem) {
  .membership-start__layout {
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr);
  }
  .membership-start__benefit {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }
  .membership-start__value {
    grid-column: 2;
    justify-self: start;
  }
}
@media (max-width: 56rem) {
  .membership-start__layout {
    grid-template-columns: 1fr;
    max-width: 44rem;
  }
  .membership-start__visual {
    width: min(80%, 26rem);
    margin: auto;
    padding: 0;
  }
  .membership-start::before {
    width: 45rem;
    height: 45rem;
    left: -22rem;
    top: -12rem;
  }
  .membership-start__brands {
    margin: 0 auto 1.2rem;
  }
  .membership-start :is(h1, h2) {
    font-size: clamp(2rem, 6vw, 3.5rem);
  }
}
@media (max-width: 36rem) {
  .membership-start__benefits {
    grid-template-columns: 1fr;
  }
  .membership-start__benefit {
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    font-size: 0.87rem;
  }
  .membership-start__value {
    grid-column: auto;
  }
  .membership-start__pricing {
    gap: 0.6rem;
  }
}

/* PREMIUM muestra contenido a la izquierda y tarjeta a la derecha en escritorio.
   Hereda los puntos de adaptación a tablet y móvil de la primera sección. */
.membership-start--premium {
  --start-blue: #1765df;
  background:
    radial-gradient(ellipse at 15% 50%, #c4dcff80, transparent 55%), #f8fbff;
  border-top: 0.0625rem solid #dcecff;
}
.membership-start--premium :is(h1, h2) > span {
  color: #1765df;
}
.membership-start--premium .membership-start__buy {
  background: linear-gradient(110deg, #3e8bff, #0753d7);
  box-shadow: 0 1rem 2rem #1765df25;
}
.membership-start--premium .membership-start__benefit p {
  font-weight: 400;
}
.membership-start--premium .membership-start__benefit strong {
  font-weight: 600;
}
/* Los campos pendientes no dejan huecos ni muestran precios ficticios. */
.membership-start__benefit:not(:has(.membership-start__value)) {
  grid-template-columns: 2.6rem minmax(0, 1fr);
}

/* START: acentos morados de su tarjeta, limitados a esta membresía. */
.membership-start[data-membership="start"] {
  --start-blue: #8617d8;
}
.membership-start[data-membership="start"] :is(h1, h2) > span {
  color: #8617d8;
}
.membership-start[data-membership="start"] .membership-start__badge,
.membership-start[data-membership="start"] .membership-start__icon,
.membership-start[data-membership="start"] .membership-start__value {
  color: #7410c5;
  background: #f2e6fc;
}
.membership-start[data-membership="start"] .membership-start__benefit {
  border-color: #eeddfb;
  background: linear-gradient(110deg, #fff, #fcf9ff);
  box-shadow: 0 0.3rem 1.4rem #8617d810;
}
.membership-start[data-membership="start"] .membership-start__buy {
  background: linear-gradient(110deg, #b32ed5, #7410c5);
  box-shadow: 0 1rem 2rem #8617d825;
}
.membership-start[data-membership="start"] .membership-start__pricing del {
  text-decoration-color: #b32ed5;
}
/* Invertir únicamente las columnas de PREMIUM; en móvil conserva tarjeta arriba. */
@media (min-width: 56.001rem) {
  .membership-start--premium .membership-start__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  .membership-start--premium .membership-start__content {
    grid-column: 1;
    grid-row: 1;
  }
  .membership-start--premium .membership-start__visual {
    grid-column: 2;
    grid-row: 1;
  }
  .membership-start--premium::before {
    left: auto;
    right: -15%;
  }
  .membership-start--premium .membership-start__visual::before {
    left: auto;
    right: -40%;
    transform: rotate(-16deg);
  }
}
@media (min-width: 56.001rem) and (max-width: 75rem) {
  .membership-start--premium .membership-start__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
  }
}

/* PREMIUM PLUS: colores cálidos de su tarjeta; conserva la distribución base y responsive. */
.membership-start--premium-plus {
  --start-blue: #d8461d;
  background:
    radial-gradient(ellipse at 17% 50%, #ffe1c780, transparent 55%), #fffaf7;
  border-top: 0.0625rem solid #ffe2d2;
}
.membership-start--premium-plus::before {
  background: radial-gradient(circle at 55% 40%, #ffba8080, #fff0e5 70%);
  border-color: #fff0e5;
}
.membership-start--premium-plus::after {
  background: #fff0e5;
  box-shadow: -3rem 72rem 0 6rem #fff4ec;
}
.membership-start--premium-plus .membership-start__visual::before {
  background: linear-gradient(160deg, #fff9, #ffd9bd88);
}
.membership-start--premium-plus :is(h1, h2) > span {
  color: #ef501d;
}
.membership-start--premium-plus .membership-start__badge,
.membership-start--premium-plus .membership-start__icon,
.membership-start--premium-plus .membership-start__value {
  color: #c84016;
  background: #ffecdf;
}
.membership-start--premium-plus .membership-start__benefit {
  border-color: #ffe4d4;
  background: linear-gradient(110deg, #fff, #fffaf7);
  box-shadow: 0 0.3rem 1.4rem #ff653f10;
}
.membership-start--premium-plus .membership-start__buy {
  background: linear-gradient(110deg, #ff8b2e, #f4434f);
  box-shadow: 0 1rem 2rem #ff653f25;
}
.membership-start--premium-plus .membership-start__pricing del {
  text-decoration-color: #f4434f;
}

/* Paquete web: paleta celeste, cian y azul marino de la referencia. */
.membership-start--site {
  --start-ink: #071d56;
  --start-blue: #007fd3;
  background:
    radial-gradient(ellipse at 82% 50%, #9fefff80, transparent 60%),
    linear-gradient(110deg, #f5fdff, #effcff);
}
.membership-start--site::before {
  background: radial-gradient(circle at 55% 40%, #7ee5f599, #d7f9fd 70%);
  border-color: #c9f6fc;
}
.membership-start--site::after {
  left: -13rem;
  right: auto;
  background: #ddfaff;
  box-shadow: 3rem 72rem 0 6rem #e0faff;
}
.membership-start--site .membership-start__visual::before {
  background: linear-gradient(160deg, #fff9, #9ceaf588);
}
.membership-start--site :is(h1, h2) > span {
  color: #007fd3;
}
.membership-start--site .membership-start__brands {
  width: min(100%, 25rem);
}
.membership-start--site .membership-start__brands img {
  width: 75%;
}
.membership-start--site .membership-start__card {
  filter: drop-shadow(0 1rem 1.5rem #009bd520);
}
.membership-start--site .membership-start__badge {
  color: #07316c;
  background: #c8f7fc;
}
.membership-start--site .membership-start__icon {
  color: #009ed7;
  background: #d9f6ff;
}
.membership-start--site .membership-start__value {
  color: #0061ba;
  background: #d9f6ff;
}
.membership-start--site .membership-start__benefit {
  border-color: #e5faff;
  background: linear-gradient(110deg, #fff, #f6fdff);
  box-shadow: 0 0.3rem 1.4rem #00afe510;
}
.membership-start--site .membership-start__buy {
  background: linear-gradient(110deg, #00c4dc, #005bdd);
  box-shadow: 0 1rem 2rem #00bddd30;
}
.membership-start--site .membership-start__pricing {
  color: var(--start-ink);
}
.membership-start--site .membership-start__pricing del {
  color: #909caa;
  text-decoration-color: #909caa;
}
/* Alternancia de escritorio: contenido izquierdo y tarjeta/fondo a la derecha.
   En móvil se conserva una columna con la imagen encima del contenido. */
@media (min-width: 56.001rem) {
  .membership-start--site .membership-start__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  .membership-start--site .membership-start__content {
    grid-column: 1;
    grid-row: 1;
  }
  .membership-start--site .membership-start__visual {
    grid-column: 2;
    grid-row: 1;
  }
  .membership-start--site::before {
    left: auto;
    right: -15%;
  }
  .membership-start--site .membership-start__visual::before {
    left: auto;
    right: -40%;
    transform: rotate(-16deg);
  }
}
@media (min-width: 56.001rem) and (max-width: 75rem) {
  .membership-start--site .membership-start__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
  }
}

/* Directorio 365 conserva su identidad verde y la tarjeta en la columna izquierda. */
.membership-start--directory {
  --start-blue: #107c6d;
  background:
    radial-gradient(ellipse at 17% 50%, #c6eee580, transparent 55%), #fafffd;
}
.membership-start--directory::before {
  background: radial-gradient(circle at 55% 40%, #84d4c580, #e3f6ef 70%);
  border-color: #e7f8f1;
}
.membership-start--directory::after {
  background: #e7f8f1;
  box-shadow: -3rem 72rem 0 6rem #edf9f4;
}
.membership-start--directory .membership-start__visual::before {
  background: linear-gradient(160deg, #fff9, #b5e5d888);
}
.membership-start--directory :is(h1, h2) > span {
  color: #107c6d;
}
.membership-start--directory .membership-start__badge,
.membership-start--directory .membership-start__icon,
.membership-start--directory .membership-start__value {
  color: #107c6d;
  background: #dff5ec;
}
.membership-start--directory .membership-start__benefit {
  border-color: #d8eee5;
  background: linear-gradient(110deg, #fff, #f7fcf9);
  box-shadow: 0 0.3rem 1.4rem #159b8810;
}
.membership-start--directory .membership-start__buy {
  background: linear-gradient(110deg, #159b88, #107c6d);
  box-shadow: 0 1rem 2rem #159b8825;
}
.membership-start--directory .membership-start__pricing del {
  text-decoration-color: #159b88;
}
.membership-start--directory .membership-start__brands {
  width: min(100%, 25rem);
}
.membership-start--directory .membership-start__brands img {
  width: 75%;
}

/* Identidad con nombre debajo del símbolo; conserva el ancho de cada logo de la alianza. */
.membership-start__brand { display:flex; flex-direction:column; align-items:center; justify-content:center; width:45%; min-width:0; }
.membership-start__brands .membership-start__brand img { width:100%; max-height:7rem; object-fit:contain; }
.membership-start__brand-name { color:#07316c; font-size:clamp(1.1rem,2vw,1.7rem); font-weight:800; line-height:1.1; margin-top:.25rem; letter-spacing:-.04em; }
.membership-start__brands > .membership-start__brand-by { width:auto; height:auto; flex-shrink:0; background:none; color:#62728b; font-size:.9rem; font-style:italic; }
.membership-start__brands--single .membership-start__brand { width:75%; }
/* START: el fondo y las ondas acompañan los acentos morados de la tarjeta. */
.membership-start[data-membership="start"] { background:radial-gradient(ellipse at 17% 50%,#e7c8fa80,transparent 55%),#fdf9ff; }
.membership-start[data-membership="start"]::before { background:radial-gradient(circle at 55% 40%,#cf9bea80,#f2e5fc 70%); border-color:#f3e8fd; }
.membership-start[data-membership="start"]::after { background:#f3e8fd; box-shadow:-3rem 72rem 0 6rem #f7effd; }
.membership-start[data-membership="start"] .membership-start__visual::before { background:linear-gradient(160deg,#fff9,#dfbdf488); }
/* Solo el logo individual pierde el espacio sobrante en móvil. */
@media(max-width:56rem) {
  .membership-start .membership-start__brands--single { width:100%; margin:.25rem 0 1rem; justify-content:center; }
  .membership-start__brands--single .membership-start__brand { width:8.5rem; }
  .membership-start__brands--single .membership-start__brand img { height:3.75rem; width:100%; }
  .membership-start__brands--single .membership-start__brand-name { font-size:1.35rem; }
}

/* Mismo peso tipográfico en todas las tarjetas: encabezado destacado y explicación normal. */
.membership-start .membership-start__benefit p { font-weight:400; }
.membership-start .membership-start__benefit strong { font-weight:700; }