/* ==========================================================================
   VERSUS — contenido de suscripción incrustado en la home
   Copia escalada de css/system.css + css/pages.css, con cada selector bajo
   el envoltorio .sub-embed para que NO pueda tocar ni una sola regla del
   diseño ya aprobado de la home (que usa styles.css, un sistema aparte).
   Los 6 nombres de clase que sí coinciden con los de la home (badge, btn,
   btn--dark, btn--light, btn-row, cta) van renombrados aquí como
   embed-badge / embed-btn / embed-btn--dark / embed-btn--light /
   embed-btn-row / embed-cta.
   ========================================================================== */

/* Solo el corte Thin (100): nunca Light/Regular/Medium/Bold para esta familia. */
@font-face { font-family: "Awesome Serif"; src: url("../fonts/1-ExtraTallAwesomeSerif-Thin.woff") format("woff"); font-weight: 100; font-style: normal; font-display: swap; }

.sub-embed {
  --vs-bg:        #f6f6f6;
  --vs-white:     #ffffff;
  --vs-dark:      #27271d;
  --vs-panel:     #34332b;
  --vs-green:     #273328;
  --vs-blue:      #dfe9f2;
  --vs-sand:      #cfc6b8;
  --vs-cream:     #ece7df;
  --vs-ink:       #202317;
  --vs-accent:    #777e66;
  --vs-muted:     #757575;
  --vs-line:      rgba(39, 51, 40, 0.16);

  /* "Awesome Serif" (la .woff de arriba, corte Thin/100) es la familia
     completa (195 glifos) y la única fuente serif permitida en toda la
     landing page — nunca los .otf de la home (subsets del PDF original,
     insuficientes para texto nuevo: cualquier letra que falte cae a
     Georgia, letra por letra). */
  --vs-display: "Awesome Serif", Georgia, "Times New Roman", serif;
  --vs-text:    "DM Sans", Arial, sans-serif;

  --vs-r-badge:   15px;
  --vs-r-btn:     27px;
  --vs-r-card:    40px;
  --vs-r-card-lg: 60px;
  --vs-r-panel:   100px;

  --vs-container: 1240px;
  --vs-gutter:    clamp(26px, 6vw, 64px);
  --vs-section:   clamp(64px, 9vw, 128px);
  --vs-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: var(--vs-text);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--vs-ink);
}

/* --- reinicios locales, sólo dentro del envoltorio --- */
.sub-embed img { display: block; max-width: 100%; height: auto; }
.sub-embed a { color: inherit; }
.sub-embed ul { margin: 0; padding: 0; list-style: none; }
.sub-embed p { margin: 0 0 1em; }
.sub-embed p:last-child { margin-bottom: 0; }
.sub-embed h1, .sub-embed h2, .sub-embed h3, .sub-embed h4 {
  font-family: var(--vs-display);
  font-weight: 100;
  margin: 0;
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--vs-ink);
}

.sub-embed .wrap {
  width: 100%;
  max-width: var(--vs-container);
  margin: 0 auto;
  padding: 0 var(--vs-gutter);
}
.sub-embed .wrap--wide { max-width: 1420px; }
.sub-embed .section { padding: 0; }
.sub-embed .section--tight { padding: clamp(44px, 6vw, 82px) 0; }

.sub-embed .label {
  font-family: var(--vs-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-accent);
  margin: 0 0 14px;
}
.sub-embed .small { font-size: 13px; line-height: 1.5; }
.sub-embed .center { text-align: center; }

.sub-embed .plus li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}
.sub-embed .plus li + li { margin-top: 9px; }
.sub-embed .plus li::before {
  content: "+";
  position: absolute;
  left: 0; top: 0;
  color: var(--vs-accent);
}
.sub-embed .plus--sub { margin: 9px 0 0 20px; }

.sub-embed .minus li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vs-muted);
}
.sub-embed .minus li + li { margin-top: 8px; }
.sub-embed .minus li::before {
  content: "";
  position: absolute;
  left: 1px; top: 11px;
  width: 9px; height: 1px;
  background: currentColor;
}

/* --- botones / badge / fila de botones / CTA (renombrados) --- */

.sub-embed .embed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--vs-r-btn);
  font-family: var(--vs-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s var(--vs-ease);
}
.sub-embed .embed-btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.28s var(--vs-ease); }
.sub-embed .embed-btn:hover { transform: translateY(-2px); }
.sub-embed .embed-btn:hover svg { transform: translateX(5px); }

.sub-embed .embed-btn--dark  { background: var(--vs-dark); color: #fff; }
.sub-embed .embed-btn--dark:hover { background: #3d3d2e; }
.sub-embed .embed-btn--light { background: #fff; color: #000; }
.sub-embed .embed-btn--light:hover { background: var(--vs-sand); }
.sub-embed .btn--ghost { background: none; color: var(--vs-ink); box-shadow: inset 0 0 0 1px var(--vs-line); }
.sub-embed .btn--ghost:hover { background: var(--vs-ink); color: #fff; }
.sub-embed .btn--block { width: 100%; }

.sub-embed .embed-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-embed .btn-row--center { justify-content: center; }

.sub-embed .embed-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 15px 0 8px;
  border-radius: var(--vs-r-badge);
  background: var(--vs-blue);
  font-size: 14px;
  line-height: 1;
  color: #000;
}
.sub-embed .embed-badge img { width: 18px; height: 18px; }

/* --- suscripción --- */

.sub-embed .sub-hero { padding: clamp(40px, 5vw, 76px) 0 clamp(30px, 4vw, 54px); text-align: center; }
.sub-embed .sub-hero h1 {
  /* mismo tamaño y trazo que .hero__title-line de la home */
  font-family: var(--vs-display);
  font-weight: 100;
  letter-spacing: 0;
  color: #000;
  font-size: 65px;
  line-height: 74px;
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(22px, 2.6vw, 32px);
}
.sub-embed .sub-hero__sub {
  max-width: 630px;
  margin: 0 auto clamp(28px, 3.2vw, 40px);
  font-family: var(--work-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.2em;
}

.sub-embed .how {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}
.sub-embed .how__item {
  padding: clamp(26px, 2.8vw, 38px);
  background: #fff;
  border-radius: var(--vs-r-card);
  transition: transform 0.35s var(--vs-ease);
}
.sub-embed .how__item:hover { transform: translateY(-6px); }
.sub-embed .how__item .how__n {
  font-family: var(--vs-display);
  font-weight: 100;
  font-size: 40px;
  line-height: 1;
  color: var(--vs-sand);
  margin-bottom: 20px;
}
.sub-embed .how__item h3 { font-size: clamp(20px, 1.9vw, 25px); margin-bottom: 12px; }
.sub-embed .how__item p { font-size: 13px; line-height: 1.5; margin: 0; }

.sub-embed .switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 32px;
  background: #fff;
}
.sub-embed .switch button {
  padding: 13px 26px;
  border: 0;
  border-radius: 27px;
  background: none;
  font-family: var(--vs-text);
  font-weight: 300;
  font-size: 14px;
  color: var(--vs-ink);
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.28s ease;
}
.sub-embed .switch button[aria-selected="true"] { background: var(--vs-dark); color: #fff; }

.sub-embed .plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.sub-embed .plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 42px);
  background: #fff;
  border-radius: var(--vs-r-card);
  transition: transform 0.35s var(--vs-ease);
}
.sub-embed .plan:hover { transform: translateY(-6px); }
.sub-embed .plan--hero { background: var(--vs-dark); color: #fff; }
.sub-embed .plan--hero h3, .sub-embed .plan--hero .plan__price { color: #fff; }
.sub-embed .plan--hero .plus li::before { color: var(--vs-sand); }
.sub-embed .plan--hero .plan__unit, .sub-embed .plan--hero .plan__meta { color: rgba(255, 255, 255, 0.62); }

.sub-embed .plan__flag {
  position: absolute;
  top: 26px; right: 26px;
  padding: 6px 13px;
  border-radius: 13px;
  background: var(--vs-sand);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
}
.sub-embed .plan h3 { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 18px; }
.sub-embed .plan__price {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(38px, 3.6vw, 50px);
  line-height: 1;
  margin: 0;
}
.sub-embed .plan__unit { font-size: 12.5px; color: var(--vs-muted); margin: 8px 0 0; }
.sub-embed .plan__sep { height: 1px; background: var(--vs-line); margin: clamp(22px, 2.4vw, 30px) 0; }
.sub-embed .plan--hero .plan__sep { background: rgba(255, 255, 255, 0.18); }
.sub-embed .plan .plus { margin-bottom: clamp(26px, 3vw, 34px); }
.sub-embed .plan .embed-btn { margin-top: auto; }

/* AwesomeSerif ExtraTall (otro subconjunto de solo 25 letras del PDF
   original) tampoco sirve para texto nuevo. var(--vs-display) ya es en sí
   una familia de trazo alto/condensado, y siempre en su corte Light. */
.sub-embed .plans-title { font-family: var(--vs-display); font-weight: 100; }

/* --- Alcance: mismo diseño de tarjetas plegables que PROPUESTA-BRADING --- */
.sub-embed .scope-row {
  margin-top: clamp(20px, 2.4vw, 28px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.sub-embed .scope-row .section-title {
  grid-column: span 1;
  padding-top: 21px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--vs-display);
  font-weight: 100;
  font-size: clamp(30px, 4.2vw, 40px);
  line-height: 1;
  color: var(--vs-ink);
  margin: 0;
}
.sub-embed .scope-row .section-title::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: #000;
}
.sub-embed .dash-card { margin: 0; background: #fff; border-radius: var(--vs-r-card); }
.sub-embed .scope-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 34px 30px;
  border-radius: var(--vs-r-card);
}
.sub-embed .scope-card > summary::-webkit-details-marker { display: none; }
.sub-embed .scope__title {
  margin: 0;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--vs-muted);
}
.sub-embed .scope-card > summary::after {
  content: "+";
  font-size: 15px;
  line-height: 1;
  color: #000;
}
.sub-embed .scope-card[open] > summary::after { content: "\2212"; }
.sub-embed .scope-card > div { padding: 0 30px 34px; }
.sub-embed .scope-card .small { margin-top: 18px; }

/* --- video de la plataforma --- */
.sub-embed .platform-video {
  margin-top: clamp(40px, 5vw, 64px);
  padding: 0 clamp(24px, 6vw, 90px);
}
.sub-embed .platform-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(24px, 3vw, 40px);
}

/* --- Consideraciones: mismo título y mismas tarjetas plegables que Alcance --- */
.sub-embed .considerations { margin-top: clamp(40px, 5vw, 64px); }
.sub-embed .considerations-title {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--vs-display);
  font-weight: 100;
  font-size: clamp(30px, 4.2vw, 40px);
  line-height: 1;
  color: var(--vs-ink);
  margin: 0 0 20px;
}
.sub-embed .considerations-title::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: #000;
}
.sub-embed .considerations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.sub-embed .considerations-grid .scope-card > div p { font-size: 13px; line-height: 1.6; margin: 0; color: var(--vs-ink); }

.sub-embed .faq { display: grid; gap: 10px; max-width: 880px; margin: 0 auto; }
.sub-embed .acc { background: #fff; border-radius: 24px; overflow: hidden; }
.sub-embed .acc__head {
  display: flex; align-items: center; gap: 18px;
  width: 100%;
  padding: 24px clamp(22px, 2.6vw, 32px);
  border: 0; background: none;
  font-family: var(--vs-text); font-weight: 300;
  font-size: 16px; line-height: 1.35;
  color: var(--vs-ink); text-align: left; cursor: pointer;
}
.sub-embed .acc__head::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-left: auto;
  border-right: 1.5px solid var(--vs-accent);
  border-bottom: 1.5px solid var(--vs-accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--vs-ease);
}
.sub-embed .acc[data-open="true"] .acc__head::after { transform: rotate(-135deg) translate(-3px, -3px); }
.sub-embed .acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--vs-ease); }
.sub-embed .acc[data-open="true"] .acc__body { grid-template-rows: 1fr; }
.sub-embed .acc__body > div { overflow: hidden; }
.sub-embed .acc__body p { padding: 0 clamp(22px, 2.6vw, 32px) 26px; font-size: 14px; line-height: 1.6; margin: 0; }

.sub-embed .embed-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(40px, 5vw, 78px) clamp(30px, 4vw, 100px);
  background: var(--vs-dark);
  border-radius: clamp(32px, 4.6vw, 70px);
}
.sub-embed .embed-cta h2 { color: #fff; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; }
.sub-embed .embed-cta .embed-btn { flex: none; }

/* --- puntos de corte --- */
@media (max-width: 860px) {
  .sub-embed .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .sub-embed .scope-row { grid-template-columns: 1fr; }
  .sub-embed .scope-row .section-title { padding-top: 0; }
  .sub-embed .considerations-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sub-embed .embed-cta { justify-content: center; text-align: center; }
  .sub-embed .embed-cta .embed-btn { width: 100%; }
  .sub-embed .switch { width: 100%; }
  .sub-embed .switch button { flex: 1; padding: 13px 10px; font-size: 13px; }
  .sub-embed .sub-hero h1 { font-size: 40px; line-height: 1em; }
  .sub-embed .platform-video { padding: 0; }
}
@media (max-width: 1080px) {
  .sub-embed .how { grid-template-columns: 1fr; }
  .sub-embed .how__item h3 { font-size: 30px; }
}