@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Bricolage+Grotesque:wght@600;700;800&display=swap");
/* Membership · CSS extra (requiere css/edutic.css). Tema: .theme-membership en <main> */

.pg-membership { --pg-m-cream: var(--edu-accent-soft); --pg-m-line: #ECE6D9; --pg-m-ejes: #FAF8F3; background: var(--edu-white); }
.pg-membership__h1, .pg-membership__h2, .pg-membership__eyebrow, .pg-membership__fig, .pg-membership__score, .pg-membership__pname,
.pg-membership__exp span, .pg-membership__eje span, .pg-membership__step-n, .pg-membership__node b, .pg-membership__core b { font-family: var(--edu-font-display); }

/* Tipos */
.pg-membership__eyebrow { font-size: 1rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--edu-gold-text); }
.pg-membership__h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; color: var(--edu-ink); }
.pg-membership__h2 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.625rem); line-height: 1.15; font-weight: 800; letter-spacing: -.025em; color: var(--edu-ink); }
.pg-membership__gold { color: var(--edu-gold); }
.pg-membership__gold-text { color: var(--edu-gold-text); }
.pg-membership p { color: var(--edu-text); line-height: 1.65; }
.pg-membership__lead { font-size: 1.125rem; max-width: 560px; }
.pg-membership__facts { font-size: .875rem; color: var(--edu-text-2); }
.pg-membership__link { font-weight: 700; font-size: .9375rem; color: var(--edu-gold-text); text-decoration: none; }
.pg-membership__btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .875rem; --bs-btn-font-size: .9375rem; justify-content: center; }
.pg-membership__section { padding-block: 4.5rem; }

/* Hero */
.pg-membership__hero { padding-top: 3.5rem; padding-bottom: 6rem; }
.pg-membership__logo { height: 64px; width: auto; align-self: flex-start; }
.pg-membership__hero-img { display: block; width: 100%; height: 440px; object-fit: cover; border-radius: var(--edu-radius-lg); }

/* Banda crema con tira de opciones superpuesta */
.pg-membership__band { background: var(--pg-m-cream); }
.pg-membership__strip-wrap { position: relative; top: -40px; margin-bottom: -40px; }
.pg-membership .edu-optstrip a b { display: block; font-size: .9375rem; color: var(--edu-accent); }
.pg-membership .edu-optstrip a span span { font-size: .75rem; color: var(--edu-muted); }
.pg-membership__eco-wrap { display: flex; flex-direction: column; gap: 1.75rem; padding-top: 4rem; }
.pg-membership__intro { display: flex; flex-direction: column; gap: .875rem; max-width: 860px; }

/* Ecosistema: 4 nodos alrededor del núcleo */
.pg-membership__eco { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "a core b" "c core d"; gap: 3rem 2rem; align-items: center; padding: 3.5rem 2.5rem; background: var(--edu-white); border: 1px solid var(--edu-accent-line); border-radius: var(--edu-radius-lg); overflow: hidden; }
.pg-membership__eco::before { content: ""; position: absolute; inset: 18% 22%; border: 1.5px dashed var(--edu-gold); border-radius: 50%; opacity: .55; pointer-events: none; }
.pg-membership__node { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.25rem 1rem; text-align: center; background: var(--edu-white); border: 1.5px solid var(--edu-accent); border-radius: var(--edu-radius); box-shadow: 0 8px 20px rgba(0, 27, 60, .06); }
.pg-membership__node--gold { border-color: var(--edu-gold); }
.pg-membership__node small { font-size: .6875rem; font-weight: 600; color: var(--edu-gold-text); margin-bottom: .25rem; }
.pg-membership__node b { font-size: 1.0625rem; color: var(--edu-accent); }
.pg-membership__node span { font-size: .75rem; color: var(--edu-text); }
.pg-membership__node--a { grid-area: a; } .pg-membership__node--b { grid-area: b; } .pg-membership__node--c { grid-area: c; } .pg-membership__node--d { grid-area: d; }
.pg-membership__core { grid-area: core; position: relative; z-index: 1; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; width: 200px; height: 200px; border-radius: 50%; background: var(--edu-accent); color: var(--edu-white); text-align: center; box-shadow: 0 0 0 10px var(--pg-m-cream); }
.pg-membership__core b { font-size: 1.25rem; }
.pg-membership__core span { font-size: .75rem; line-height: 1.4; color: var(--edu-gold); }
.pg-membership__eco-item { display: flex; flex-direction: column; gap: .375rem; height: 100%; padding-top: .875rem; border-top: 3px solid var(--edu-accent); }
.pg-membership__eco-item b { color: var(--edu-accent); }
.pg-membership__eco-item span { font-size: .8125rem; line-height: 1.55; color: var(--edu-text); }

/* Modelo EDUTIC */
.pg-membership__model { padding-block: 4.5rem; }
.pg-membership__toggle { display: inline-flex; align-self: flex-start; gap: 6px; padding: 5px; background: var(--edu-white); border-radius: 999px; }
.pg-membership__toggle button { padding: .625rem 1.125rem; border: 0; border-radius: 999px; background: transparent; color: var(--edu-text-2); font: 700 .8125rem/1 inherit; cursor: pointer; }
.pg-membership__toggle button[aria-pressed="true"] { background: var(--edu-accent); color: var(--edu-white); }
.pg-membership__index { display: flex; flex-direction: column; gap: 1.125rem; padding: 2rem 2.25rem; background: var(--edu-white); border-radius: var(--edu-radius-lg); box-shadow: 0 20px 40px rgba(0, 27, 60, .10); }
.pg-membership__index-t { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--edu-muted); }
.pg-membership__score { font-size: 4.5rem; line-height: .9; font-weight: 700; color: var(--edu-faint); transition: color .3s; }
.pg-membership__score small { font-size: 1.625rem; color: var(--edu-faint); }
.pg-membership__bar { display: flex; flex-direction: column; gap: .375rem; }
.pg-membership__bar-h { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--edu-text-2); }
.pg-membership .edu-bar { background: var(--pg-m-line); }
.pg-membership .edu-bar > span { background: #CBD5E1; }
/* Estado «Con análisis EDUTIC»: el JS marca aria-pressed; los textos y colores por estado se resuelven con :has() */
.pg-membership__st-b { display: none; }
.pg-membership__model:has([data-state="modelo"][aria-pressed="true"]) .pg-membership__st-a { display: none; }
.pg-membership__model:has([data-state="modelo"][aria-pressed="true"]) .pg-membership__st-b { display: inline; }
.pg-membership__model:has([data-state="modelo"][aria-pressed="true"]) .pg-membership__score { color: var(--edu-accent); }
.pg-membership__model:has([data-state="modelo"][aria-pressed="true"]) .edu-bar > span { background: var(--edu-gold); }

/* Experiencias */
.pg-membership__exp-img { display: block; width: 100%; height: 260px; margin-top: .5rem; object-fit: cover; border-radius: 16px; }
.pg-membership__exp li { display: grid; grid-template-columns: 70px 220px 1fr; gap: 1.25rem; align-items: baseline; padding: 1.625rem 0; border-top: 1px solid var(--edu-border); }
.pg-membership__exp span { font-size: 2.125rem; font-weight: 700; color: var(--edu-accent); }
.pg-membership__exp b { font-size: 1.375rem; color: var(--edu-ink); }
.pg-membership__exp p { margin: 0; font-size: .9375rem; }
.pg-membership__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--edu-border); }
.pg-membership__fig { font-size: 2.75rem; line-height: 1; font-weight: 700; color: var(--edu-accent); }
.pg-membership__figs span { display: block; margin-top: .375rem; font-size: .8125rem; line-height: 1.45; color: var(--edu-text); }

/* Ejes */
.pg-membership__ejes-band { background: var(--pg-m-ejes); border-block: 1px solid var(--pg-m-line); }
.pg-membership__ejes-p { max-width: 560px; }
.pg-membership__eje { display: flex; flex-direction: column; gap: .625rem; padding-top: 1.125rem; border-top: 3px solid var(--edu-accent); }
.pg-membership__eje span { font-size: 1.125rem; font-weight: 700; color: var(--edu-accent); }
.pg-membership__eje b { font-size: 1.125rem; color: var(--edu-ink); }
.pg-membership__eje p { margin: 0; font-size: .875rem; }

/* Planes */
.pg-membership__plans-p { max-width: 420px; font-size: .9375rem; }
.pg-membership__plans-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg-membership__plans { min-width: 680px; }
.pg-membership__prow { display: contents; }
.pg-membership__corner { padding: 1.125rem 0; border-bottom: 2px solid var(--edu-ink); }
.pg-membership .edu-plans__head { cursor: pointer; }
.pg-membership .edu-plans__head > span:first-child { flex-wrap: wrap; }
.pg-membership .edu-plans__head:focus-visible { outline: 3px solid var(--edu-gold); outline-offset: 2px; }
.pg-membership__pname { font-size: 1.375rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pg-membership__badge { padding: .125rem .5rem; background: var(--edu-gold); color: var(--edu-accent); border-radius: 999px; font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.pg-membership__ptag { font-size: .75rem; color: var(--edu-text); }
.pg-membership .edu-plans__label { font-weight: 600; color: var(--edu-text-2); border-bottom-color: var(--pg-m-line); }
.pg-membership .edu-plans__cell { font-weight: 600; color: var(--edu-accent); border-bottom-color: var(--pg-m-line); }
.pg-membership .edu-plans__cell--yes { color: var(--edu-gold); font-size: 1.125rem; }
.pg-membership .edu-plans__cell--no { color: #CBD5E1; }

/* Socios */
.pg-membership__socios { display: flex; flex-direction: column; gap: 1.125rem; padding-top: 2.5rem; padding-bottom: 4.5rem; }
.pg-membership__socios-list { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 2.75rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--edu-faint); }

/* Suscripción */
.pg-membership__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.pg-membership__steps li { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; background: var(--edu-white); border-radius: var(--edu-radius); }
.pg-membership__steps b:not(.pg-membership__step-n) { font-size: .875rem; color: var(--edu-accent); }
.pg-membership__steps span { font-size: .75rem; color: var(--edu-text); }
.pg-membership__step-n { font-size: 1.75rem; color: var(--edu-gold); }
.pg-membership__indiv { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; background: var(--edu-white); border: 1px solid var(--edu-accent-line); border-radius: 16px; }
.pg-membership__indiv > div > b { color: var(--edu-accent); }
.pg-membership__indiv-plan { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: .875rem; background: var(--pg-m-cream); border-radius: 12px; }
.pg-membership__indiv-plan b { font-size: .8125rem; color: var(--edu-accent); }
.pg-membership__indiv-plan span { font-family: var(--edu-font-display); font-size: 1.375rem; font-weight: 700; color: var(--edu-ink); }
.pg-membership__indiv-plan a { margin-top: auto; font-size: .75rem; font-weight: 700; color: var(--edu-gold-text); text-decoration: none; }
.pg-membership__form { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: var(--edu-white); border-radius: var(--edu-radius-lg); box-shadow: 0 20px 40px rgba(0, 27, 60, .08); }
.pg-membership__form-t { font-family: var(--edu-font-display); font-size: 1.375rem; color: var(--edu-accent); }
.pg-membership__form .form-label { font-size: .8125rem; font-weight: 600; color: var(--edu-text-2); }
.pg-membership__form .form-control:focus { border-color: var(--edu-gold); box-shadow: 0 0 0 .2rem rgba(212, 168, 67, .25); }
.pg-membership__plan-out { width: 7em; border: 0; background: transparent; padding: 0; font-weight: 800; color: var(--edu-accent); }
.pg-membership__plan-out:focus { outline: 0; }

@media (max-width: 991.98px) {
  .pg-membership__hero { padding-bottom: 5rem; }
  .pg-membership__hero-img { height: 300px; }
  .pg-membership__eco { grid-template-columns: 1fr 1fr; grid-template-areas: "core core" "a b" "c d"; gap: 1rem; padding: 1.5rem; }
  .pg-membership__eco::before { display: none; }
  .pg-membership__core { width: 160px; height: 160px; margin-bottom: .5rem; }
  .pg-membership__exp li { grid-template-columns: 56px 1fr; }
  .pg-membership__exp p { grid-column: 2; }
}
@media (max-width: 575.98px) {
  .pg-membership__section, .pg-membership__model { padding-block: 3rem; }
  .pg-membership__eco { grid-template-columns: 1fr; grid-template-areas: "core" "a" "b" "c" "d"; }
  .pg-membership__figs, .pg-membership__steps { grid-template-columns: 1fr; }
  .pg-membership__index, .pg-membership__form { padding: 1.5rem 1.25rem; }
  .pg-membership__score { font-size: 3.5rem; }
}