/* Club Creativo — acabado visual del acceso.
   Archivo independiente para poder actualizar Hostinger sin reemplazar la app. */

.auth-shell {
  grid-template-columns: minmax(520px, 1.08fr) minmax(470px, .92fr);
  background: #f8f7f3;
}

.auth-story {
  isolation: isolate;
  padding: 46px clamp(42px, 6vw, 92px);
  background:
    radial-gradient(circle at 8% 8%, rgba(239, 240, 170, .96), transparent 27%),
    radial-gradient(circle at 87% 14%, rgba(200, 210, 255, .88), transparent 31%),
    radial-gradient(circle at 88% 88%, rgba(241, 166, 208, .52), transparent 34%),
    linear-gradient(145deg, #fffef9 0%, #f8f7f2 58%, #fff9f5 100%);
}

.auth-story::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 22%;
  right: 9%;
  width: 122px;
  height: 122px;
  border: 1px solid rgba(255, 136, 72, .18);
  border-radius: 44% 56% 47% 53%;
  background: linear-gradient(145deg, rgba(241, 166, 208, .24), rgba(255, 136, 72, .10));
  box-shadow:
    -92px 58px 0 -37px rgba(130, 153, 230, .22),
    38px 105px 0 -30px rgba(239, 240, 170, .62),
    -18px -74px 0 -43px rgba(241, 166, 208, .42);
  transform: rotate(16deg);
}

.auth-story::after {
  z-index: -1;
  right: -145px;
  bottom: -205px;
  width: 500px;
  height: 500px;
  border-color: rgba(130, 153, 230, .32);
  box-shadow:
    0 0 0 74px rgba(255, 136, 72, .075),
    0 0 0 148px rgba(241, 166, 208, .075);
}

.auth-brand {
  width: fit-content;
  gap: 14px;
}

.auth-brand .brand-splat {
  width: 42px;
  height: 42px;
  background: linear-gradient(145deg, #f6f7b9, #eff0aa);
  box-shadow: 0 12px 30px rgba(130, 153, 230, .20);
}

.auth-brand strong {
  font-size: 29px;
  letter-spacing: -1px;
}

.auth-copy {
  max-width: 670px;
  margin: clamp(105px, 14vh, 152px) 0 34px;
}

.auth-copy > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(83, 109, 200, .17);
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 7px 22px rgba(83, 109, 200, .06);
  backdrop-filter: blur(8px);
}

.auth-copy h1 {
  max-width: 650px;
  margin: 20px 0 18px;
  font-size: clamp(48px, 5vw, 72px);
  line-height: .99;
  letter-spacing: -3px;
  text-wrap: balance;
}

.auth-copy p {
  max-width: 555px;
  color: #57524c;
  font-size: 16px;
  line-height: 1.65;
}

.auth-benefits {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.auth-benefits span {
  min-height: 68px;
  align-items: flex-start;
  padding: 13px 12px;
  border: 1px solid rgba(229, 225, 217, .86);
  border-top: 3px solid #8299e6;
  border-radius: 14px;
  background: rgba(247, 249, 255, .82);
  box-shadow: 0 12px 28px rgba(41, 36, 32, .055);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.42;
}

.auth-benefits span:nth-child(2) { border-top-color: #f1a6d0; background: rgba(255, 247, 251, .84); }
.auth-benefits span:nth-child(3) { border-top-color: #ff8848; background: rgba(255, 249, 244, .84); }
.auth-benefits span:nth-child(2) svg { color: #c8689f; }
.auth-benefits span:nth-child(3) svg { color: #dc6d2f; }
.auth-benefits svg {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  margin-top: -2px;
  padding: 4px;
  border-radius: 8px;
  color: #536dc8;
  background: #edf0ff;
}
.auth-benefits span:nth-child(2) svg { background: #fceaf4; }
.auth-benefits span:nth-child(3) svg { background: #fff0e5; }

.auth-story > small {
  width: fit-content;
  margin-top: auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #6d6861;
  background: rgba(255, 255, 255, .54);
  font-size: 9px;
}

.auth-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 30px;
  background:
    radial-gradient(circle at 94% 7%, rgba(200, 210, 255, .48), transparent 27%),
    radial-gradient(circle at 4% 96%, rgba(239, 240, 170, .30), transparent 25%),
    radial-gradient(circle at 1px 1px, rgba(130, 153, 230, .07) 1px, transparent 0),
    linear-gradient(180deg, #ffffff, #f7f5f0);
  background-size: auto, auto, 24px 24px, auto;
}

.auth-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -70px;
  top: 13%;
  width: 180px;
  height: 180px;
  border-radius: 46% 54% 42% 58%;
  border: 34px solid rgba(241, 166, 208, .13);
  transform: rotate(-18deg);
}

.auth-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6%;
  bottom: 9%;
  width: 74px;
  height: 74px;
  border-radius: 50% 42% 55% 45%;
  background: rgba(239, 240, 170, .32);
  box-shadow: 52px 18px 0 -25px rgba(255, 136, 72, .20);
  transform: rotate(14deg);
}

.auth-card {
  position: relative;
  width: min(490px, 100%);
  overflow: hidden;
  padding: 42px;
  border-color: rgba(216, 211, 202, .88);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, rgba(200, 210, 255, .24), transparent 26%),
    #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 28px 75px rgba(69, 76, 118, .14),
    0 7px 22px rgba(35, 31, 27, .05);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #8299e6 0 35%, #eff0aa 35% 58%, #ff8848 58% 78%, #f1a6d0 78%);
}

.auth-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  background: #edf0ff;
  font-size: 9px;
}

.auth-card h2 {
  margin-top: 12px;
  font-size: clamp(31px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -1.1px;
}

.auth-card > p {
  margin-bottom: 24px;
  font-size: 12px;
  line-height: 1.6;
}

.auth-tabs {
  gap: 4px;
  padding: 5px;
  border: 1px solid #ebe7df;
  border-radius: 14px;
  background: #f2f0eb;
}

.auth-tabs button {
  min-height: 42px;
  border-radius: 10px;
  font-size: 11px;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.auth-tabs button.selected {
  color: #4059ae;
  box-shadow: 0 5px 16px rgba(83, 109, 200, .12);
}

.auth-card form { gap: 15px; margin-top: 22px; }
.auth-card form > label { gap: 8px; font-size: 11px; }

.auth-input {
  min-height: 50px;
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.auth-input > svg {
  width: 29px;
  height: 29px;
  margin-left: -4px;
  padding: 7px;
  border-radius: 8px;
  color: #536dc8;
  background: #edf0ff;
}

.auth-input:hover { border-color: #cbc6bc; }
.auth-input:focus-within {
  border-color: #8299e6;
  box-shadow: 0 0 0 4px rgba(130, 153, 230, .16);
  transform: translateY(-1px);
}

.auth-card input { height: 48px; font-size: 13px; }
.auth-link, .auth-back { font-size: 11px; text-underline-offset: 3px; }
.auth-link:hover, .auth-back:hover { text-decoration: underline; }

.auth-submit {
  min-height: 52px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #8299e6, #6f87dc);
  box-shadow: 0 12px 25px rgba(83, 109, 200, .24);
  font-size: 12px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.auth-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow: 0 16px 32px rgba(83, 109, 200, .30);
}

.auth-submit:active:not(:disabled) { transform: translateY(0); }

@media (max-width: 1100px) {
  .auth-shell { grid-template-columns: minmax(430px, 1fr) minmax(430px, 1fr); }
  .auth-story { padding-inline: 42px; }
  .auth-copy h1 { font-size: 50px; }
  .auth-copy { margin-top: auto; }
  .auth-benefits { grid-template-columns: 1fr; }
  .auth-benefits span { min-height: 0; }
}

@media (max-width: 900px) {
  .auth-shell { display: block; }
  .auth-story { min-height: auto; padding: 28px 28px 34px; }
  .auth-story::before { top: 12%; right: 7%; transform: scale(.75) rotate(16deg); }
  .auth-story::after { width: 300px; height: 300px; right: -120px; bottom: -180px; }
  .auth-brand .brand-splat { width: 38px; height: 38px; }
  .auth-brand strong { font-size: 25px; }
  .auth-copy { margin: 45px 0 0; }
  .auth-copy h1 { max-width: 580px; margin-block: 15px; font-size: clamp(40px, 8vw, 58px); }
  .auth-copy p { font-size: 14px; }
  .auth-benefits, .auth-story > small { display: none; }
  .auth-panel { min-height: auto; padding: 28px 18px 48px; background-size: auto, auto, 20px 20px, auto; }
  .auth-panel::after { display: none; }
}

@media (max-width: 560px) {
  .auth-story { padding: 22px 20px 27px; }
  .auth-copy { margin-top: 36px; }
  .auth-copy > span { min-height: 25px; padding-inline: 9px; font-size: 8px; letter-spacing: 1.45px; }
  .auth-copy h1 { font-size: 38px; letter-spacing: -2px; }
  .auth-copy p { line-height: 1.55; }
  .auth-panel { padding: 20px 12px 34px; }
  .auth-card { padding: 30px 22px 26px; border-radius: 21px; }
  .auth-card h2 { font-size: 29px; }
  .auth-tabs button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-input, .auth-submit, .auth-tabs button { transition: none; }
}

/* Presentación pública: el acceso continúa visible en el primer pantallazo. */
.public-site {
  --ink: #191614;
  --muted: #625d57;
  --line: #e4dfd6;
  --cream: #f8f7f2;
  --blue: #8299e6;
  --blue-deep: #536dc8;
  --acid: #eff0aa;
  --orange: #ff8848;
  --pink: #f1a6d0;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  scroll-behavior: smooth;
}

.landing-hero { min-height: 100svh; }

.public-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.public-nav nav {
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.6vw, 25px);
}

.public-nav nav a {
  position: relative;
  color: #514c47;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.public-nav nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.public-nav nav a:hover::after { transform: scaleX(1); }
.public-site .auth-story > small { display: inline-flex; align-items: center; gap: 6px; }

.landing-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(82px, 9vw, 126px) 0;
}

.landing-heading {
  max-width: 790px;
  margin-bottom: 42px;
}

.landing-heading.compact { max-width: 680px; }

.landing-eyebrow {
  display: block;
  margin-bottom: 15px;
  color: var(--blue-deep);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.8px;
}

.landing-heading h2,
.landing-final-cta h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 4.3vw, 58px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -2px;
  text-wrap: balance;
}

.landing-heading p {
  max-width: 660px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.landing-problem { padding-top: clamp(94px, 11vw, 150px); }

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 80px rgba(54, 47, 41, .07);
}

.problem-grid article {
  min-height: 310px;
  padding: 34px;
}

.problem-grid article + article { border-left: 1px solid var(--line); }
.problem-grid article:nth-child(1) { border-top: 5px solid var(--blue); }
.problem-grid article:nth-child(2) { border-top: 5px solid var(--orange); }
.problem-grid article:nth-child(3) { border-top: 5px solid var(--pink); }

.problem-grid article > span,
.solution-feature > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 13px;
  color: var(--blue-deep);
  background: #edf0ff;
}

.problem-grid article:nth-child(2) > span { color: #d96525; background: #fff0e7; }
.problem-grid article:nth-child(3) > span { color: #bd5d93; background: #fcebf4; }

.problem-grid small,
.solution-feature small,
.landing-final-cta small {
  color: #8b857e;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.5px;
}

.problem-grid h3,
.solution-feature h3,
.steps-row h3,
.public-pricing-grid h3 {
  margin: 10px 0 11px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.4px;
}

.problem-grid p,
.solution-feature p,
.steps-row p,
.public-pricing-grid p,
.faq-list p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.problem-grid strong {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  color: #393430;
  font-size: 11px;
}

.problem-grid strong svg { color: var(--blue-deep); }

.landing-solution {
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100% - 1180px) / 2));
  padding-left: max(24px, calc((100% - 1180px) / 2));
  background: var(--cream);
}

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

.solution-feature {
  min-height: 245px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .88);
}

.solution-feature:nth-child(3n) > span { color: #d96525; background: #fff0e7; }
.solution-feature:nth-child(4n) > span { color: #bd5d93; background: #fcebf4; }
.solution-feature:nth-child(5n) > span { color: #74782c; background: #f8f8cf; }

.solution-feature.main {
  display: grid;
  grid-column: span 2;
  grid-template-columns: auto 1fr;
  gap: 0 18px;
  align-items: start;
  background: #fff;
  box-shadow: 0 20px 54px rgba(83, 109, 200, .08);
}

.solution-feature.main > span { grid-row: 1 / span 2; }
.solution-feature.main h3 { max-width: 480px; font-size: 25px; }

.mini-workflow {
  display: flex;
  grid-column: 2;
  align-items: center;
  gap: 8px;
  align-self: end;
  margin-top: 20px;
}

.mini-workflow i,
.mini-workflow b {
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 9px;
  font-style: normal;
}

.mini-workflow i { color: #5e667b; background: #f2f3f6; }
.mini-workflow b { color: #523f7f; background: #f0eafe; }

.steps-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.steps-row article {
  position: relative;
  padding: 34px 28px 10px 0;
}

.steps-row article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 28px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

.steps-row b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #3f4e87;
  background: #edf0ff;
  font-size: 12px;
}

.landing-pricing {
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100% - 1180px) / 2));
  padding-left: max(24px, calc((100% - 1180px) / 2));
  background: #fbf8fb;
}

.public-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  align-items: stretch;
}

.public-pricing-grid article {
  position: relative;
  display: flex;
  min-height: 400px;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fff;
}

.public-pricing-grid article.recommended {
  border-color: var(--blue);
  box-shadow: 0 22px 58px rgba(83, 109, 200, .13);
}

.public-pricing-grid em {
  position: absolute;
  top: 0;
  right: 24px;
  padding: 8px 11px;
  border-radius: 0 0 10px 10px;
  color: #fff;
  background: var(--blue);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 1px;
}

.public-pricing-grid article > strong {
  display: block;
  margin: 18px 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
}

.public-pricing-grid article > strong small { color: #746f68; font: 10px system-ui, sans-serif; }
.public-pricing-grid ul { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.public-pricing-grid li { display: flex; align-items: center; gap: 8px; color: #4f4a45; font-size: 12px; }
.public-pricing-grid li svg { color: var(--blue-deep); }

.public-pricing-grid button,
.landing-final-cta button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 12px 25px rgba(83, 109, 200, .18);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.public-pricing-grid button:hover,
.landing-final-cta button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(83, 109, 200, .25); }

.pricing-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: #6f6962;
  font-size: 10px;
}

.pricing-note svg { color: var(--blue-deep); }

.landing-faq {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(480px, 1.28fr);
  gap: 80px;
  align-items: start;
}

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #302c28;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { flex: 0 0 auto; transition: transform .18s ease; }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list p { max-width: 620px; margin: -4px 36px 25px 0; }

.landing-final-cta {
  display: grid;
  width: min(1180px, calc(100% - 48px));
  grid-template-columns: auto 1fr auto;
  gap: 26px;
  align-items: center;
  margin: 18px auto 90px;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid #dedb97;
  border-radius: 24px;
  background: var(--acid);
}

.landing-final-cta > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
}

.landing-final-cta h2 { max-width: 720px; margin-top: 10px; font-size: clamp(28px, 3.4vw, 46px); }
.landing-final-cta button { min-width: 185px; margin: 0; padding: 0 22px; color: #fff; background: #1d1a18; box-shadow: none; }

.public-footer {
  display: grid;
  width: min(1180px, calc(100% - 48px));
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
  padding: 28px 0 42px;
  border-top: 1px solid var(--line);
}

.public-footer .auth-brand .brand-splat { width: 31px; height: 31px; }
.public-footer .auth-brand strong { font-size: 19px; }
.public-footer p { color: #777169; font-size: 10px; text-align: center; }
.public-footer > a { justify-self: end; color: var(--blue-deep); font-size: 10px; font-weight: 800; text-decoration: none; }

@media (max-width: 1050px) {
  .public-nav nav { display: none; }
  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-feature.main { grid-column: span 2; }
  .landing-faq { gap: 45px; }
}

@media (max-width: 800px) {
  .landing-section { width: min(100% - 36px, 680px); padding-block: 72px; }
  .landing-heading { margin-bottom: 30px; }
  .problem-grid, .public-pricing-grid { grid-template-columns: 1fr; }
  .problem-grid article { min-height: 0; }
  .problem-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  .problem-grid article:nth-child(2), .problem-grid article:nth-child(3) { border-top-width: 5px; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-feature.main { grid-column: auto; }
  .steps-row { grid-template-columns: repeat(2, 1fr); }
  .steps-row article:nth-child(2)::after { display: none; }
  .public-pricing-grid article { min-height: 360px; }
  .landing-faq { display: block; }
  .faq-list { margin-top: 34px; }
  .landing-final-cta { grid-template-columns: auto 1fr; }
  .landing-final-cta button { grid-column: 1 / -1; width: 100%; }
  .public-footer { grid-template-columns: 1fr auto; }
  .public-footer p { display: none; }
}

@media (max-width: 560px) {
  .landing-hero { min-height: auto; }
  .public-site .auth-story > small { display: none; }
  .landing-section { width: calc(100% - 30px); padding-block: 60px; }
  .landing-heading h2 { font-size: 36px; letter-spacing: -1.3px; }
  .landing-heading p { font-size: 14px; }
  .problem-grid, .solution-feature, .public-pricing-grid article { border-radius: 17px; }
  .problem-grid article, .solution-feature, .public-pricing-grid article { padding: 25px 22px; }
  .solution-feature.main { display: block; }
  .solution-feature.main > span { margin-bottom: 22px; }
  .mini-workflow { grid-column: auto; overflow-x: auto; }
  .steps-row { grid-template-columns: 1fr; }
  .steps-row article { padding-right: 0; }
  .steps-row article::after { display: none; }
  .landing-pricing, .landing-solution { padding-inline: 15px; }
  .landing-final-cta { width: calc(100% - 30px); grid-template-columns: 1fr; gap: 17px; margin-bottom: 60px; padding: 27px 22px; }
  .landing-final-cta > span { width: 40px; height: 40px; }
  .landing-final-cta button { grid-column: auto; }
  .public-footer { width: calc(100% - 30px); }
}

@media (prefers-reduced-motion: reduce) {
  .public-nav nav a::after, .faq-list summary svg, .public-pricing-grid button, .landing-final-cta button { transition: none; }
  .public-site { scroll-behavior: auto; }
}

/* Ritmo visual premium: misma información, lectura más ligera y más color de marca. */
.landing-problem,
.landing-steps,
.landing-faq { position: relative; }

.landing-problem::before,
.landing-steps::before,
.landing-faq::before {
  content: "✦";
  position: absolute;
  z-index: -1;
  color: rgba(130, 153, 230, .13);
  font-size: 120px;
  line-height: 1;
}

.landing-problem::before { top: 86px; right: -38px; transform: rotate(14deg); }
.landing-steps::before { right: 2%; bottom: 45px; color: rgba(255, 136, 72, .11); transform: rotate(-12deg); }
.landing-faq::before { top: 45px; left: -95px; color: rgba(241, 166, 208, .13); }

.landing-heading { position: relative; }
.landing-heading::after {
  content: "";
  display: block;
  width: 74px;
  height: 5px;
  margin-top: 25px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--blue) 0 30%, var(--acid) 30% 54%, var(--orange) 54% 76%, var(--pink) 76%);
}

.problem-grid {
  gap: 15px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.problem-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(54, 47, 41, .07);
  transition: transform .2s ease, box-shadow .2s ease;
}

.problem-grid article:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(54, 47, 41, .11); }
.problem-grid article + article { border-left: 1px solid var(--line); }
.problem-grid article:nth-child(1) { background: linear-gradient(150deg, #fff 45%, #edf0ff); }
.problem-grid article:nth-child(2) { background: linear-gradient(150deg, #fff 45%, #fff0e7); }
.problem-grid article:nth-child(3) { background: linear-gradient(150deg, #fff 45%, #fcebf4); }
.problem-grid article::after { position: absolute; right: 22px; bottom: 10px; color: rgba(25, 22, 20, .05); font-family: Georgia, serif; font-size: 76px; font-weight: 700; }
.problem-grid article:nth-child(1)::after { content: "01"; }
.problem-grid article:nth-child(2)::after { content: "02"; }
.problem-grid article:nth-child(3)::after { content: "03"; }
.problem-grid article > * { position: relative; z-index: 1; }

.landing-solution {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 9%, rgba(241,166,208,.27), transparent 20%),
    radial-gradient(circle at 7% 94%, rgba(239,240,170,.45), transparent 18%),
    #f7f6f2;
}

.landing-solution::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 15%;
  right: -105px;
  width: 260px;
  height: 260px;
  border: 46px solid rgba(130,153,230,.11);
  border-radius: 50%;
}

.solution-feature { position: relative; overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.solution-feature:hover { transform: translateY(-4px); border-color: rgba(130,153,230,.52); }
.solution-feature::after { content: "✦"; position: absolute; right: 18px; bottom: 9px; color: rgba(25,22,20,.045); font-size: 56px; }
.solution-feature.main { border-color: #cbd4fb; background: linear-gradient(135deg, #fff, #edf0ff); }
.solution-feature:nth-child(2) { border-top: 5px solid var(--orange); background: #fff8f3; }
.solution-feature:nth-child(3) { border-top: 5px solid var(--acid); background: #fffff4; }
.solution-feature:nth-child(4) { border-top: 5px solid var(--pink); background: #fff7fb; }
.solution-feature:nth-child(5) { border-top: 5px solid var(--blue); background: #f7f9ff; }
.solution-feature:nth-child(6) { border-top: 5px solid #b9bc52; background: #fcfdec; }
.solution-feature > * { position: relative; z-index: 1; }

.steps-row { gap: 13px; border: 0; }
.steps-row article {
  min-height: 220px;
  padding: 27px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(54,47,41,.055);
}
.steps-row article::after { display: none; }
.steps-row article:nth-child(1) { background: #f5f7ff; }
.steps-row article:nth-child(2) { background: #ffffef; }
.steps-row article:nth-child(3) { background: #fff6fb; }
.steps-row article:nth-child(4) { background: #fff6f0; }
.steps-row article:nth-child(2) b { color: #696d24; background: var(--acid); }
.steps-row article:nth-child(3) b { color: #9e4d7c; background: #f8d8ea; }
.steps-row article:nth-child(4) b { color: #b64e16; background: #ffe0ce; }

.landing-pricing {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 9% 6%, rgba(239,240,170,.52), transparent 20%),
    radial-gradient(circle at 93% 88%, rgba(241,166,208,.28), transparent 22%),
    #fbfaf7;
}

.public-pricing-grid article {
  overflow: hidden;
  border-radius: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.public-pricing-grid article:hover { transform: translateY(-6px); box-shadow: 0 26px 65px rgba(54,47,41,.13); }
.public-pricing-grid article.plan-essential { border-color: #dedf91; background: linear-gradient(150deg, #fff 40%, #fbfcd9); }
.public-pricing-grid article.plan-pro { border-color: #efc8dc; background: linear-gradient(150deg, #fff 40%, #fff2f8); }
.public-pricing-grid article.recommended {
  color: #fff;
  border-color: #6d83d4;
  background:
    radial-gradient(circle at 100% 0, rgba(241,166,208,.24), transparent 32%),
    #6f87dc;
  box-shadow: 0 28px 70px rgba(83,109,200,.27);
}
.public-pricing-grid article.recommended .plan-audience,
.public-pricing-grid article.recommended > p,
.public-pricing-grid article.recommended li,
.public-pricing-grid article.recommended > strong small { color: rgba(255,255,255,.86); }
.public-pricing-grid article.recommended li svg { color: var(--acid); }
.public-pricing-grid article.recommended button { color: #4b5da7; background: #fff; box-shadow: none; }
.public-pricing-grid article.recommended em { display: flex; align-items: center; gap: 5px; color: #433c16; background: var(--acid); }
.plan-audience { color: var(--blue-deep); font-size: 9px; font-weight: 850; letter-spacing: 1.4px; }
.public-pricing-grid article > strong { margin: 6px 0 6px; font-size: 41px; }
.public-pricing-grid article > p { min-height: 43px; margin: 7px 0 17px; }
.public-pricing-grid ul { gap: 10px; }

.lifetime-calculator {
  display: grid;
  grid-template-columns: auto 1.15fr auto 1.25fr auto;
  gap: 22px;
  align-items: center;
  margin-top: 20px;
  padding: 24px 26px;
  border: 1px solid var(--orange);
  border-radius: 20px;
  background: linear-gradient(105deg, #fff, #fff4ed 58%, #fff8fb);
  box-shadow: 0 18px 45px rgba(255,136,72,.11);
}
.lifetime-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #c85318; background: #ffe4d3; }
.lifetime-calculator div small { color: #d25b20; font-size: 8px; font-weight: 850; letter-spacing: 1.3px; }
.lifetime-calculator h3 { margin: 5px 0; font-size: 22px; }
.lifetime-calculator p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.lifetime-calculator > strong { font-family: Georgia, serif; font-size: 28px; white-space: nowrap; }
.lifetime-calculator > strong small { display: block; margin-top: 3px; color: var(--muted); font: 8px system-ui,sans-serif; text-align: center; }
.lifetime-calculator ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.lifetime-calculator li { display: flex; align-items: center; gap: 6px; color: #514b46; font-size: 9px; }
.lifetime-calculator li svg { color: #dc6d2f; }
.lifetime-calculator button { display: flex; min-height: 43px; align-items: center; justify-content: center; gap: 7px; padding: 0 18px; border: 0; border-radius: 11px; color: #fff; background: var(--orange); font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; }

.landing-faq {
  width: min(1180px, calc(100% - 48px));
  margin-block: clamp(60px,8vw,110px);
  padding: clamp(42px,6vw,68px);
  border: 1px solid #dbe1fa;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 100%, rgba(241,166,208,.21), transparent 25%),
    linear-gradient(135deg, #f6f8ff, #fff 62%);
}
.faq-list { border: 0; }
.faq-list details { margin-bottom: 9px; padding: 0 19px; border: 1px solid #e5e1d9; border-radius: 14px; background: rgba(255,255,255,.86); }
.faq-list details[open] { border-color: #cbd4fb; box-shadow: 0 12px 28px rgba(83,109,200,.08); }
.faq-list summary { min-height: 63px; }

.modal-lifetime-plan {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 0 28px 20px;
  padding: 14px 16px;
  border: 1px solid #ffb08a;
  border-radius: 13px;
  color: #4f3021;
  background: #fff3ec;
}
.modal-lifetime-plan > svg { color: #d65d21; }
.modal-lifetime-plan > span { display: flex; flex-direction: column; }
.modal-lifetime-plan small { color: #d65d21; font-size: 7px; font-weight: 850; letter-spacing: 1.2px; }
.modal-lifetime-plan strong { margin: 2px 0; font-size: 11px; }
.modal-lifetime-plan p { margin: 0; color: #745f53; font-size: 8px; }
.modal-lifetime-plan > b { padding: 7px 9px; border-radius: 9px; color: #a54316; background: #ffe2d2; font-size: 8px; white-space: nowrap; }

@media (max-width: 1050px) {
  .lifetime-calculator { grid-template-columns: auto 1fr auto; }
  .lifetime-calculator ul { grid-column: 2 / -1; }
  .lifetime-calculator button { grid-column: 3; grid-row: 1; align-self: end; }
}

@media (max-width: 800px) {
  .problem-grid article + article { border-left: 1px solid var(--line); }
  .lifetime-calculator { grid-template-columns: auto 1fr; }
  .lifetime-calculator > strong { justify-self: start; grid-column: 2; }
  .lifetime-calculator > strong small { text-align: left; }
  .lifetime-calculator ul { grid-column: 1 / -1; }
  .lifetime-calculator button { grid-column: 1 / -1; grid-row: auto; width: 100%; }
  .landing-faq { width: calc(100% - 36px); margin-block: 60px; padding: 34px 25px; }
}

@media (max-width: 560px) {
  .landing-problem::before, .landing-steps::before, .landing-faq::before { display: none; }
  .landing-heading::after { margin-top: 19px; }
  .problem-grid article:hover, .solution-feature:hover, .public-pricing-grid article:hover { transform: none; }
  .steps-row article { min-height: 0; }
  .lifetime-calculator { gap: 14px; padding: 21px 18px; }
  .lifetime-icon { width: 42px; height: 42px; }
  .lifetime-calculator ul { grid-template-columns: 1fr; }
  .landing-faq { width: calc(100% - 30px); margin-block: 45px; padding: 27px 17px; border-radius: 21px; }
  .faq-list details { padding-inline: 14px; }
  .modal-lifetime-plan { grid-template-columns: auto 1fr; margin: 0 20px 16px; }
  .modal-lifetime-plan > b { grid-column: 2; justify-self: start; }
}

/* Cierre editorial: bandas de color continuas para evitar grandes vacíos blancos. */
.public-site { background: #fbfaf6; }

.landing-problem {
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 14%, rgba(130,153,230,.20), transparent 23%),
    radial-gradient(circle at 4% 88%, rgba(239,240,170,.46), transparent 22%),
    linear-gradient(180deg, #fff 0%, #fbfaf1 100%);
  box-shadow: 0 0 0 100vmax #fbfaf1;
  clip-path: inset(0 -100vmax);
}

.landing-steps {
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100% - 1180px) / 2));
  padding-left: max(24px, calc((100% - 1180px) / 2));
  background:
    radial-gradient(circle at 8% 18%, rgba(241,166,208,.24), transparent 19%),
    radial-gradient(circle at 94% 84%, rgba(255,136,72,.16), transparent 20%),
    linear-gradient(135deg, #fff7fb 0%, #f8f9ff 52%, #fff9f2 100%);
}

.landing-pricing {
  background:
    radial-gradient(circle at 7% 7%, rgba(239,240,170,.68), transparent 21%),
    radial-gradient(circle at 96% 88%, rgba(241,166,208,.38), transparent 24%),
    linear-gradient(180deg, #fbfaf6 0%, #fff7fb 100%);
}

.pricing-note {
  width: fit-content;
  padding: 10px 14px;
  border: 1px solid rgba(130,153,230,.27);
  border-radius: 999px;
  background: rgba(255,255,255,.66);
}

.landing-faq {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(76px,8vw,112px) max(24px, calc((100% - 1180px) / 2));
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 2% 100%, rgba(241,166,208,.42), transparent 25%),
    radial-gradient(circle at 96% 4%, rgba(239,240,170,.48), transparent 22%),
    linear-gradient(135deg, #edf1ff 0%, #faf7ff 48%, #fff8f2 100%);
}

.landing-faq::after {
  content: "";
  position: absolute;
  right: max(24px, calc((100% - 1180px) / 2));
  bottom: 34px;
  width: 92px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) 0 25%, var(--acid) 25% 50%, var(--orange) 50% 75%, var(--pink) 75%);
  opacity: .75;
}

.faq-list details:nth-child(1) { border-left: 5px solid var(--blue); }
.faq-list details:nth-child(2) { border-left: 5px solid var(--acid); }
.faq-list details:nth-child(3) { border-left: 5px solid var(--pink); }
.faq-list details:nth-child(4) { border-left: 5px solid var(--orange); }
.faq-list details:nth-child(1)[open] { background: #f5f7ff; }
.faq-list details:nth-child(2)[open] { background: #ffffef; }
.faq-list details:nth-child(3)[open] { background: #fff6fb; }
.faq-list details:nth-child(4)[open] { background: #fff6f0; }

.landing-final-cta {
  position: relative;
  isolation: isolate;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding-block: clamp(42px,5vw,64px);
  border-color: rgba(255,255,255,.62);
  background:
    radial-gradient(circle at 93% 12%, rgba(241,166,208,.52), transparent 24%),
    radial-gradient(circle at 4% 100%, rgba(130,153,230,.33), transparent 23%),
    linear-gradient(105deg, #eff0aa 0%, #f7efa9 47%, #ffd9c5 100%);
  box-shadow: 0 24px 70px rgba(83,109,200,.18);
}

.landing-final-cta::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -74px;
  right: -100vmax;
  bottom: -92px;
  left: -100vmax;
  background:
    radial-gradient(circle at 17% 90%, rgba(130,153,230,.34), transparent 21%),
    radial-gradient(circle at 86% 7%, rgba(241,166,208,.38), transparent 22%),
    #f5effb;
}

.landing-final-cta button { background: #5f76cb; box-shadow: 0 14px 30px rgba(69,87,160,.24); }
.landing-final-cta button:hover { background: #5269bd; }

.public-footer {
  width: 100%;
  grid-template-columns: 1fr auto 1fr;
  margin-top: 92px;
  padding: 34px max(24px, calc((100% - 1180px) / 2));
  border-top: 0;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(239,240,170,.18), transparent 25%),
    radial-gradient(circle at 88% 100%, rgba(241,166,208,.20), transparent 24%),
    #6077cb;
}

.public-footer p { color: rgba(255,255,255,.76); }
.public-footer a { color: var(--acid); }
.public-footer .auth-brand strong { color: #fff; }
.public-footer .auth-brand .brand-splat { color: #201e18; background: var(--acid); box-shadow: none; }

@media (max-width: 800px) {
  .landing-faq { width: 100%; margin: 0; padding: 70px max(18px, calc((100% - 680px) / 2)); }
  .landing-final-cta { width: calc(100% - 36px); }
  .public-footer { width: 100%; padding-inline: 24px; }
}

@media (max-width: 560px) {
  .landing-steps { padding-inline: 15px; }
  .landing-faq { width: 100%; margin: 0; padding: 58px 15px 72px; border-radius: 0; }
  .landing-faq::after { right: 18px; bottom: 25px; width: 72px; }
  .landing-final-cta { width: calc(100% - 30px); margin: 0 auto; }
  .public-footer { width: 100%; margin-top: 70px; padding: 31px 20px; background: #6077cb; }
}

/* Afinado final: proporciones consistentes, cuadrículas completas y cierre compacto. */
.public-site .landing-section {
  padding-top: clamp(68px, 7vw, 96px);
  padding-bottom: clamp(68px, 7vw, 96px);
}
.public-site .landing-heading { margin-bottom: clamp(30px, 3.5vw, 42px); }
.public-site .landing-heading h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.02; }
.public-site .landing-heading p { max-width: 720px; }
.public-site .landing-problem {
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100% - 1180px) / 2));
  padding-left: max(24px, calc((100% - 1180px) / 2));
  box-shadow: none;
  clip-path: none;
}
.public-site .landing-solution,
.public-site .landing-steps,
.public-site .landing-pricing { padding-top: clamp(72px, 7vw, 100px); padding-bottom: clamp(72px, 7vw, 100px); }
.public-site .solution-feature:last-child {
  display: grid;
  min-height: 155px;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(220px, .55fr) 1fr;
  grid-template-rows: auto auto;
  gap: 4px 24px;
  align-items: center;
  border-top-color: #b9bc52;
  background: linear-gradient(105deg, #fcfdec, #fff9f3 56%, #fff4fa);
}
.public-site .solution-feature:last-child > span { grid-column: 1; grid-row: 1 / 3; margin: 0; }
.public-site .solution-feature:last-child > small { grid-column: 2; grid-row: 1; align-self: end; }
.public-site .solution-feature:last-child > h3 { grid-column: 2; grid-row: 2; align-self: start; margin-top: 5px; }
.public-site .solution-feature:last-child > p { grid-column: 3; grid-row: 1 / 3; max-width: 520px; margin: 0; }
.public-site .landing-faq { padding-top: clamp(72px, 7vw, 96px); padding-bottom: clamp(78px, 7vw, 104px); }
.public-site .landing-final-cta {
  overflow: hidden;
  margin: 68px auto;
  padding: clamp(36px, 4vw, 52px);
  border: 1px solid rgba(204,190,89,.72);
  background: radial-gradient(circle at 92% 8%, rgba(241,166,208,.48), transparent 28%), linear-gradient(105deg, #eff0aa 0%, #f5efa8 52%, #ffd7c3 100%);
  box-shadow: 0 0 0 100vmax #f5effb, 0 24px 70px rgba(83,109,200,.18);
  clip-path: inset(-68px -100vmax);
}
.public-site .landing-final-cta::before { display: none; }
.public-site .landing-final-cta h2 { font-size: clamp(28px, 3.1vw, 44px); }
.public-site .public-footer { margin-top: 0; }
@media (max-width: 1050px) {
  .public-site .solution-feature:last-child { grid-template-columns: auto minmax(190px, .65fr) 1fr; }
}
@media (max-width: 800px) {
  .public-site .landing-heading h2 { font-size: clamp(34px, 7vw, 46px); }
  .public-site .solution-feature:last-child { display: block; min-height: 0; grid-column: auto; }
  .public-site .solution-feature:last-child > span { margin-bottom: 22px; }
  .public-site .landing-final-cta { margin-block: 54px; clip-path: inset(-54px -100vmax); }
}
@media (max-width: 560px) {
  .public-site .landing-section,
  .public-site .landing-solution,
  .public-site .landing-steps,
  .public-site .landing-pricing { padding-top: 58px; padding-bottom: 58px; }
  .public-site .landing-problem { padding-inline: 15px; }
  .public-site .landing-heading h2 { font-size: 35px; }
  .public-site .landing-final-cta { margin-block: 42px; clip-path: inset(-42px -100vmax); }
}