/* SAC GYM · Precios, diseño 2 (como las tarjetas de Followapp, en blanco, naranja y negro). Prefijo sgp2-. */

/* Lo original de Elementor queda en la página, oculto; la sección usa su propio fondo y márgenes. */
.elementor-element.sgp-on > :not(.sgp-wrap) { display: none !important; }
.elementor-element.sgp2-on {
  padding: 92px 24px 96px !important;
  background: linear-gradient(180deg, #fff8f0 0%, #fffdf9 100%) !important;
}

.sgp2 {
  --o: #f7941d;
  --o-l: #ffb35c;
  --o-d: #a65300;
  --o-bg: #fff3e3;
  --ink: #141414;
  --mut: #5c5c5c;
  --line: #efe6da;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  word-spacing: normal;
  color: var(--ink);
  text-align: left;
}
.sgp2 *, .sgp2 *::before, .sgp2 *::after { box-sizing: border-box; }
.sgp2 :where(p, h2, h3, h4, ul, li, figure, figcaption, blockquote) { margin: 0; padding: 0; font-style: normal; }
.sgp2 :where(p) { line-height: 1.45; }
.sgp2 :where(ul) { list-style: none; }
.sgp2 svg { display: block; flex: none; }

/* Encabezado */
.sgp2-head { max-width: 700px; margin: 0 auto 48px; text-align: center; }
.sgp2 h2.sgp2-title { font: 800 40px/1.15 Roboto, sans-serif !important; letter-spacing: -.02em !important; color: var(--ink) !important; }
.sgp2 p.sgp2-sub { margin-top: 14px; font-size: 17.5px; line-height: 1.55; color: var(--mut); }
.sgp2-sub b { font-weight: 700; color: var(--ink); }

/* Tarjetas de los planes */
.sgp2-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sgp2-plan {
  display: flex;
  flex-direction: column;
  padding: 28px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 22px 44px -30px rgba(120, 60, 0, .35);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sgp2-plan:hover { border-color: var(--o); transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 30px 54px -30px rgba(170, 85, 0, .5); }

.sgp2-top { display: flex; align-items: center; gap: 14px; }
.sgp2-ico { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--o-bg); color: var(--o-d); }
.sgp2-ico svg { width: 26px; height: 26px; }
.sgp2 h3.sgp2-name { font: 800 21px/1.2 Roboto, sans-serif !important; letter-spacing: -.01em !important; color: var(--ink) !important; text-transform: none; }
.sgp2 p.sgp2-for { margin-top: 3px; font-size: 14.5px; color: var(--mut); }

.sgp2-price { display: flex; align-items: flex-start; gap: 6px; margin-top: 24px; color: var(--ink); }
.sgp2 .sgp-cur { margin-top: 9px; font: 700 19px/1 Roboto, sans-serif; color: var(--o-d); }
.sgp2-price b { font: 800 58px/1 Roboto, sans-serif; letter-spacing: -.035em; }
.sgp2 p.sgp2-per { margin-top: 7px; font-size: 14.5px; color: var(--mut); }
.sgp2 p.sgp2-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 11px 5px 8px; border-radius: 999px; background: var(--o-bg); font: 600 12.5px/1.2 Roboto, sans-serif; color: #8a4500; }
.sgp2-pill svg { width: 14px; height: 14px; stroke-width: 3; }

/* Caja "Incluye" */
.sgp2-box { margin-top: 20px; padding: 14px 16px 16px; border: 1px solid #f6dcb9; border-radius: 16px; background: #fffaf3; }
.sgp2 p.sgp2-box-k { font: 700 11px/1.2 Roboto, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--o-d); }
.sgp2-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.sgp2-row-ico { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--o); color: #111; box-shadow: 0 8px 16px -10px rgba(200, 100, 0, .9); }
.sgp2-row-ico svg { width: 20px; height: 20px; }
.sgp2-row b { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.sgp2-row span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--mut); }
.sgp2-extra { margin-top: 12px !important; }
.sgp2-extra li { display: flex; gap: 8px; font-size: 14px; line-height: 1.4; }
.sgp2-extra svg { width: 16px; height: 16px; margin-top: 2px; color: var(--o-d); }

/* Botones */
.sgp2 a.sgp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border-radius: 14px;
  background: var(--o);
  font: 700 17px/1 Roboto, sans-serif;
  color: #111 !important;
  text-decoration: none !important;
  box-shadow: 0 14px 26px -14px rgba(230, 120, 0, .95);
  transition: background .2s ease, transform .2s ease;
}
.sgp2 a.sgp-cta:hover { background: var(--o-l); transform: translateY(-1px); }
.sgp2 a.sgp-cta svg { width: 21px; height: 21px; }
.sgp2 a.sgp2-cta { margin-top: 20px; }
.sgp2 p.sgp2-note { margin-top: 8px; text-align: center; font-size: 12.5px; color: #8a8580; }

/* Funciones dentro de la tarjeta */
.sgp2-feats { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.sgp2 p.sgp2-count { font-size: 14px; color: var(--mut); }
.sgp2-count b { font-weight: 800; color: var(--o-d); }
.sgp2-group { margin-top: 14px; }
.sgp2 p.sgp2-group-name { display: flex; align-items: center; gap: 7px; font: 700 11.5px/1.2 Roboto, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--o-d); }
.sgp2-group-name svg { width: 15px; height: 15px; }
.sgp2-group ul { display: grid; gap: 7px; margin-top: 9px !important; }
.sgp2-group li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.4; color: #2b2b2b; }
.sgp2-group li svg { width: 16px; height: 16px; margin-top: 2px; padding: 2px; border-radius: 50%; background: var(--o-bg); color: var(--o-d); stroke-width: 3.2; }
/* Plegadas solo si hay JavaScript para desplegarlas. */
.sgp2.sgp2-js .sgp2-feats:not(.is-open) {
  max-height: 212px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.sgp2 button.sgp2-more { display: none; }
.sgp2.sgp2-js button.sgp2-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--o-bg) !important;
  font: 700 14.5px/1.2 Roboto, sans-serif !important;
  color: #8a4500 !important;
  cursor: pointer;
}
.sgp2.sgp2-js button.sgp2-more:hover { background: #ffe6c7 !important; }
.sgp2-more svg { width: 17px; height: 17px; transition: transform .2s ease; }
.sgp2-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Agente IA: panel negro */
.sgp2-ai {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 44px;
  margin-top: 36px;
  padding: 44px;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(circle at 100% 0, rgba(247, 148, 29, .24), transparent 45%), radial-gradient(circle at 0 100%, rgba(247, 148, 29, .1), transparent 40%), #111;
  color: #e6e6e6;
}
.sgp2 p.sgp2-ai-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(247, 148, 29, .16); font: 700 12px/1 Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--o-l); }
.sgp2-ai-eyebrow svg { width: 16px; height: 16px; }
.sgp2 h3.sgp2-ai-title { margin-top: 16px; font: 800 30px/1.2 Roboto, sans-serif !important; letter-spacing: -.01em !important; color: #fff !important; }
.sgp2 p.sgp2-ai-sub { margin-top: 10px; font-size: 16px; line-height: 1.5; color: #b9b9b9; }
.sgp2-ai-list { display: grid; gap: 12px; margin-top: 22px !important; }
.sgp2-ai-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.5; color: #e2e2e2; }
.sgp2-ai-list svg { width: 19px; height: 19px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--o); color: #111; stroke-width: 3.4; }

.sgp2-ai-side { display: grid; align-content: center; gap: 18px; }
.sgp2-chat { padding: 14px 16px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .05); }
.sgp2-chat-top { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #a8a8a8; }
.sgp2-chat-top b { color: #fff; }
.sgp2-chat-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--o); color: #111; }
.sgp2-chat-av svg { width: 17px; height: 17px; }
.sgp2 p.sgp2-chat-k { margin-top: 12px; font: 700 12px/1.2 Roboto, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--o-l); }
.sgp2 blockquote.sgp2-bubble { margin-top: 8px; padding: 12px 15px; border: 0; border-radius: 4px 16px 16px 16px; background: #fff; font-size: 15px; font-style: normal; line-height: 1.45; color: var(--ink); }

.sgp2-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sgp2-pack { display: flex; flex-direction: column; padding: 18px; border-radius: 18px; background: #fff; color: var(--ink); }
.sgp2 p.sgp2-pack-k { font: 700 11px/1.2 Roboto, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--o-d); }
.sgp2 h4.sgp2-pack-name { margin-top: 4px; font: 500 15px/1.25 Roboto, sans-serif !important; color: var(--mut) !important; }
.sgp2-pack-name b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.sgp2-price--sm { margin-top: 12px; }
.sgp2-price--sm .sgp-cur { margin-top: 6px; font-size: 15px; }
.sgp2-price--sm b { font-size: 40px; }
.sgp2-pack .sgp2-per { font-size: 13px; }
.sgp2 a.sgp2-cta--pack { margin-top: auto; padding: 13px 12px; font-size: 15.5px; }
.sgp2-pack-price { margin-bottom: 16px; }

/* Confianza y prueba gratis */
.sgp2-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 36px; font-size: 15px; color: #3d3d3d; }
.sgp2-trust span { display: inline-flex; align-items: center; gap: 9px; }
.sgp2-trust svg { width: 20px; height: 20px; color: var(--o-d); }
.sgp2 p.sgp2-try { margin-top: 16px; text-align: center; font-size: 15.5px; color: #555; }
.sgp2 .sgp2-try a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--o-d) !important; text-decoration: none !important; }
.sgp2-try a span { text-decoration: underline; text-underline-offset: 3px; }
.sgp2-try a svg { width: 17px; height: 17px; }

.sgp2 a:focus-visible, .sgp2 button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

@media (max-width: 1100px) {
  .sgp2-ai { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 900px) {
  .sgp2-plans { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; gap: 24px; }
  .sgp2-ai { max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
  .elementor-element.sgp2-on { padding: 60px 16px 64px !important; }
  .sgp2-head { margin-bottom: 32px; }
  .sgp2 h2.sgp2-title { font-size: 32px !important; }
  .sgp2 p.sgp2-sub { font-size: 16px; }
  .sgp2-plan { padding: 24px 18px 18px; }
  .sgp2-plan:hover { transform: none; }
  .sgp2-ai { margin-top: 28px; padding: 28px 18px 18px; border-radius: 24px; }
  .sgp2 h3.sgp2-ai-title { font-size: 25px !important; }
  .sgp2-trust { flex-direction: column; align-items: center; gap: 10px; }
}
@media (max-width: 420px) {
  .sgp2-packs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sgp2-plan, .sgp2 a.sgp-cta, .sgp2-more svg { transition: none; }
  .sgp2-plan:hover, .sgp2 a.sgp-cta:hover { transform: none; }
}