/* Reglas exclusivas de la exportación HTML estática. */
body,
button,
input,
select,
textarea {
  font-family: "Nunito", "Avenir Next", Avenir, Arial, sans-serif;
}

h1,
h2,
h3,
strong {
  font-weight: 800;
}

p {
  line-height: 1.6;
}

small {
  font-size: .76rem;
  line-height: 1.45;
}

[hidden] {
  display: none !important;
}

.eyebrow {
  font-size: .76rem;
  letter-spacing: .13em;
}

.side-nav nav a,
.button,
.filter-row button,
.search-box input {
  font-size: .88rem;
}

.side-nav nav {
  gap: 3px;
}

.side-nav {
  height: 100vh;
  overflow-y: auto;
}

.side-nav nav a {
  padding-block: 10px;
}

.side-logo {
  margin-bottom: 28px;
}

.side-promo {
  margin-top: 22px;
}

.class-card-body p {
  font-size: .7rem;
}

.class-card-body h3 {
  font-size: 1rem;
}

.class-card-body small,
.program-card p,
.program-card span,
.program-card small,
.catalog-summary,
.account-link strong,
.account-link small {
  font-size: .75rem;
}

.week-card > p,
.big-stat span,
.minutes-card small,
.lesson-progress small,
.continue-copy > p,
.continue-copy .button,
.soft-badge,
.days span,
.days b {
  font-size: .72rem;
}

.admin-content,
.admin-main > header,
.admin-side {
  font-size: .9rem;
}

.admin-stats article > span,
.admin-stats article > small,
.activity-list span,
.admin-content table,
.admin-filters input,
.admin-filters button,
.status,
.reminder-grid p,
.reminder-grid article > div:nth-of-type(2) span,
.reminder-grid article > button,
.admin-content-grid p,
.admin-content-grid article > div > span {
  font-size: .72rem;
}

.admin-content-grid h3,
.reminder-grid h2 {
  font-size: .95rem;
}

.auth-brand {
  display: inline-block;
}

.auth-mobile-logo {
  display: none;
  margin-bottom: 34px;
  width: 130px;
}

.screen {
  display: none !important;
}

.screen.is-active {
  display: block !important;
}

#member-shell.is-active,
#admin-shell.is-active {
  display: flex !important;
}

.member-view,
.admin-view {
  display: none;
}

.member-view.is-active,
.admin-view.is-active {
  display: block;
  animation: view-in .25s ease both;
}

.side-nav nav a.active,
.admin-side nav a.active,
.mobile-nav a.active {
  background: #f2ece3;
  color: var(--coffee);
}

.admin-side nav a.active {
  border-left: 3px solid var(--coffee);
}

.mood-grid button.active,
.choice-grid button.active,
.filter-row button.active,
.tab-row button.active,
.content-tabs button.active,
.payment-methods button.active {
  border-color: var(--coffee);
  background: var(--coffee);
  color: #fff;
}

.class-thumb button.saved {
  background: var(--coffee);
  color: #ef4444;
}

.favorite-toggle.saved {
  background: var(--coffee);
  color: #fff;
}

.complete-toggle.done {
  border-color: var(--coffee);
  background: var(--coffee);
  color: #fff;
}

.course-store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Biblioteca: clases a tu ritmo */
.latest-classes,.class-library{margin:34px 0}.section-title{align-items:end;display:flex;justify-content:space-between;margin-bottom:16px}.section-title h2{font-size:1.45rem;margin:3px 0 0}.section-title>span{color:var(--muted);font-size:.8rem;font-weight:700}.class-grid--latest{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}.class-grid--latest .class-thumb{height:170px}.new-badge{background:var(--coffee);border-radius:999px;color:#fff;font-size:.63rem;font-weight:900;left:12px;letter-spacing:.08em;padding:6px 9px;position:absolute;top:12px}.advanced-filters{background:#fbfaf8;border:1px solid var(--line);border-radius:20px;display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));padding:18px}.advanced-filters label{color:var(--muted);display:grid;font-size:.7rem;font-weight:900;gap:6px;letter-spacing:.03em}.advanced-filters select{appearance:auto;background:#fff;border:1px solid #ded6cc;border-radius:10px;color:var(--ink);font:600 .82rem "Nunito",sans-serif;min-height:39px;padding:0 9px}.filter-clear{align-self:end;background:transparent;border:0;color:var(--coffee);cursor:pointer;font:800 .78rem "Nunito",sans-serif;min-height:39px;text-align:left;text-decoration:underline}.class-library .catalog-summary{margin-top:18px}
.guided-calendar{margin:34px 0}.calendar-levels{display:grid;gap:16px;grid-template-columns:1fr 1fr}.calendar-levels article{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}.calendar-levels header{align-items:center;background:#f7f2eb;display:flex;gap:12px;padding:15px 18px}.calendar-levels header>span{align-items:center;background:var(--coffee);border-radius:50%;color:#fff;display:grid;font-size:.7rem;font-weight:900;height:30px;justify-content:center;width:30px}.calendar-levels header strong,.calendar-levels header small{display:block}.calendar-levels header small{color:var(--muted);margin-top:2px}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);padding:10px}.calendar-days div{border-right:1px solid var(--line);min-height:72px;padding:7px}.calendar-days div:last-child{border-right:0}.calendar-days b,.calendar-days span{display:block}.calendar-days b{color:var(--coffee);font-size:.68rem;margin-bottom:7px}.calendar-days span{font-size:.67rem;line-height:1.25}

.store-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(71, 53, 40, .06);
}

.store-image {
  height: 205px;
  overflow: hidden;
  position: relative;
}

.store-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.store-card:hover .store-image img {
  transform: scale(1.035);
}

.course-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--coffee);
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.course-badge--soft {
  background: rgba(255, 255, 255, .92);
  color: var(--coffee);
}

.store-body {
  padding: 20px;
}

.store-body > p {
  margin-bottom: 6px;
  color: var(--coffee);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.store-body h2 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}

.store-body > span {
  min-height: 48px;
  display: block;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}

.course-teacher {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

.course-teacher img,
.teacher-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.course-teacher img {
  object-fit: cover;
}

.teacher-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sage);
  color: var(--coffee);
  font-size: .75rem;
  font-weight: 900;
}

.course-teacher small {
  color: var(--muted);
}

.course-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.course-buy strong {
  color: var(--coffee);
  font-size: 1.1rem;
  white-space: nowrap;
}

.course-buy strong small {
  display: block;
  color: var(--muted);
  font-size: .58rem;
}

.course-buy .button {
  padding: 10px 15px;
  font-size: .76rem;
}

.owned-course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.owned-course {
  display: grid;
  grid-template-columns: 42% 1fr;
  min-height: 270px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.owned-course > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owned-course-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px;
}

.owned-course-body > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.owned-course-body > div:first-child p {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
}

.owned-course-body h2 {
  margin: 20px 0 6px;
  font-size: 1.22rem;
}

.owned-course-body > small {
  color: var(--muted);
}

.status-pill {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eee4d8;
  color: var(--coffee);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .07em;
}

.status-pill--complete {
  background: #e1eee7;
  color: #527363;
}

.status-pill--new {
  background: var(--sage);
}

.owned-progress {
  width: 100%;
  height: 6px;
  margin: 14px 0 18px;
  overflow: hidden;
  border-radius: 99px;
  background: #eee9e2;
}

.owned-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--coffee);
}

.owned-course-body .button {
  margin-top: auto;
  padding: 10px 16px;
  font-size: .78rem;
}

.catalog-summary b {
  color: var(--coffee);
}

.catalog-summary a {
  color: var(--coffee);
  font-weight: 800;
}

.catalog-empty {
  margin-top: 20px;
  padding: 70px 25px;
  border: 1px dashed #d5cabd;
  border-radius: 22px;
  background: #fff;
  text-align: center;
}

.catalog-empty > span {
  display: block;
  margin-bottom: 12px;
  color: var(--taupe);
  font-size: 2rem;
}

.catalog-empty h2 {
  margin-bottom: 6px;
}

.catalog-empty p {
  margin: 0;
  color: var(--muted);
}

.quiz-result.has-result {
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
  text-align: left;
}

.quiz-result.has-result::before {
  background: linear-gradient(180deg, transparent 15%, rgba(36, 27, 21, .78) 100%), var(--recommendation-image) center / cover;
  content: "";
  inset: 0;
  position: absolute;
}

.quiz-result.has-result > * {
  color: #fff;
  position: relative;
  z-index: 1;
}

.quiz-result.has-result .result-mark {
  background: rgba(255, 255, 255, .9);
  color: var(--coffee);
}

.quiz-result.has-result .button {
  margin-top: 10px;
  width: auto;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .member-view.is-active,
  .admin-view.is-active {
    animation: none;
  }
}

/* Checkout simplificado: Mercado Pago y PayPal como únicos proveedores. */
.payment-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.payment-methods button {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  padding: 12px 14px;
  text-align: left;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.payment-methods button:hover,
.payment-methods button:focus-visible {
  border-color: var(--coffee);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(71, 53, 40, .08);
}

.payment-methods button > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.payment-methods button strong,
.payment-methods button small {
  display: block;
}

.payment-methods button small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px !important;
  line-height: 1.25;
}

.payment-methods button > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--coffee);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .2s ease, transform .2s ease;
}

.payment-methods button.active > i {
  opacity: 1;
  transform: scale(1);
}

.payment-brand {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.payment-brand--mercadopago {
  background: #e5f4ff;
  color: #168ad0;
}

.payment-brand--paypal {
  background: #e8f0fb;
  color: #123f8c;
  font-family: Georgia, serif;
  font-size: 20px;
  font-style: italic;
}

.checkout-form {
  display: grid;
  gap: 15px;
}

.checkout-form > .payment-provider-note {
  display: flex;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border: 1px solid #dce8e1;
  border-radius: 14px;
  background: #f2f7f4;
}

.payment-provider-note > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sage);
  color: var(--coffee);
}

.payment-provider-note .ui-icon {
  width: 19px;
  height: 19px;
}

.payment-provider-note strong,
.payment-provider-note p {
  display: block;
  margin: 0;
}

.payment-provider-note p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px !important;
  line-height: 1.4;
}

.checkout-form .check-line {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .payment-methods {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .course-store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owned-course-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .auth-mobile-logo {
    display: block;
  }

  .course-store-grid {
    grid-template-columns: 1fr;
  }

  .store-image {
    height: 260px;
  }

  .owned-course {
    grid-template-columns: 1fr;
  }

  .owned-course > img {
    height: 230px;
  }

  .course-buy {
    align-items: flex-end;
  }
}

/* Selector de moneda CLP / USD. */
.currency-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  box-shadow: 0 5px 18px rgba(71, 53, 40, .05);
}

.currency-selector > span {
  font-size: 13px;
  font-weight: 800;
}

.currency-selector select {
  padding: 5px 25px 5px 8px;
  border: 0;
  border-radius: 999px;
  outline: 0;
  background: #f2ece3;
  color: var(--coffee);
  font-size: 14px !important;
  font-weight: 900;
}

/* Tienda y detalle de cursos especiales. */
.special-policy {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 17px 20px;
  border: 1px solid #d6c5b8;
  border-radius: 16px;
  background: #f3ebe2;
}

.subscription-boundary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid #d6c5b8;
  border-radius: 16px;
  background: #f3ebe2;
}

.subscription-boundary > span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--coffee);
  color: #fff;
}

.subscription-boundary > div {
  flex: 1;
}

.subscription-boundary strong,
.subscription-boundary p {
  display: block;
  margin: 0;
}

.subscription-boundary p {
  margin-top: 3px;
  color: var(--muted);
}

.subscription-boundary > a {
  color: var(--coffee);
  font-weight: 900;
  white-space: nowrap;
}

.special-policy > span,
.special-validity-box > span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--coffee);
  color: #fff;
}

.special-policy strong,
.special-policy p,
.special-validity-box strong,
.special-validity-box p {
  display: block;
  margin: 0;
}

.special-policy p,
.special-validity-box p {
  margin-top: 3px;
  color: var(--muted);
}

.special-feature {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) 1.18fr;
  min-height: 340px;
  overflow: hidden;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(71, 53, 40, .08);
}

.special-feature-image {
  min-height: 340px;
  position: relative;
}

.special-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.special-feature-image > span,
.special-course-visual > span {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--coffee);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.special-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
}

.special-feature-copy h2 {
  margin-bottom: 10px;
  font-size: 2rem;
}

.special-feature-copy > p:not(.eyebrow) {
  color: var(--muted);
}

.special-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 24px;
}

.special-facts span {
  padding: 8px 11px;
  border-radius: 999px;
  background: #eef2ef;
  color: var(--coffee);
  font-size: 14px;
  font-weight: 800;
}

.special-feature-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.special-feature-bottom > strong {
  color: var(--coffee);
  font-size: 1.6rem;
}

.special-feature-bottom > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-validity,
.course-expiry {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 15px 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f3ebe2;
  color: var(--coffee);
  font-size: 14px;
  font-weight: 800;
}

.course-expiry {
  width: 100%;
  margin-top: 14px;
}

.special-course-hero {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) 1.15fr;
  gap: 46px;
  align-items: center;
  margin: 24px 0 40px;
  padding: 30px;
  border-radius: 28px;
  background: #e6eee9;
}

.special-course-visual {
  height: 430px;
  overflow: hidden;
  position: relative;
  border-radius: 22px;
}

.special-course-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.special-course-intro h1 {
  margin-bottom: 18px;
  font-size: clamp(3rem, 5vw, 4.7rem);
  line-height: .98;
}

.special-course-intro > p:not(.eyebrow) {
  color: var(--muted);
}

.special-validity-box {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(111, 78, 55, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .65);
}

.special-course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
}

.special-video-list {
  margin-top: 20px;
}

.special-video-list article {
  display: grid;
  grid-template-columns: 44px 1fr 36px;
  gap: 13px;
  align-items: center;
  padding: 17px 10px;
  border-top: 1px solid var(--line);
}

.special-video-list article > b {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eee7df;
  color: var(--coffee);
}

.special-video-list article strong,
.special-video-list article small {
  display: block;
}

.special-video-list article small {
  margin-top: 3px;
  color: var(--muted);
}

.special-video-list article > span {
  color: var(--coffee);
  font-size: 22px;
}

.special-purchase-card {
  position: sticky;
  top: 160px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 15px 40px rgba(71, 53, 40, .09);
}

.special-purchase-card > span {
  color: var(--coffee);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
}

.special-purchase-card > strong {
  display: block;
  margin: 12px 0 8px;
  color: var(--coffee);
  font-size: 2rem;
}

.special-purchase-card > p,
.special-purchase-card > small {
  color: var(--muted);
}

.special-purchase-card ul {
  margin: 20px 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.special-purchase-card li {
  margin: 12px 0;
  padding-left: 22px;
  position: relative;
}

.special-purchase-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #527363;
}

.special-purchase-card > small {
  display: block;
  margin-top: 12px;
  text-align: center;
}

.checkout-validity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 5px 0 18px;
  padding: 14px;
  border: 1px solid #d6c5b8;
  border-radius: 14px;
  background: #f3ebe2;
}

.checkout-validity > span {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--coffee);
  color: #fff;
}

.checkout-validity strong,
.checkout-validity p {
  display: block;
  margin: 0;
}

.checkout-validity p {
  margin-top: 3px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .special-feature,
  .special-course-hero {
    grid-template-columns: 1fr;
  }

  .special-course-layout {
    grid-template-columns: 1fr;
  }

  .special-purchase-card {
    position: static;
  }
}

@media (max-width: 720px) {
  .currency-selector > span {
    display: none;
  }

  .currency-selector {
    padding-left: 6px;
  }

  .special-feature-image,
  .special-course-visual {
    min-height: 280px;
    height: 320px;
  }

  .special-feature-copy,
  .special-course-hero {
    padding: 22px;
  }

  .special-feature-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .special-feature-bottom > div,
  .special-feature-bottom .button {
    width: 100%;
  }

  .special-policy {
    align-items: flex-start;
  }

  .subscription-boundary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .subscription-boundary > div {
    flex: 1 1 calc(100% - 60px);
  }

  .subscription-boundary > a {
    width: 100%;
    padding-left: 54px;
  }
}

@media (max-width: 480px) {
  .mobile-brand {
    display: none;
  }

  .member-header {
    justify-content: flex-end;
  }

  .member-actions {
    gap: 7px;
  }

  .member-actions .top-action,
  .member-actions .user-menu-toggle {
    width: 38px;
    height: 38px;
  }
}

/* Checkout contextual: la cuenta activa se reutiliza sin pedir los datos otra vez. */
.checkout-identity[hidden],
.checkout-member-account[hidden] {
  display: none !important;
}

.checkout-member-account {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
  padding: 17px 18px;
  border: 1px solid #c7dfd2;
  border-radius: 19px;
  background: linear-gradient(135deg, #f4faf6, #e7f3ec);
  box-shadow: 0 12px 30px rgba(63, 112, 89, .08);
}

.checkout-member-check {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--progress-green-dark);
  color: #fff;
}

.checkout-member-check .ui-icon,
.checkout-member-check svg {
  width: 24px;
  height: 24px;
}

.checkout-member-account small,
.checkout-member-account strong,
.checkout-member-account p {
  display: block;
  margin: 0;
}

.checkout-member-account > div > small {
  color: var(--progress-green-dark);
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: .07em;
}

.checkout-member-account > div > strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 18px;
}

.checkout-member-account > div > p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 15px;
}

.checkout-member-status {
  padding: 7px 10px;
  border: 1px solid #bbd6c8;
  border-radius: 999px;
  background: #fff;
  color: var(--progress-green-dark);
  font-size: 13px !important;
  font-weight: 900;
  white-space: nowrap;
}

.order-summary--enhanced .summary-account {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid #cfe2d8;
  border-radius: 15px;
  background: #edf7f1;
}

.summary-account > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--progress-green-dark);
  color: #fff;
}

.summary-account > span .ui-icon,
.summary-account > span svg {
  width: 19px;
  height: 19px;
}

.summary-account small,
.summary-account strong,
.summary-account p {
  display: block;
  margin: 0;
}

.summary-account small {
  color: var(--muted);
  font-size: 12px !important;
  font-weight: 700;
}

.summary-account strong {
  margin-top: 1px;
  color: var(--ink);
  font-size: 15px;
}

.summary-account p {
  margin-top: 1px;
  color: #61786c;
  font-size: 12px;
}

.order-summary--enhanced .summary-payment-choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
  margin-top: 15px;
  padding: 11px 12px;
  border: 1px solid #d5e5dc;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
}

.summary-payment-choice .payment-method-mark {
  width: 34px;
  height: 34px;
  margin: 0;
  font-size: 11px !important;
}

.summary-payment-choice small,
.summary-payment-choice strong {
  display: block;
  margin: 0;
}

.summary-payment-choice small {
  color: var(--muted);
  font-size: 12px !important;
}

.summary-payment-choice strong {
  margin-top: 1px;
  color: var(--ink);
  font-size: 15px;
}

.summary-payment-choice > i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--progress-green-dark);
  color: #fff;
  font-style: normal;
}

.summary-payment-choice > i .ui-icon,
.summary-payment-choice > i svg {
  width: 14px;
  height: 14px;
}

.payment-methods--check button {
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.payment-methods--check button:hover {
  transform: translateY(-1px);
}

.payment-methods--check button.active {
  box-shadow: 0 9px 24px rgba(63, 112, 89, .13), inset 0 0 0 1px var(--progress-green-dark);
}

@media (max-width: 560px) {
  .checkout-member-account {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 15px;
  }

  .checkout-member-check {
    width: 44px;
    height: 44px;
  }

  .checkout-member-status {
    grid-column: 2;
    width: max-content;
  }
}

/* Portada pública Brella. */
.landing-page{background:#fbf8f1;overflow-x:hidden}.landing-header{background:rgba(251,248,241,.94);backdrop-filter:blur(14px);border-bottom:1px solid transparent;position:sticky;top:0;z-index:50}.landing-header nav a{font-size:16px;font-weight:750;position:relative}.landing-header nav a:after{background:var(--coffee);bottom:-7px;content:"";height:2px;left:0;position:absolute;transform:scaleX(0);transform-origin:left;transition:transform .2s ease;width:100%}.landing-header nav a:hover:after{transform:scaleX(1)}.landing-header .header-actions a{font-size:16px}.landing-hero{min-height:660px;padding-top:44px}.landing-hero .hero-lead{font-size:18px}.landing-trust{align-items:center;display:flex;flex-wrap:wrap;gap:15px;margin-top:30px}.landing-trust p{font-size:15px;line-height:1.4;margin:0}.landing-trust>span{align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--coffee);display:flex;font-size:14px;font-weight:900;gap:7px;padding:9px 12px}.landing-trust>span .ui-icon{height:18px;width:18px}.landing-hero-visual .floating-note span{display:grid;place-items:center}.landing-hero-visual .floating-note .ui-icon{height:20px;width:20px}.landing-hero-visual .note--bottom{align-items:center}.landing-hero-visual .note--bottom strong{font-family:inherit;font-size:16px}.landing-hero-visual .note--bottom small{font-size:13px}.landing-section{padding-block:104px}.landing-section-head{align-items:end;display:grid;gap:70px;grid-template-columns:1.2fr .8fr;margin-bottom:38px}.landing-section-head h2{font-size:clamp(38px,5vw,62px);line-height:1.04;margin:0}.landing-section-head>p{color:var(--muted);font-size:17px;line-height:1.65;margin:0}.landing-course-grid{display:grid;gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}.landing-course-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 14px 38px rgba(71,53,40,.06);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}.landing-course-card:hover{box-shadow:0 22px 48px rgba(71,53,40,.12);transform:translateY(-5px)}.landing-course-card>div{height:245px;overflow:hidden;position:relative}.landing-course-card>div:after{background:linear-gradient(180deg,transparent 45%,rgba(43,30,23,.38));content:"";inset:0;position:absolute}.landing-course-card img{height:100%;object-fit:cover;transition:transform .4s ease;width:100%}.landing-course-card:hover img{transform:scale(1.04)}.landing-course-card>div>span{background:rgba(255,255,255,.9);border-radius:999px;color:var(--coffee);font-size:12px;font-weight:900;left:15px;letter-spacing:.08em;padding:7px 10px;position:absolute;top:15px;z-index:2}.landing-course-card>div>i{align-items:center;background:#fff;border-radius:50%;bottom:15px;color:var(--coffee);display:grid;height:44px;justify-content:center;position:absolute;right:15px;width:44px;z-index:2}.landing-course-card>div>i .ui-icon{height:22px;width:22px}.landing-course-card>section{padding:21px}.landing-course-card>section>p{color:var(--coffee);font-size:13px;font-weight:900;letter-spacing:.08em;margin:0 0 7px;text-transform:uppercase}.landing-course-card h3{font-size:24px;margin:0 0 9px}.landing-course-card>section>span{color:var(--muted);display:block;font-size:16px;line-height:1.55;min-height:74px}.landing-course-card .button{font-size:16px;margin-top:18px;width:100%}.landing-how{background:var(--coffee);color:#fff;padding-block:100px;position:relative}.landing-how:after{border:60px solid rgba(223,199,178,.15);border-radius:50%;content:"";height:280px;position:absolute;right:-150px;top:-150px;width:280px}.landing-section-head--light h2 em{color:var(--sage)}.landing-section-head--light>p{color:rgba(255,255,255,.72)}.landing-step-grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;z-index:1}.landing-step-grid article{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:22px;min-height:250px;padding:25px;position:relative}.landing-step-grid article>span{color:rgba(255,255,255,.32);font-family:Georgia,serif;font-size:48px;position:absolute;right:22px;top:17px}.landing-step-grid article>i{align-items:center;background:var(--sage);border-radius:14px;color:var(--coffee);display:grid;height:46px;justify-content:center;width:46px}.landing-step-grid article>i .ui-icon{height:23px;width:23px}.landing-step-grid h3{font-size:23px;margin:32px 0 9px}.landing-step-grid p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.55;margin:0}.landing-plans{max-width:1050px}.landing-section-head--center{display:block;margin-inline:auto;max-width:740px;text-align:center}.landing-section-head--center>p{margin:18px auto 0;max-width:650px}.landing-plan-grid{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:auto;max-width:900px}.landing-plan-grid article{background:#fff;border:1px solid var(--line);border-radius:26px;padding:31px;position:relative}.landing-plan-grid article.featured{border:2px solid var(--coffee);box-shadow:0 24px 55px rgba(71,53,40,.14);transform:translateY(-8px)}.landing-plan-grid article.featured>b{background:var(--coffee);border-radius:999px;color:#fff;font-size:12px;letter-spacing:.08em;padding:7px 11px;position:absolute;right:22px;top:22px}.landing-plan-icon{align-items:center;background:#fbf3ea;border-radius:14px;color:#8c5835;display:grid;height:48px;justify-content:center;margin-bottom:25px;width:48px}.landing-plan-icon .ui-icon{height:23px;width:23px}.landing-plan-grid article>p{color:var(--coffee);font-size:13px;font-weight:900;letter-spacing:.12em;margin:0 0 9px}.landing-plan-grid h3{font-size:38px;line-height:1;margin:0 0 12px}.landing-plan-grid h3 small{color:var(--muted);font-size:15px;font-weight:700}.landing-plan-grid article>span{color:var(--muted);display:block;font-size:16px;line-height:1.5;min-height:48px}.landing-plan-grid ul{border-top:1px solid var(--line);display:grid;gap:12px;list-style:none;margin:23px 0;padding:21px 0 0}.landing-plan-grid li{align-items:center;display:flex;font-size:16px;gap:9px}.landing-plan-grid li i{align-items:center;background:#fbf3ea;border-radius:50%;color:#8c5835;display:grid;height:22px;justify-content:center;width:22px}.landing-plan-grid li .ui-icon{height:14px;width:14px}.landing-plan-grid .button{font-size:16px}.landing-plan-note{align-items:center;color:var(--muted);display:flex;font-size:14px;gap:8px;justify-content:center;margin:28px 0 0}.landing-plan-note .ui-icon{color:#8c5835;height:19px;width:19px}.landing-specials{background:#f1ebe4;padding-block:102px}.landing-special-feature{background:#fff;border:1px solid #e2d8cd;border-radius:28px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);overflow:hidden}.landing-special-feature>div{min-height:455px;position:relative}.landing-special-feature>div:after{background:linear-gradient(180deg,transparent 55%,rgba(48,32,23,.4));content:"";inset:0;position:absolute}.landing-special-feature>div img{height:100%;object-fit:cover;width:100%}.landing-special-feature>div>span{background:var(--coffee);border-radius:999px;color:#fff;font-size:12px;font-weight:900;left:20px;letter-spacing:.08em;padding:8px 11px;position:absolute;top:20px;z-index:2}.landing-special-feature>section{align-self:center;padding:44px}.landing-special-feature h3{font-size:40px;line-height:1.05;margin:0 0 15px}.landing-special-feature>section>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.65}.landing-special-facts{display:flex;flex-wrap:wrap;gap:10px;margin:23px 0}.landing-special-facts span{align-items:center;background:#f6f1eb;border-radius:999px;color:var(--coffee);display:flex;font-size:14px;font-weight:800;gap:7px;padding:8px 10px}.landing-special-facts .ui-icon{height:17px;width:17px}.landing-special-price{align-items:center;border-top:1px solid var(--line);display:flex;gap:20px;justify-content:space-between;padding-top:23px}.landing-special-price>strong{color:var(--coffee);font-size:30px}.landing-special-price>strong small{font-size:14px}.landing-special-price>div{display:flex;gap:9px}.landing-special-price .button{font-size:15px}.landing-mini-special-grid{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}.landing-mini-special-grid article{background:#fff;border:1px solid #e2d8cd;border-radius:22px;display:grid;grid-template-columns:180px 1fr;overflow:hidden}.landing-mini-special-grid img{height:100%;min-height:255px;object-fit:cover;width:100%}.landing-mini-special-grid article>div{padding:23px}.landing-mini-special-grid span{color:var(--coffee);font-size:12px;font-weight:900;letter-spacing:.08em}.landing-mini-special-grid h3{font-size:24px;margin:8px 0}.landing-mini-special-grid p{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:16px}.landing-mini-special-grid strong{color:var(--coffee);display:block;font-size:21px;margin-bottom:12px}.landing-mini-special-grid a{color:var(--coffee);font-size:15px;font-weight:900}.landing-special-all{text-align:center;margin-top:30px}.landing-special-all .button{font-size:16px}.landing-cta{padding-block:90px}.landing-cta p{font-size:17px}.landing-footer{background:#fff;border-top:1px solid var(--line);padding:55px 0 25px}.landing-footer>.wrap{display:grid;gap:45px;grid-template-columns:1.4fr repeat(3,1fr)}.landing-footer img{width:145px}.landing-footer p{color:var(--muted);font-size:15px;margin:14px 0 0}.landing-footer nav{display:flex;flex-direction:column;gap:9px}.landing-footer nav strong{color:var(--ink);font-size:15px;margin-bottom:4px}.landing-footer nav a{color:var(--muted);font-size:14px}.landing-footer>small{border-top:1px solid var(--line);color:var(--muted);display:block;font-size:13px;margin:38px auto 0;padding-top:22px;text-align:center;width:min(1180px,calc(100% - 44px))}
@media(max-width:1020px){.landing-header nav{display:none}.landing-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-course-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.landing-course-card:last-child>div{height:auto;min-height:260px}.landing-special-feature{grid-template-columns:1fr 1fr}.landing-special-feature>section{padding:34px}.landing-special-price{align-items:flex-start;flex-direction:column}.landing-footer>.wrap{grid-template-columns:1.4fr repeat(2,1fr)}.landing-footer>.wrap nav:last-child{grid-column:2}}
@media(max-width:760px){.landing-header{height:76px}.landing-header .header-actions{gap:8px}.landing-header .text-link{display:inline-block;font-size:14px}.landing-header .button{font-size:14px!important;padding:10px 13px}.landing-hero{padding-bottom:58px}.landing-hero h1{font-size:clamp(52px,16vw,78px)}.landing-trust>span{width:max-content}.landing-section{padding-block:76px}.landing-section-head{align-items:start;display:flex;flex-direction:column;gap:18px;margin-bottom:28px}.landing-section-head h2{font-size:clamp(36px,10vw,50px)}.landing-course-grid{grid-template-columns:1fr}.landing-course-card:last-child{display:block;grid-column:auto}.landing-course-card:last-child>div,.landing-course-card>div{height:250px;min-height:0}.landing-how,.landing-specials{padding-block:76px}.landing-step-grid,.landing-plan-grid{grid-template-columns:1fr}.landing-plan-grid article.featured{transform:none}.landing-special-feature{grid-template-columns:1fr}.landing-special-feature>div{min-height:300px}.landing-special-feature>section{padding:27px 22px}.landing-special-feature h3{font-size:34px}.landing-special-price>div{display:grid;width:100%}.landing-special-price .button{width:100%}.landing-mini-special-grid{grid-template-columns:1fr}.landing-footer>.wrap{grid-template-columns:1fr 1fr}.landing-footer>.wrap>div{grid-column:1/-1}.landing-footer>.wrap nav:last-child{grid-column:auto}.landing-cta .cta-inner{display:block}.landing-cta .cta-inner>div:last-child{margin-top:25px}}
@media(max-width:480px){.landing-header .logo{width:105px}.landing-header .text-link{font-size:13px}.landing-header .button{font-size:13px!important;padding:9px 11px}.landing-hero .hero-lead{font-size:16px}.landing-hero-visual{min-height:390px}.landing-hero-visual>img:first-child{height:390px}.landing-trust{align-items:flex-start;flex-direction:column}.landing-course-card>div{height:220px}.landing-step-grid article{min-height:225px}.landing-plan-grid article{padding:24px 20px}.landing-plan-grid h3{font-size:34px}.landing-plan-note{align-items:flex-start;text-align:left}.landing-special-feature>div{min-height:240px}.landing-mini-special-grid article{grid-template-columns:1fr}.landing-mini-special-grid img{height:210px;min-height:0}.landing-footer>.wrap{grid-template-columns:1fr}.landing-footer>.wrap nav:last-child{grid-column:auto}}

/* Checkout secuencial: datos, producto seleccionado y pago tipo check. */
.checkout-customer-fields--details{grid-template-columns:repeat(2,minmax(0,1fr))}.checkout-legal-check input{accent-color:var(--progress-green-dark);height:19px!important;width:19px!important}.checkout-purchase-preview{background:#fff;border:1px solid #ded6cc;border-radius:19px;margin:0 0 24px;overflow:hidden}.checkout-purchase-preview>header{align-items:center;background:#fbfaf8;border-bottom:1px solid var(--line);display:flex;gap:11px;padding:15px 18px}.checkout-purchase-preview>header>span{align-items:center;background:#e5f0e9;border-radius:11px;color:var(--progress-green-dark);display:grid;height:38px;justify-content:center;width:38px}.checkout-purchase-preview>header .ui-icon{height:19px;width:19px}.checkout-purchase-preview>header h2,.checkout-purchase-preview>header p{margin:0}.checkout-purchase-preview>header h2{font-size:18px}.checkout-purchase-preview>header p{color:var(--muted);font-size:14px;margin-top:2px}.checkout-purchase-item{align-items:center;display:grid;gap:14px;grid-template-columns:82px minmax(0,1fr) auto;padding:16px 18px}.checkout-purchase-item>img{border-radius:13px;height:76px;object-fit:cover;width:82px}.checkout-purchase-item>div>span,.checkout-purchase-item>div>strong,.checkout-purchase-item>div>p,.checkout-purchase-item>div>small{display:block}.checkout-purchase-item>div>span{color:var(--coffee);font-size:12px;font-weight:900;letter-spacing:.07em}.checkout-purchase-item>div>strong{font-size:17px;margin:3px 0}.checkout-purchase-item>div>p{color:var(--muted);font-size:14px;line-height:1.4;margin:0}.checkout-purchase-item>div>small{align-items:center;color:var(--progress-green-dark);display:flex;font-size:13px;font-weight:800;gap:5px;margin-top:6px}.checkout-purchase-item>div>small .ui-icon{height:15px;width:15px}.checkout-purchase-item>b{color:var(--coffee);font-size:19px;text-align:right;white-space:nowrap}.payment-methods--check{margin-top:16px}.payment-methods--check button{background:#fff;border:1px solid #dcd4cb;border-radius:16px;color:var(--ink);min-height:82px;padding:14px}.payment-methods--check button:hover,.payment-methods--check button:focus-visible{border-color:var(--progress-green-dark)}.payment-methods--check button.active{background:#f0f7f3;border:2px solid var(--progress-green-dark);color:var(--ink);padding:13px}.payment-methods--check button>i{background:#fff;border:2px solid #c8c3bd;color:transparent;opacity:1;transform:none}.payment-methods--check button.active>i{background:var(--progress-green-dark);border-color:var(--progress-green-dark);color:#fff;opacity:1;transform:none}.payment-methods--check button>i .ui-icon{height:14px;width:14px}.payment-methods--check button strong{font-size:16px}.payment-methods--check button small{font-size:14px!important}
@media(max-width:680px){.checkout-customer-fields--details{grid-template-columns:1fr}.checkout-purchase-item{align-items:start;grid-template-columns:70px minmax(0,1fr)}.checkout-purchase-item>img{height:66px;width:70px}.checkout-purchase-item>b{grid-column:2;text-align:left}.payment-methods--check{grid-template-columns:1fr}}

@media(max-width:900px){.advanced-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.class-grid--latest,.calendar-levels{grid-template-columns:1fr}.calendar-days{grid-template-columns:repeat(4,1fr)}.calendar-days div:nth-child(4){border-right:0}.calendar-days div:nth-child(n+5){border-top:1px solid var(--line)}}
@media(max-width:560px){.advanced-filters{grid-template-columns:1fr;padding:14px}.class-grid--latest{grid-template-columns:1fr}.section-title{align-items:start;flex-direction:column;gap:5px}.section-title h2{font-size:1.25rem}.calendar-days{grid-template-columns:repeat(2,1fr)}.calendar-days div:nth-child(2n){border-right:0}.calendar-days div:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:430px){.checkout-purchase-preview>header{align-items:flex-start}.checkout-purchase-item{padding:14px}.checkout-purchase-item>div>strong{font-size:16px}}

/* Checkout para clientas nuevas o usuarias registradas. */
.checkout-steps{align-items:center;display:flex;margin:24px 0}.checkout-steps span{align-items:center;color:var(--muted);display:flex;font-size:14px;font-weight:800;gap:8px;white-space:nowrap}.checkout-steps span b{align-items:center;background:#eee9e2;border-radius:50%;display:grid;font-size:13px;height:28px;justify-content:center;width:28px}.checkout-steps span.active{color:var(--progress-green-dark)}.checkout-steps span.active b{background:var(--progress-green-dark);color:#fff}.checkout-steps>i{background:#ddd8d1;display:block;flex:1;height:1px;margin:0 10px;min-width:16px}.checkout-identity{background:#fbfaf8;border:1px solid #ded6cc;border-radius:19px;margin-bottom:24px;overflow:hidden}.checkout-identity-head{align-items:center;background:#fff;border-bottom:1px solid #e8e1d8;display:flex;gap:16px;justify-content:space-between;padding:17px 18px}.checkout-identity-head>div{align-items:center;display:flex;gap:12px}.checkout-identity-head>div>span{align-items:center;background:#fbf3ea;border-radius:12px;color:var(--progress-green-dark);display:grid;flex:0 0 auto;height:42px;justify-content:center;width:42px}.checkout-identity-head .ui-icon{height:20px;width:20px}.checkout-identity-head strong,.checkout-identity-head p{display:block;margin:0}.checkout-identity-head strong{font-size:17px}.checkout-identity-head p{color:var(--muted);font-size:14px;margin-top:2px}.checkout-identity-head>button{background:#f3ede5;border:1px solid #dfd3c6;border-radius:999px;color:var(--coffee);font-family:inherit;font-size:14px;font-weight:700;padding:9px 13px;white-space:nowrap}.checkout-identity-head>button b{font-weight:900}.customer-panel{padding:18px}.customer-panel[hidden],.customer-signed-in[hidden]{display:none}.customer-new-note{align-items:flex-start;background:#fcf3eb;border:1px solid #ebdcd0;border-radius:14px;display:flex;gap:11px;margin-bottom:17px;padding:13px}.customer-new-note>span{color:var(--progress-green-dark);display:grid;flex:0 0 auto;place-items:center}.customer-new-note .ui-icon{height:21px;width:21px}.customer-new-note strong,.customer-new-note p{display:block;margin:0}.customer-new-note strong{font-size:16px}.customer-new-note p{color:var(--muted);font-size:14px;margin-top:2px}.checkout-customer-fields{display:grid;gap:13px;grid-template-columns:repeat(2,minmax(0,1fr))}.checkout-customer-fields label{color:#514d49;font-size:15px;font-weight:800;margin:0}.checkout-customer-fields input{background:#fff;border:1px solid #dcd4cb;border-radius:12px;display:block;font-family:inherit;font-size:16px;margin-top:7px;outline:none;padding:13px 14px;width:100%}.checkout-customer-fields input:focus{border-color:var(--progress-green-dark);box-shadow:0 0 0 3px #f7ede3}.checkout-legal-check{align-items:flex-start!important;color:var(--muted)!important;font-size:14px!important;line-height:1.45;margin:15px 0 0!important}.checkout-legal-check input{flex:0 0 auto;margin-top:3px!important}.checkout-legal-check a{color:var(--coffee);font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.checkout-google{align-items:center;background:#fff;border:1px solid #d9d4ce;border-radius:12px;color:var(--ink);display:flex;font-family:inherit;font-size:16px;font-weight:800;gap:10px;justify-content:center;min-height:48px;width:100%}.checkout-google span{color:#4285f4;font-size:18px;font-weight:900}.checkout-divider{align-items:center;color:var(--muted);display:flex;font-size:13px;gap:12px;margin:15px 0}.checkout-divider:before,.checkout-divider:after{background:#e2dcd5;content:"";flex:1;height:1px}.checkout-divider span{white-space:nowrap}.checkout-login-actions{align-items:center;display:flex;gap:14px;margin-top:16px}.checkout-login-actions .button{border:0;min-height:45px}.text-button{background:transparent;border:0;color:var(--coffee);font-family:inherit;font-size:14px;font-weight:900;padding:8px}.customer-signed-in{align-items:center;background:#fcf3eb;display:flex;gap:12px;padding:18px}.customer-signed-in .avatar{height:44px;width:44px}.customer-signed-in>div{flex:1}.customer-signed-in strong,.customer-signed-in p{display:block;margin:0}.customer-signed-in strong{font-size:16px}.customer-signed-in p{color:var(--muted);font-size:14px;margin-top:2px}.customer-signed-in>button{background:#fff;border:1px solid #d3ddd7;border-radius:999px;color:var(--coffee);font-family:inherit;font-size:14px;font-weight:800;padding:8px 12px}.checkout-customer-message{font-size:14px;font-weight:800;margin:0;padding:0 18px;transition:padding .2s ease}.checkout-customer-message:not(:empty){padding-bottom:16px}.checkout-customer-message.is-error{color:#a34f42}.checkout-customer-message.is-success{color:var(--progress-green-dark)}.checkout-section-heading{align-items:center;display:flex;gap:11px;margin-top:4px}.checkout-section-heading>span{align-items:center;background:#f3ede5;border-radius:11px;color:var(--coffee);display:grid;height:38px;justify-content:center;width:38px}.checkout-section-heading .ui-icon{height:19px;width:19px}.checkout-section-heading h2,.checkout-section-heading p{margin:0}.checkout-section-heading h2{font-size:19px}.checkout-section-heading p{color:var(--muted);font-size:14px;margin-top:2px}
@media(max-width:680px){.checkout-identity-head{align-items:flex-start;flex-direction:column}.checkout-identity-head>button{width:100%}.checkout-customer-fields{grid-template-columns:1fr}.checkout-login-actions{align-items:stretch;flex-direction:column}.checkout-login-actions .button,.checkout-login-actions .text-button{width:100%}.customer-signed-in{align-items:flex-start;flex-wrap:wrap}.customer-signed-in>button{margin-left:56px}.checkout-steps span{font-size:12px}.checkout-steps span b{height:25px;width:25px}.checkout-steps>i{margin-inline:6px}}
@media(max-width:430px){.checkout-steps span{font-size:0}.checkout-steps span b{font-size:12px}.checkout-steps span:after{font-size:12px}.checkout-steps span:nth-of-type(1):after{content:"Datos"}.checkout-steps span:nth-of-type(2):after{content:"Pago"}.checkout-steps span:nth-of-type(3):after{content:"Acceso"}.checkout-identity-head,.customer-panel,.customer-signed-in{padding:15px}.checkout-identity-head p{font-size:13px}.checkout-section-heading h2{font-size:18px}}

/* Progreso Brella: verde consistente en todo el sistema. */
:root {
  --progress-green: #b0734a;
  --progress-green-dark: #8c5835;
  --progress-green-light: #f7ede3;
}

.form-progress > div,
.lesson-progress > div,
.program-progress > div,
.up-progress,
.owned-progress {
  background: var(--progress-green-light);
}

.form-progress i,
.lesson-progress > div span,
.program-progress i,
.up-progress span,
.owned-progress i {
  background: linear-gradient(90deg, var(--progress-green-dark), var(--progress-green));
  box-shadow: 0 1px 4px rgba(140, 88, 53, .18);
}

.progress-orbit {
  border-color: var(--progress-green-light);
  border-right-color: var(--progress-green);
  border-top-color: var(--progress-green);
}

.progress-orbit strong,
.big-chart b {
  color: var(--progress-green-dark);
}

/* Los indicadores circulares muestran únicamente el porcentaje centrado. */
.progress-orbit {
  display: grid;
  place-content: center;
  place-items: center;
}

.progress-orbit strong {
  display: block;
  margin: 0;
  line-height: 1;
  text-align: center;
}

.progress-orbit small {
  display: none;
}

.big-chart > div > span {
  background: linear-gradient(180deg, var(--progress-green-dark), #a9cbbb);
}

.mini-bars i,
.mini-bars i:nth-child(6) {
  background: linear-gradient(180deg, #89b29d, var(--progress-green-dark));
}

/* Carrito de suscripción: resumen visual, transparente y adaptable. */
.checkout-grid {
  width: 100%;
  max-width: 1080px;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 32px;
  align-items: start;
}

.checkout-grid > section {
  box-shadow: 0 18px 50px rgba(76, 55, 41, .07);
}

.order-summary--enhanced {
  position: sticky;
  top: 96px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #ccdfd4;
  border-radius: 24px;
  background: linear-gradient(155deg, #ffffff 0%, #f5faf7 100%);
  box-shadow: 0 18px 48px rgba(50, 91, 70, .11);
}

.order-summary--enhanced::before {
  position: absolute;
  top: -75px;
  right: -75px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(127, 174, 150, .12);
  content: "";
  pointer-events: none;
}

.order-summary--enhanced > div {
  margin: 0;
  font-size: 16px;
}

.order-summary--enhanced .summary-heading {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.summary-heading-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--progress-green-light);
  color: var(--progress-green-dark);
}

.summary-heading-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.summary-heading p,
.summary-heading h2 {
  margin: 0;
}

.summary-heading p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.summary-heading h2 {
  max-width: 205px;
  overflow: hidden;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-heading > b {
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--progress-green-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}

.order-summary--enhanced .summary-product {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding: 12px;
  border: 1px solid #e1e8e3;
  border-radius: 17px;
  background: rgba(255, 255, 255, .84);
}

.summary-product img {
  width: 82px;
  height: 78px;
  border-radius: 13px;
  object-fit: cover;
}

.summary-product strong,
.summary-product span {
  display: block;
}

.summary-product strong {
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.summary-product span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.order-summary--enhanced .summary-benefits {
  display: block;
  margin-top: 20px;
}

.summary-benefits > p {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.summary-benefits ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.summary-benefits li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #585d59;
  font-size: 15px;
  line-height: 1.35;
}

.summary-benefits li span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--progress-green-light);
  color: var(--progress-green-dark);
  font-size: 12px;
  font-weight: 900;
}

.order-summary--enhanced .summary-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 20px;
  padding: 5px 15px;
  border: 1px solid #e1e8e3;
  border-radius: 16px;
  background: rgba(255, 255, 255, .74);
}

.summary-details > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid #e7ece9;
}

.summary-details > div:last-child {
  border-bottom: 0;
}

.summary-details span,
.summary-details strong {
  font-size: 14px;
}

.summary-details span {
  color: var(--muted);
}

.summary-details strong {
  color: var(--ink);
  text-align: right;
}

.order-summary--enhanced .summary-saving {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #e3f1e9;
  color: var(--progress-green-dark);
}

.summary-saving[hidden] {
  display: none;
}

.summary-saving > .ui-icon {
  width: 20px;
  height: 20px;
}

.summary-saving strong,
.summary-saving small {
  display: block;
}

.summary-saving strong {
  font-size: 15px;
}

.summary-saving small {
  margin-top: 2px;
  color: #61786c;
  font-size: 12px;
}

.order-summary--enhanced hr {
  margin: 20px 0 14px;
  border-top-color: #d9e4de;
}

.order-summary--enhanced .summary-price {
  display: grid;
  gap: 8px;
}

.summary-price > div,
.order-summary--enhanced .total {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.summary-price span,
.summary-price strong {
  font-size: 14px;
}

.summary-price span {
  color: var(--muted);
}

.summary-price strong {
  color: var(--ink);
}

.order-summary--enhanced .total {
  align-items: end;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid #d6e4dc;
}

.order-summary--enhanced .total span {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.order-summary--enhanced .total strong {
  color: var(--progress-green-dark);
  font-family: Nunito, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
}

.order-summary--enhanced > .summary-tax {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.order-summary--enhanced .summary-secure {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #dfe8e3;
  color: var(--progress-green-dark);
}

.summary-secure > .ui-icon {
  width: 22px;
  height: 22px;
}

.summary-secure strong,
.summary-secure small {
  display: block;
}

.summary-secure strong {
  font-size: 14px;
}

.summary-secure small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1040px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
  }

  .order-summary--enhanced {
    padding: 20px;
  }

  .summary-heading > b {
    grid-column: 2;
    width: max-content;
  }
}

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

  .order-summary--enhanced {
    position: static;
    order: -1;
  }
}

@media (max-width: 480px) {
  .order-summary--enhanced {
    padding: 18px;
    border-radius: 20px;
  }

  .order-summary--enhanced .summary-heading {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .summary-heading > b {
    grid-column: 2;
  }

  .summary-heading h2 {
    max-width: 220px;
  }

  .order-summary--enhanced .summary-product {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .summary-product img {
    width: 70px;
    height: 70px;
  }
}

/* Calendario semanal Brella: iconos SVG y estados más claros. */
.week-card .calendar-title h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-heading-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #ebdcd0;
  border-radius: 12px;
  background: linear-gradient(145deg, #fcf6f0, #f7eee4);
  color: var(--progress-green-dark, #8c5835);
  box-shadow: 0 6px 16px rgba(111, 78, 55, .1);
}

.calendar-heading-icon .ui-icon,
.calendar-heading-icon .calendar-svg {
  width: 21px;
  height: 21px;
}

.calendar-title .week-score {
  min-width: 60px;
  padding: 8px 11px;
  border: 1px solid #ebdcd0;
  border-radius: 999px;
  background: #fcf6f0;
  color: var(--progress-green-dark, #8c5835);
  font-family: Nunito, sans-serif;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.week-card .days {
  gap: clamp(3px, 1vw, 10px);
  margin: 22px 0 18px;
}

.week-card .days > div {
  position: relative;
  gap: 9px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  transition: transform .2s ease;
}

.week-card .days > div:hover {
  transform: translateY(-2px);
}

.week-card .days > div > span {
  color: #77716b;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 800;
  letter-spacing: .01em;
}

.week-card .days b {
  width: clamp(32px, 6vw, 44px);
  height: clamp(32px, 6vw, 44px);
  position: relative;
  border: 1px solid #e3e0dc;
  border-radius: 14px;
  background: #faf9f7;
  color: #5f5a55;
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.week-card .days .done b {
  border-color: var(--progress-green, #b0734a);
  background: linear-gradient(145deg, var(--progress-green, #b0734a), var(--progress-green-dark, #8c5835));
  color: #fff;
  box-shadow: 0 7px 15px rgba(111, 78, 55, .2);
}

.day-status {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  position: absolute;
  top: -6px;
  right: -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  color: var(--progress-green-dark, #8c5835);
  box-shadow: 0 3px 8px rgba(111, 78, 55, .2);
}

.day-status .ui-icon,
.day-status .check-svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.8;
}

.week-card .days .today > span {
  color: var(--progress-green-dark, #8c5835);
  font-weight: 900;
}

.week-card .days .today b {
  border: 2px solid var(--progress-green, #b0734a);
  background: #fff;
  color: var(--progress-green-dark, #8c5835);
  box-shadow: 0 0 0 4px var(--progress-green-light, #f7ede3);
}

.week-card .days .today b::after {
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 4px;
  left: 50%;
  border-radius: 50%;
  background: var(--progress-green, #b0734a);
  content: "";
  transform: translateX(-50%);
}

@media (max-width: 480px) {
  .calendar-heading-icon {
    width: 34px;
    height: 34px;
  }

  .calendar-title .week-score {
    min-width: 54px;
    padding-inline: 8px;
  }

  .week-card .days b {
    border-radius: 11px;
  }
}

/* Selector de ordenamiento funcional para clases y cursos. */
.sort-control {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #ddd5cc;
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 16px rgba(71, 53, 40, .06);
  cursor: pointer;
}

.sort-control:focus-within {
  border-color: var(--progress-green, #5f9277);
  box-shadow: 0 0 0 3px var(--progress-green-light, #dcebe3);
}

.sort-control > span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.sort-control select {
  max-width: 190px;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--ink);
  font-family: Nunito, sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.sort-control > i {
  display: grid;
  place-items: center;
  color: var(--progress-green-dark, #3f7059);
  pointer-events: none;
}

.sort-control > i .ui-icon,
.sort-control > i svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 620px) {
  .catalog-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .sort-control {
    width: 100%;
  }

  .sort-control select {
    max-width: none;
    flex: 1;
  }
}

/* Historial de pagos dentro de Mi cuenta. */
.payment-history-card {
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(71, 53, 40, .07);
}

.payment-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--line);
}

.payment-history-head h2 {
  margin: 0 0 7px;
  font-size: 26px;
}

.payment-history-head > div:first-child > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.payment-history-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.payment-history-tools > span {
  padding: 9px 12px;
  border-radius: 999px;
  background: #f3f0eb;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.payment-history-tools > span b {
  color: var(--ink);
  font-size: 16px;
}

.payment-history-tools label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid #ddd5cc;
  border-radius: 12px;
  background: #fff;
}

.payment-history-tools label > span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.payment-history-tools select {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: Nunito, sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.payment-history-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.payment-history-table {
  width: 100%;
  border-collapse: collapse;
}

.payment-history-table th,
.payment-history-table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: middle;
}

.payment-history-table th {
  background: #faf8f5;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.payment-history-table td {
  border-top: 1px solid #eee8e1;
  color: var(--ink);
  font-size: 15px;
}

.payment-history-table tbody tr:first-child td {
  border-top: 0;
}

.payment-history-table tbody tr {
  transition: background .2s ease;
}

.payment-history-table tbody tr:hover {
  background: #fcfbf9;
}

.payment-history-table td > strong,
.payment-history-table td > small {
  display: block;
}

.payment-history-table td > strong {
  font-size: 15px;
  font-weight: 800;
}

.payment-history-table td > small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.payment-history-table td[data-label="Medio de pago"] {
  display: table-cell;
  white-space: nowrap;
}

.payment-method-mark {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  margin-right: 8px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
}

.payment-method-mark--mp {
  background: #dff1ff;
  color: #1769aa;
}

.payment-method-mark--paypal {
  background: #e8eefb;
  color: #173b75;
}

.payment-state {
  min-width: 110px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.payment-state .ui-icon {
  width: 16px;
  height: 16px;
}

.payment-state--success {
  background: #e2f2e9;
  color: #347054;
}

.payment-state--pending {
  background: #fff2d8;
  color: #966416;
}

.payment-state--failed {
  background: #fae7e3;
  color: #a34f42;
}

.payment-history-table tr[hidden] {
  display: none !important;
}

.payment-history-empty {
  padding: 42px 24px;
  color: var(--muted);
  text-align: center;
}

.payment-history-empty > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 13px;
  background: #f3f0eb;
  color: var(--coffee);
}

.payment-history-empty strong,
.payment-history-empty p {
  display: block;
  font-size: 16px;
}

.payment-history-empty p {
  margin: 5px 0 0;
}

@media (max-width: 760px) {
  .payment-history-head {
    align-items: stretch;
    flex-direction: column;
    padding: 22px 20px;
  }

  .payment-history-tools {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .payment-history-tools label {
    flex: 1;
  }

  .payment-history-tools select {
    flex: 1;
  }

  .payment-history-table-wrap {
    padding: 14px;
    overflow: visible;
  }

  .payment-history-table,
  .payment-history-table tbody {
    display: block;
  }

  .payment-history-table thead {
    display: none;
  }

  .payment-history-table tbody tr {
    display: grid;
    gap: 2px;
    margin-bottom: 12px;
    padding: 13px 14px;
    border: 1px solid #e8e1d8;
    border-radius: 16px;
    background: #fff;
  }

  .payment-history-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .payment-history-table td,
  .payment-history-table td[data-label="Medio de pago"] {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    align-items: center;
    padding: 7px 0;
    border: 0;
    white-space: normal;
  }

  .payment-history-table td::before {
    grid-column: 1;
    grid-row: 1 / span 2;
    color: var(--muted);
    content: attr(data-label);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .payment-history-table td > strong,
  .payment-history-table td > small,
  .payment-history-table td > .payment-state {
    grid-column: 2;
  }

  .payment-history-table td[data-label="Medio de pago"] {
    grid-template-columns: 105px 30px minmax(0, 1fr);
    gap: 7px;
  }

  .payment-history-table td[data-label="Medio de pago"]::before {
    grid-column: 1;
  }

  .payment-history-table td[data-label="Medio de pago"] .payment-method-mark {
    grid-column: 2;
    margin: 0;
  }

  .payment-history-table td[data-label="Medio de pago"] > span:last-child {
    grid-column: 3;
  }

  .payment-state {
    width: max-content;
  }
}

@media (max-width: 430px) {
  .payment-history-tools {
    flex-direction: column;
  }

  .payment-history-tools > span {
    width: max-content;
  }

  .payment-history-table td,
  .payment-history-table td[data-label="Medio de pago"] {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .payment-history-table td[data-label="Medio de pago"] {
    grid-template-columns: 92px 30px minmax(0, 1fr);
  }
}

/* Centro legal, privacidad y consentimiento de cookies */
.auth-legal-links {
  position: fixed;
  z-index: 18;
  right: 32px;
  bottom: 18px;
  width: calc(50% - 64px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  font-weight: 800;
}

.auth-legal-links a {
  color: var(--muted);
  text-decoration: none;
}

.auth-legal-links a:hover,
.auth-legal-links a:focus-visible {
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legal-page {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 4%, rgba(189, 209, 197, .34), transparent 24rem),
    var(--cream);
  font-family: "Nunito", sans-serif;
}

.legal-header {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px max(28px, calc((100vw - 1280px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
}

.legal-brand img {
  width: 150px;
  display: block;
}

.legal-header > div {
  display: flex;
  align-items: center;
  gap: 22px;
}

.legal-header > div > span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.legal-header > div > a {
  color: var(--brown);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

.legal-header > div > a b {
  margin-left: 5px;
}

.legal-shell {
  width: min(1280px, calc(100% - 56px));
  margin: 42px auto 76px;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: 36px;
}

.legal-nav {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 34px rgba(70, 52, 41, .06);
}

.legal-nav > p {
  margin: 2px 12px 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legal-nav > a {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 15px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
  text-decoration: none;
}

.legal-nav > a span {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.legal-nav > a:hover,
.legal-nav > a.active {
  color: var(--brown);
  background: var(--cream-2);
}

.legal-contact {
  margin-top: 12px;
  padding: 16px;
  border-radius: 17px;
  color: white;
  background: var(--brown);
}

.legal-contact strong,
.legal-contact a {
  display: block;
}

.legal-contact strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.legal-contact a {
  color: var(--mint);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.legal-content {
  min-width: 0;
}

.legal-document {
  display: grid;
  gap: 18px;
}

.legal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 58px);
  border-radius: 32px;
  color: white;
  background: linear-gradient(135deg, #503521 0%, #805d42 100%);
  box-shadow: 0 24px 50px rgba(71, 49, 34, .16);
}

.legal-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 270px;
  height: 270px;
  border: 46px solid rgba(189, 209, 197, .18);
  border-radius: 50%;
}

.legal-hero--law {
  background: linear-gradient(135deg, #29443a 0%, #537364 100%);
}

.legal-hero .eyebrow {
  position: relative;
  z-index: 1;
  color: var(--mint);
}

.legal-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 8px 0 12px;
  color: white;
  font-size: clamp(36px, 5.3vw, 62px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.legal-hero > p:not(.eyebrow) {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 18px;
  line-height: 1.65;
}

.legal-meta {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-meta span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: white;
  font-size: 13px;
  font-weight: 850;
}

.legal-document > section {
  padding: clamp(25px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: white;
  box-shadow: 0 12px 32px rgba(70, 52, 41, .045);
  scroll-margin-top: 110px;
}

.legal-document section h2 {
  margin: 0 0 15px;
  color: var(--brown);
  font-size: clamp(23px, 3vw, 30px);
  line-height: 1.18;
  letter-spacing: -.025em;
}

.legal-document section h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 18px;
}

.legal-document section p,
.legal-document section li,
.legal-document section td,
.legal-document section th {
  font-size: 16px;
  line-height: 1.72;
}

.legal-document section p {
  margin: 0 0 14px;
  color: var(--muted);
}

.legal-document section p:last-child {
  margin-bottom: 0;
}

.legal-document section ul {
  margin: 12px 0 18px;
  padding-left: 22px;
  color: var(--muted);
}

.legal-document section li + li {
  margin-top: 8px;
}

.legal-document a {
  color: var(--brown);
  font-weight: 850;
  text-underline-offset: 3px;
}

.legal-review-note,
.legal-law-alert,
.law-countdown {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 22px;
}

.legal-review-note {
  border: 1px solid #e9d5aa;
  background: #fff8e8;
}

.legal-review-note strong,
.legal-review-note p,
.legal-law-alert strong,
.legal-law-alert p,
.law-countdown strong,
.law-countdown p {
  margin: 0;
}

.legal-review-note strong {
  min-width: 195px;
  color: #7b5720;
  font-size: 16px;
}

.legal-review-note p {
  color: #755f3e;
  font-size: 15px;
  line-height: 1.6;
}

.legal-law-alert {
  border: 1px solid #bcd2c5;
  background: #edf5f0;
}

.legal-law-alert > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #3c6252;
}

.legal-law-alert strong {
  display: block;
  margin-bottom: 4px;
  color: #315545;
  font-size: 18px;
}

.legal-law-alert p {
  color: #526c61;
  font-size: 15px;
  line-height: 1.55;
}

.law-countdown {
  align-items: center;
  color: white;
  background: #6f4e37;
}

.law-countdown > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 17px;
  color: #315545;
  background: var(--mint);
  font-size: 24px;
  font-weight: 950;
}

.law-countdown strong {
  display: block;
  margin-bottom: 2px;
  font-size: 20px;
}

.law-countdown p {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.55;
}

.legal-inline-note {
  padding: 15px 17px;
  border-left: 4px solid var(--brown);
  border-radius: 0 12px 12px 0;
  background: var(--cream-2);
}

.legal-data-grid,
.rights-grid,
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.legal-data-grid article,
.rights-grid article,
.principles-grid article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--cream);
}

.legal-data-grid strong,
.rights-grid b,
.principles-grid b {
  display: block;
  margin-bottom: 6px;
  color: var(--brown);
  font-size: 16px;
}

.legal-data-grid p,
.rights-grid span,
.principles-grid span {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.legal-table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 17px;
}

.legal-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.legal-table th,
.legal-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  color: var(--brown);
  background: var(--cream-2);
  font-weight: 900;
}

.legal-table td {
  color: var(--muted);
}

.legal-table tr:last-child td {
  border-bottom: 0;
}

.legal-table code {
  color: var(--brown);
  font-size: 14px;
  font-weight: 800;
}

.cookie-category-list,
.compliance-checklist {
  display: grid;
  gap: 12px;
}

.cookie-category-list article {
  display: grid;
  grid-template-columns: 125px 1fr;
  align-items: start;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--cream);
}

.cookie-status {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--brown);
  background: #eadfd5;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.cookie-status--required {
  color: #315545;
  background: var(--mint);
}

.cookie-category-list p {
  margin: 0 !important;
}

.compliance-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--cream);
}

.compliance-checklist label > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  color: white;
  background: var(--brown);
  font-weight: 950;
}

.compliance-checklist strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 16px;
}

.compliance-checklist p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.roadmap article {
  padding: 20px;
  border-radius: 18px;
  color: white;
  background: var(--brown);
}

.roadmap article:nth-child(2) {
  background: #537364;
}

.roadmap article:nth-child(3) {
  color: var(--ink);
  background: var(--mint);
}

.roadmap span,
.roadmap strong {
  display: block;
}

.roadmap span {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roadmap strong {
  margin-bottom: 6px;
  font-size: 20px;
}

.roadmap p {
  margin: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  opacity: .82;
}

.official-links {
  list-style: none;
  padding: 0 !important;
}

.official-links li {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--cream);
}

.legal-footer {
  width: min(1280px, calc(100% - 56px));
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(280px, 1.4fr) auto;
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: white;
}

.legal-footer img {
  width: 122px;
}

.legal-footer p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
}

.legal-footer nav a,
.legal-footer > button {
  color: var(--brown);
  font-size: 13px;
  font-weight: 850;
}

.legal-footer nav a {
  text-decoration: none;
}

.legal-footer > button {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  cursor: pointer;
}

.legal-footer > small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.cookie-banner {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 20px;
  width: min(1040px, calc(100% - 36px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  color: white;
  background: rgba(61, 42, 30, .97);
  box-shadow: 0 24px 80px rgba(35, 24, 18, .28);
  transform: translateX(-50%);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cookie-banner > div:first-child > span {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: var(--mint);
}

.cookie-banner strong {
  display: block;
  margin-bottom: 3px;
  font-size: 17px;
}

.cookie-banner p {
  max-width: 580px;
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  line-height: 1.5;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
}

.cookie-banner-actions .button {
  min-height: 44px;
  padding: 10px 14px;
  white-space: nowrap;
}

.cookie-banner-actions .button--ghost {
  color: white;
  border-color: rgba(255, 255, 255, .35);
  background: transparent;
}

.cookie-banner-actions > a {
  padding: 10px 7px;
  color: var(--mint);
  font-size: 14px;
  font-weight: 850;
}

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

  .legal-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal-nav > p,
  .legal-contact {
    grid-column: 1 / -1;
  }

  .legal-footer {
    grid-template-columns: 1fr 1fr;
  }

  .legal-footer > button {
    justify-self: start;
  }

  .cookie-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .cookie-banner-actions {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .auth-legal-links {
    position: static;
    width: auto;
    padding: 14px 18px 22px;
    background: white;
  }

  .legal-header {
    min-height: 70px;
    padding: 12px 20px;
  }

  .legal-brand img {
    width: 124px;
  }

  .legal-header > div > span {
    display: none;
  }

  .legal-shell,
  .legal-footer {
    width: min(100% - 28px, 680px);
  }

  .legal-shell {
    margin-top: 20px;
    gap: 20px;
  }

  .legal-nav {
    grid-template-columns: 1fr;
    padding: 12px;
    border-radius: 19px;
  }

  .legal-nav > p,
  .legal-contact {
    grid-column: auto;
  }

  .legal-contact {
    display: none;
  }

  .legal-hero,
  .legal-document > section {
    border-radius: 22px;
  }

  .legal-data-grid,
  .rights-grid,
  .principles-grid,
  .roadmap {
    grid-template-columns: 1fr;
  }

  .legal-review-note {
    display: block;
  }

  .legal-review-note strong {
    display: block;
    min-width: 0;
    margin-bottom: 6px;
  }

  .cookie-category-list article {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cookie-status {
    justify-self: start;
  }

  .legal-footer {
    grid-template-columns: 1fr;
  }

  .legal-footer > small {
    grid-column: auto;
  }

  .cookie-banner {
    bottom: 10px;
    width: calc(100% - 20px);
    padding: 17px;
    border-radius: 20px;
  }

  .cookie-banner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookie-banner-actions > a {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
  }

  .cookie-banner-actions .button {
    white-space: normal;
  }
}

/* Reproductor: títulos legibles, controles SVG y transición entre clases. */
.lesson-list strong,
.up-next a strong {
  font-size: 16px !important;
  line-height: 1.35;
}

.up-next > a {
  border-radius: 12px;
  transition: background-color .2s ease, color .2s ease, padding .2s ease;
}

.up-next > a:hover,
.up-next > a:focus-visible {
  background: #f7f2ec;
  outline: none;
}

.up-next > a.playing {
  padding-inline: 10px;
  background: #f3ece4;
  color: var(--coffee);
}

.up-next > a > b {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  font-size: 14px !important;
}

.up-next > a > span {
  min-width: 0;
}

.up-next a strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.up-next .ui-icon,
.lesson-list > a > i .ui-icon {
  width: 17px;
  height: 17px;
}

.lesson-list > a > i {
  display: grid;
  place-items: center;
}

.main-play {
  display: grid;
  place-items: center;
  padding: 0 !important;
  color: var(--coffee);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
  transition: opacity .22s ease, transform .22s ease, background-color .2s ease, color .2s ease;
}

.main-play:hover,
.main-play:focus-visible {
  color: #fff;
  background: var(--coffee);
  outline: 4px solid rgba(255, 255, 255, .34);
  transform: translate(-50%, -50%) scale(1.06);
}

.main-play .ui-icon {
  width: 30px;
  height: 30px;
}

.video-player.is-playing .main-play {
  color: #fff;
  background: rgba(111, 78, 55, .94);
}

.video-player > img {
  opacity: 1;
  transform: scale(1);
  transition: opacity .28s ease, transform .38s ease;
}

.video-player.is-switching > img {
  opacity: .24;
  transform: scale(1.025);
}

.video-player.is-switching .main-play,
.video-player.is-switching .video-controls {
  opacity: 0;
  pointer-events: none;
}

.player-info,
.class-description {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .24s ease, transform .24s ease;
}

.player-info.is-switching,
.class-description.is-switching {
  opacity: 0;
  transform: translateY(7px);
}

.player-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.player-time .ui-icon {
  width: 14px;
  height: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .up-next > a,
  .main-play,
  .video-player > img,
  .player-info,
  .class-description {
    transition: none;
  }
}

/* Movimiento de entrada desde el login y microinteracciones del panel. */
.auth-visual,
.auth-panel {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
}

body.auth-exit .screen.is-active .auth-visual {
  opacity: 0;
  transform: translateX(-24px);
}

body.auth-exit .screen.is-active .auth-panel {
  opacity: 0;
  transform: translateX(24px);
}

.auth-entry-link.is-loading {
  pointer-events: none;
  animation: auth-button-breathe .7s ease-in-out infinite alternate;
}

.login-enter .side-nav {
  animation: login-side-in .72s cubic-bezier(.22, 1, .36, 1) both;
}

.login-enter .member-header {
  animation: login-header-in .58s .12s cubic-bezier(.22, 1, .36, 1) both;
}

.login-enter .side-nav nav a {
  animation: login-nav-in .46s cubic-bezier(.22, 1, .36, 1) both;
}

.login-enter .side-nav nav a:nth-child(1) { animation-delay: .16s; }
.login-enter .side-nav nav a:nth-child(2) { animation-delay: .21s; }
.login-enter .side-nav nav a:nth-child(3) { animation-delay: .26s; }
.login-enter .side-nav nav a:nth-child(4) { animation-delay: .31s; }
.login-enter .side-nav nav a:nth-child(5) { animation-delay: .36s; }
.login-enter .side-nav nav a:nth-child(6) { animation-delay: .41s; }
.login-enter .side-nav nav a:nth-child(7) { animation-delay: .46s; }

.login-enter .side-promo,
.login-enter .account-link {
  animation: login-rise-in .55s .48s cubic-bezier(.22, 1, .36, 1) both;
}

.login-enter #view-app .dashboard-head,
.login-enter #view-app .continue-card,
.login-enter #view-app .dashboard-grid,
.login-enter #view-app .recommend-section {
  animation: login-rise-in .68s cubic-bezier(.22, 1, .36, 1) both;
}

.login-enter #view-app .dashboard-head { animation-delay: .18s; }
.login-enter #view-app .continue-card { animation-delay: .29s; }
.login-enter #view-app .dashboard-grid { animation-delay: .40s; }
.login-enter #view-app .recommend-section { animation-delay: .51s; }

.login-enter .mobile-nav {
  animation: login-rise-in .55s .35s cubic-bezier(.22, 1, .36, 1) both;
}

.login-enter .mini-bars i {
  transform-origin: bottom;
  animation: login-bar-grow .58s .56s cubic-bezier(.22, 1, .36, 1) both;
}

.side-nav nav a,
.continue-card,
.week-card,
.minutes-card,
.class-card,
.streak,
.side-promo {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.class-thumb img {
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

#member-shell.is-active .side-promo .promo-icon {
  animation: gentle-float 3.8s ease-in-out infinite;
}

#member-shell.is-active .streak > span {
  animation: gentle-breathe 3.4s ease-in-out infinite;
}

@media (hover: hover) {
  .side-nav nav a:hover {
    transform: translateX(4px);
  }

  .continue-card:hover,
  .week-card:hover,
  .minutes-card:hover,
  .class-card:hover,
  .streak:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(71, 53, 40, .12);
  }

  .class-card:hover .class-thumb img {
    transform: scale(1.035);
  }

  .side-promo:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(71, 53, 40, .2);
  }
}

@keyframes auth-button-breathe {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(1.08); transform: scale(.985); }
}

@keyframes login-side-in {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes login-header-in {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes login-nav-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes login-rise-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes login-bar-grow {
  from { transform: scaleY(.12); opacity: .35; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes gentle-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(4deg); }
}

@keyframes gentle-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(111, 78, 55, 0); }
  50% { transform: scale(1.06); box-shadow: 0 7px 18px rgba(111, 78, 55, .12); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-visual,
  .auth-panel,
  .side-nav nav a,
  .continue-card,
  .week-card,
  .minutes-card,
  .class-card,
  .streak,
  .side-promo,
  .class-thumb img {
    transition: none;
  }

  .auth-entry-link.is-loading,
  .login-enter .side-nav,
  .login-enter .member-header,
  .login-enter .side-nav nav a,
  .login-enter .side-promo,
  .login-enter .account-link,
  .login-enter #view-app .dashboard-head,
  .login-enter #view-app .continue-card,
  .login-enter #view-app .dashboard-grid,
  .login-enter #view-app .recommend-section,
  .login-enter .mobile-nav,
  .login-enter .mini-bars i,
  #member-shell.is-active .side-promo .promo-icon,
  #member-shell.is-active .streak > span {
    animation: none;
  }
}

/* Menú lateral adaptable: títulos en una línea y tarjetas sin recortes. */
@media (min-width: 721px) {
  :root {
    --brella-sidebar-width: clamp(270px, 20vw, 292px);
  }

  .side-nav {
    width: var(--brella-sidebar-width);
    padding-inline: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .member-main {
    width: calc(100% - var(--brella-sidebar-width));
    margin-left: var(--brella-sidebar-width);
  }

  .side-logo,
  .side-nav nav,
  .side-promo,
  .account-link {
    flex: 0 0 auto;
  }

  .side-logo {
    margin-bottom: 24px;
  }

  .side-nav nav a {
    min-width: 0;
    gap: 10px;
    padding-inline: 12px;
    white-space: nowrap;
  }

  .side-promo {
    min-height: 160px;
    margin-top: 18px;
    padding: 16px 18px;
  }

  .side-promo strong {
    margin: 9px 0 3px;
    white-space: nowrap;
  }

  .side-promo p {
    margin-bottom: 5px;
    line-height: 1.35;
  }

  .account-link {
    min-height: 44px;
    margin-top: 14px;
  }

  .account-link > span:nth-child(2) {
    min-width: 0;
  }

  .account-link strong,
  .account-link small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 721px) and (max-height: 760px) {
  .side-nav {
    padding-block: 20px 16px;
  }

  .side-logo {
    margin-bottom: 16px;
  }

  .side-nav nav a {
    padding-block: 8px;
  }

  .side-promo {
    min-height: 154px;
    margin-top: 12px;
    padding-block: 14px;
  }

  .account-link {
    margin-top: 10px;
  }
}

/* Navegación y páginas completas de Mi cuenta. */
.account-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  position: sticky;
  top: 76px;
  z-index: 24;
  margin: -18px -42px 30px;
  padding: 14px 42px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 244, 239, .97);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
}

.account-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 15px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.account-tabs a:hover,
.account-tabs a:focus-visible {
  background: #eee7df;
  color: var(--coffee);
  outline: none;
}

.account-tabs a.active {
  background: var(--coffee);
  color: #fff;
  box-shadow: 0 7px 18px rgba(111, 78, 55, .18);
}

.account-tabs .ui-icon {
  width: 18px;
  height: 18px;
}

.account-layout {
  grid-template-columns: 1fr;
}

.account-layout > aside {
  display: none;
}

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.settings-section {
  display: grid;
  grid-template-columns: minmax(210px, .55fr) minmax(0, 1fr);
  gap: 36px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.settings-section h2,
.notification-head h2,
.security-grid h2 {
  margin-bottom: 7px;
}

.settings-section > div:first-child p,
.notification-head p,
.security-grid .settings-card > p {
  margin: 0;
  color: var(--muted);
}

.preference-list {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.preference-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 18px;
  background: #fff;
}

.preference-row + .preference-row {
  border-top: 1px solid var(--line);
}

.preference-row > span:first-child strong,
.preference-row > span:first-child small {
  display: block;
}

.preference-row small,
.notification-row small,
.connected-account small,
.active-session small {
  margin-top: 3px;
  color: var(--muted);
}

.settings-save {
  align-self: flex-end;
}

.notification-head {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 20px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.notification-head > div:last-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.notification-row {
  display: grid;
  grid-template-columns: 1fr 72px 72px;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.notification-row > span strong,
.notification-row > span small {
  display: block;
}

.notification-row > .switch {
  justify-self: center;
}

.notification-list + .settings-save {
  margin-top: 24px;
}

.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.security-grid .settings-card {
  height: fit-content;
}

.connected-account,
.active-session {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 20px 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbf9f5;
}

.connected-account > span,
.active-session > span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  color: var(--coffee);
  font-weight: 900;
}

.connected-account > div,
.active-session > div {
  flex: 1;
}

.connected-account strong,
.connected-account small,
.active-session strong,
.active-session small {
  display: block;
}

.connected-account > b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #e1eee7;
  color: #527363;
  font-size: 13px;
}

.security-grid hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.security-logout {
  width: 100%;
}

@media (max-width: 860px) {
  .settings-section,
  .security-grid {
    grid-template-columns: 1fr;
  }

  .settings-section {
    gap: 20px;
  }
}

@media (max-width: 720px) {
  .account-tabs {
    top: 64px;
    margin: -15px -16px 24px;
    padding: 11px 16px;
  }

  .notification-head {
    display: block;
  }

  .notification-head > div:last-child {
    display: none;
  }

  .notification-row {
    grid-template-columns: 1fr 46px 46px;
    gap: 10px;
  }
}

/* Escala tipográfica unificada: textos de lectura a 16 px. */
body,
p,
small,
label,
input,
select,
textarea,
button,
.button,
.google-button,
.auth-switch,
.form-intro,
.side-nav nav a,
.side-promo strong,
.side-promo p,
.side-promo a,
.account-link strong,
.account-link small,
.page-heading > div > p,
.search-box input,
.filter-row button,
.catalog-summary,
.catalog-summary a,
.store-body > p,
.store-body > span,
.course-teacher small,
.course-buy .button,
.class-card-body p,
.class-card-body h3,
.class-card-body small,
.program-card p,
.program-card span,
.program-card small,
.owned-course-body p,
.owned-course-body small,
.owned-course-body .button,
.lesson-list strong,
.lesson-list small,
.teacher-line span,
.player-info p,
.class-description p,
.class-description span,
.class-description b,
.up-next small,
.tab-row button,
.stats-grid small,
.stats-grid em,
.plans-grid p,
.plans-grid span,
.plans-grid li,
.plan-note,
.checkout-form label,
.checkout-form input,
.order-summary span,
.order-summary strong,
.account-layout aside a,
.settings-card p,
.settings-card button,
.settings-form label,
.settings-form input,
.settings-form select,
.admin-side nav a,
.admin-side > span,
.admin-user strong,
.admin-user small,
.admin-main > header button,
.admin-main > header input,
.admin-stats article > span,
.admin-stats article > small,
.activity-list span,
.admin-content table,
.admin-content th,
.admin-content td,
.admin-filters input,
.admin-filters button,
.admin-content-grid p,
.reminder-grid p,
.reminder-grid article > div:nth-of-type(2) span,
.reminder-grid article > button,
.payment-alert p,
.payment-alert strong,
.payment-alert button {
  font-size: 16px !important;
  line-height: 1.5;
}

.member-content a,
.admin-content a,
.mobile-nav a,
.back-link,
.recommend-section .section-title > a {
  font-size: 16px !important;
  line-height: 1.5;
}

/* Etiquetas breves que funcionan como indicadores visuales. */
.eyebrow,
.course-badge,
.status-pill,
.status,
.soft-badge,
.duration,
.card-kicker {
  font-size: 13px !important;
  line-height: 1.25;
}

.course-buy strong {
  font-size: 20px;
}

.course-buy strong small {
  font-size: 13px !important;
}

.avatar,
.table-avatar {
  font-size: 13px !important;
}

/* Barra superior: buscador, favoritos y menú de usuario. */
.member-header {
  position: sticky;
  top: 0;
  z-index: 35;
  border-bottom: 1px solid rgba(232, 225, 216, .8);
  background: rgba(247, 244, 239, .94);
  backdrop-filter: blur(14px);
}

.member-actions {
  position: relative;
  gap: 12px;
}

.global-search,
.user-menu {
  position: relative;
}

.member-actions .top-action,
.member-actions .user-menu-toggle {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--coffee);
  box-shadow: 0 5px 18px rgba(71, 53, 40, .06);
  transition: border-color .2s, transform .2s, background .2s;
}

.member-actions .top-action:hover,
.member-actions .top-action:focus-visible,
.member-actions .user-menu-toggle:hover,
.member-actions .user-menu-toggle:focus-visible,
.member-actions .top-action.active,
.member-actions .user-menu-toggle.active {
  border-color: var(--coffee);
  background: #f2ece3;
  outline: none;
  transform: translateY(-1px);
}

.search-toggle {
  padding-bottom: 4px;
  font-size: 25px !important;
  line-height: 1;
}

.favorites-action {
  font-size: 18px !important;
}

.favorites-action b {
  min-width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 0 5px;
  border: 2px solid #f7f4ef;
  border-radius: 99px;
  background: #ad6a55;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.global-search-panel,
.user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(71, 53, 40, .16);
}

.global-search-panel {
  right: -108px;
  width: min(440px, calc(100vw - 32px));
  padding: 16px;
}

.global-search-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-search-head label {
  min-width: 0;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbf9f5;
  color: var(--coffee);
}

.global-search-head input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.member-actions .search-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: #f2ece3;
  color: var(--coffee);
  font-size: 23px !important;
}

.global-search-panel > p {
  margin: 16px 4px 8px;
  color: var(--muted);
  font-size: 13px !important;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.global-search-results {
  max-height: 340px;
  overflow-y: auto;
}

.global-search-results a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 11px;
  color: var(--ink);
}

.global-search-results a:hover,
.global-search-results a:focus-visible {
  background: #f5f0e9;
  outline: none;
}

.global-search-results a > span {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #e6eee9;
  color: var(--coffee);
}

.global-search-results a strong,
.global-search-results a small {
  display: block;
}

.global-search-results a small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px !important;
}

.search-empty {
  margin: 0;
  padding: 24px 12px;
  color: var(--muted);
  text-align: center;
}

.user-dropdown {
  right: 0;
  width: 280px;
  overflow: hidden;
  padding: 10px;
}

.user-dropdown-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 7px;
  padding: 10px 9px 14px;
  border-bottom: 1px solid var(--line);
}

.user-dropdown-head .avatar {
  width: 42px;
  height: 42px;
}

.user-dropdown-head strong,
.user-dropdown-head small {
  display: block;
}

.user-dropdown-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px !important;
}

.user-dropdown > a,
.member-actions .user-dropdown > button {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.user-dropdown > a:hover,
.member-actions .user-dropdown > button:hover,
.user-dropdown > a:focus-visible,
.member-actions .user-dropdown > button:focus-visible {
  background: #f5f0e9;
  outline: none;
}

.user-dropdown > a > span,
.user-dropdown > button > span {
  width: 22px;
  color: var(--coffee);
  text-align: center;
}

.user-dropdown > a > b {
  min-width: 24px;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 99px;
  background: #eee4d8;
  color: var(--coffee);
  font-size: 12px;
  text-align: center;
}

.member-actions .user-dropdown > .logout-button {
  margin-top: 5px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  color: #9d513f;
}

/* Sistema de iconos SVG local: trazo uniforme, elegante y sin dependencias. */
.ui-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
}

.side-nav nav a .nav-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.side-nav nav a .ui-icon {
  width: 20px;
  height: 20px;
}

.side-nav nav a.active .ui-icon {
  stroke-width: 2.2;
}

.side-promo .promo-icon {
  display: inline-grid;
  place-items: center;
}

.side-promo .promo-icon .ui-icon {
  width: 19px;
  height: 19px;
}

.member-actions .top-action .ui-icon {
  width: 20px;
  height: 20px;
}

.favorites-action .ui-icon {
  width: 19px;
  height: 19px;
  fill: rgba(173, 106, 85, .13);
}

.global-search-head .ui-icon,
.search-box .ui-icon {
  width: 19px;
  height: 19px;
  color: var(--coffee);
}

.global-search-results a > span .ui-icon {
  width: 19px;
  height: 19px;
}

.user-dropdown > a > span,
.user-dropdown > button > span {
  display: grid;
  place-items: center;
}

.user-dropdown .ui-icon {
  width: 18px;
  height: 18px;
}

.special-policy > span .ui-icon {
  width: 20px;
  height: 20px;
}

.special-facts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.special-facts .ui-icon,
.course-validity .ui-icon,
.course-expiry .ui-icon {
  width: 17px;
  height: 17px;
}

.mobile-nav a > span {
  display: grid;
  place-items: center;
}

.mobile-nav .ui-icon {
  width: 20px;
  height: 20px;
}

@media (max-width: 720px) {
  .global-search-panel {
    position: fixed;
    top: 70px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  .user-dropdown {
    position: fixed;
    top: 70px;
    right: 16px;
    width: min(280px, calc(100vw - 32px));
  }
}

@media (max-width: 480px) {
  .mobile-brand {
    display: none;
  }

  .member-header {
    justify-content: flex-end;
  }

  .member-actions {
    gap: 7px;
  }

  .member-actions .top-action,
  .member-actions .user-menu-toggle {
    width: 38px;
    height: 38px;
  }
}