html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 102, 184, .16), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(130, 79, 255, .15), transparent 30rem),
    #090915;
}

input,
textarea,
select {
  color: #ffffff;
}

.hero-sky {
  background:
    radial-gradient(circle at 58% 28%, rgba(255, 102, 184, .22), transparent 16rem),
    radial-gradient(circle at 70% 42%, rgba(143, 68, 255, .20), transparent 23rem),
    linear-gradient(180deg, rgba(9, 9, 21, .98), rgba(13, 12, 24, 1));
}

.hero-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 138, 203, .95) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.5px);
  background-size: 76px 76px, 116px 116px;
  background-position: 10px 18px, 42px 54px;
  opacity: .35;
  mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
}

.section-title {
  font-size: clamp(2.15rem, 4vw, 3.75rem);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: 0;
}

.section-title::before,
.section-title::after {
  content: "✦";
  color: #ff8acb;
  display: inline-block;
  margin: 0 .65rem;
  font-size: .5em;
  vertical-align: .2em;
}

.nav-link {
  transition: color .2s ease;
}

.nav-link:hover {
  color: #ff8acb;
}

.hero-art {
  margin-top: clamp(1.5rem, 4vh, 3.5rem);
  overflow: visible;
}

.hero-card-primary {
  left: clamp(1.75rem, 7vw, 2.5rem);
  top: clamp(2.5rem, 5vw, 4rem);
  width: clamp(10.5rem, 18vw, 13.5rem);
}

.hero-envelope {
  bottom: clamp(.75rem, 2.5vw, 1.5rem);
  left: 50%;
  width: clamp(19rem, 31vw, 24rem);
  transform: translateX(-50%);
}

.hero-card-secondary {
  bottom: clamp(.75rem, 2.2vw, 1.5rem);
  right: clamp(1.75rem, 5vw, 2.25rem);
  width: clamp(9.25rem, 16vw, 12rem);
}

.hero-card-image-only {
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
}

@media (min-width: 1280px) {
  .hero-envelope {
    width: clamp(21rem, 32vw, 26rem);
  }

  .hero-card-primary {
    width: clamp(12rem, 18vw, 15rem);
  }

  .hero-card-secondary {
    width: clamp(10.5rem, 16vw, 13.5rem);
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .hero-art {
    margin-top: 1rem;
    max-width: 520px;
  }

  .hero-card-primary {
    left: 2rem;
    top: 2.75rem;
    width: 12.25rem;
  }

  .hero-envelope {
    bottom: 1.25rem;
    width: 22rem;
  }

  .hero-card-secondary {
    bottom: 1.5rem;
    right: 2rem;
    width: 11rem;
  }
}

.glass-card {
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.form-stack > .glass-card,
.form-stack > .flex {
  margin-top: .45rem;
}

.promo-band {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .2), transparent 9rem),
    radial-gradient(circle at 90% 35%, rgba(255, 255, 255, .18), transparent 10rem),
    linear-gradient(90deg, #ff66b8, #c4449b);
}

.form-field {
  display: grid;
  gap: .65rem;
}

.form-field span,
.form-group legend {
  color: rgba(255, 255, 255, .88);
  font-size: .95rem;
  font-weight: 800;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .045);
  padding: 1rem 1rem;
  font-size: .95rem;
  line-height: 1.5;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255, 255, 255, .42);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(255, 138, 203, .7);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 3px rgba(255, 102, 184, .12);
}

.form-group {
  display: grid;
  gap: .85rem;
}

.choice,
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .04);
  padding: .95rem 1rem;
  color: rgba(255, 255, 255, .78);
  font-size: .95rem;
  line-height: 1.5;
}

.consent-stack {
  align-items: stretch;
}

.acceptance-stack {
  gap: 1rem;
}

.acceptance-stack > .consent-row,
.acceptance-stack > .consent-stack {
  margin-top: .2rem;
}

.choice input,
.consent-row input {
  margin-top: .2rem;
  accent-color: #ff66b8;
}

.signature-shell,
.upload-shell,
.selfie-preview-shell {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.signature-pad {
  touch-action: none;
  cursor: crosshair;
}

.selfie-preview {
  background: linear-gradient(135deg, rgba(255, 138, 203, .12), rgba(255, 255, 255, .03));
}

.selfie-example {
  display: block;
  object-fit: contain;
  background: rgba(255, 255, 255, .03);
}

.selfie-helper {
  display: grid;
  gap: .9rem;
}

.selfie-helper-copy {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .03);
  padding: .9rem 1rem;
}

/* Paleta compartida con la app principal */
:root {
  --creator-pink: #f05f9e;
  --creator-pink-soft: #f9b6d5;
  --creator-lilac: #c78be9;
  --creator-plum: #55384f;
  --creator-muted: #846c82;
  --creator-surface: rgba(255, 255, 255, .82);
  --creator-border: rgba(241, 164, 199, .45);
}

body {
  color: var(--creator-plum);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 191, 219, .34), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgba(210, 185, 246, .28), transparent 26rem),
    #fff8fc;
}

header[class*="bg-ink"] {
  background: rgba(255, 249, 253, .92) !important;
  border-color: var(--creator-border) !important;
  box-shadow: 0 8px 30px rgba(154, 93, 130, .08);
}

header .text-white,
header [class*="text-white/"] {
  color: var(--creator-plum) !important;
}

header .text-candy,
footer .text-candy,
.nav-link:hover {
  color: var(--creator-pink) !important;
}

#mobile-menu {
  background: rgba(255, 249, 253, .98) !important;
  border-color: var(--creator-border) !important;
}

.hero-sky {
  background:
    radial-gradient(circle at 58% 25%, rgba(255, 181, 216, .38), transparent 18rem),
    radial-gradient(circle at 76% 52%, rgba(207, 174, 246, .34), transparent 24rem),
    linear-gradient(180deg, #fff8fc, #f8f1fc) !important;
}

.hero-sky::before {
  opacity: .22;
  mask-image: linear-gradient(to bottom, black 30%, transparent 88%);
}

.hero-title,
.hero-subtitle,
.section-title,
main section:not(.hero-sky) [class*="text-white"],
footer [class*="text-white"] {
  color: var(--creator-plum) !important;
}

main [class*="text-white/"] {
  color: var(--creator-muted) !important;
}

main section:not(.hero-sky) {
  background: transparent !important;
}

main section.bg-gradient-to-b,
main section.bg-\[\#0d0d19\] {
  background: linear-gradient(180deg, #fff5fa, #ffffff) !important;
}

.glass-card,
.stats-panel,
main .border-white\/10,
main .border-white\/12,
main .border-white\/14 {
  border-color: var(--creator-border) !important;
  box-shadow: 0 16px 36px rgba(191, 113, 155, .10), inset 0 1px 0 rgba(255, 255, 255, .8);
  backdrop-filter: blur(14px);
}

.promo-band,
main [class*="from-rose"] {
  background: linear-gradient(100deg, #f05f9e, #cf8bea) !important;
  color: #fff !important;
}

main [class*="from-rose"] [class*="text-white"],
.promo-band [class*="text-white"] {
  color: #fff !important;
}

.hero-card-primary,
.hero-card-secondary {
  border-color: rgba(240, 95, 158, .42) !important;
  background: linear-gradient(145deg, rgba(255, 183, 216, .48), rgba(255, 255, 255, .86)) !important;
  box-shadow: 0 22px 48px rgba(209, 112, 161, .20) !important;
}

.hero-envelope {
  filter: drop-shadow(0 28px 60px rgba(240, 95, 158, .26));
}

.form-field span,
.form-group legend,
.section-title::before,
.section-title::after {
  color: var(--creator-pink);
}

input,
textarea,
select {
  color: var(--creator-plum) !important;
}

.form-field input,
.form-field textarea,
.choice,
.consent-row,
.selfie-helper-copy {
  border-color: var(--creator-border);
  background: rgba(255, 255, 255, .72);
  color: var(--creator-plum);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(132, 108, 130, .68);
}

footer {
  border-color: var(--creator-border) !important;
  background: #fff4fa;
  color: var(--creator-muted);
}

footer h4,
footer .text-white {
  color: var(--creator-plum) !important;
}

@media (max-width: 640px) {
  .hero-title {
    font-size: clamp(2.35rem, 12vw, 3.5rem) !important;
  }

  .hero-art {
    transform: scale(.92);
    transform-origin: top center;
  }
}

/* Fondo nocturno original con superficies claras para la informacion */
body {
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 102, 184, .16), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(130, 79, 255, .15), transparent 30rem),
    #090915;
}

header[class*="bg-ink"] {
  background: rgba(9, 9, 21, .95) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: none;
}

header .text-white,
header [class*="text-white/"] {
  color: rgba(255, 255, 255, .86) !important;
}

#mobile-menu {
  background: rgba(9, 9, 21, .98) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

.hero-sky {
  background:
    radial-gradient(circle at 58% 28%, rgba(255, 102, 184, .22), transparent 16rem),
    radial-gradient(circle at 70% 42%, rgba(143, 68, 255, .20), transparent 23rem),
    linear-gradient(180deg, rgba(9, 9, 21, .98), #0d0c18) !important;
}

.hero-title,
.hero-subtitle,
.section-title {
  color: #fff !important;
}

main [class*="text-white/"] {
  color: rgba(255, 255, 255, .72) !important;
}

main section.bg-\[\#0d0d19\] {
  background: #0d0d19 !important;
}

main section.bg-gradient-to-b .section-title,
main section.bg-gradient-to-b [class*="text-\["] {
  color: #4f384c !important;
}

.stats-panel {
  background: linear-gradient(100deg, rgba(240, 95, 158, .16), rgba(199, 139, 233, .12)) !important;
  border-color: rgba(240, 95, 158, .55) !important;
  box-shadow: 0 18px 42px rgba(240, 95, 158, .12), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

#stats-widget article {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

.glass-card {
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(244, 178, 207, .62) !important;
  color: #55384f;
}

.glass-card [class*="text-white/"],
.glass-card p {
  color: #846c82 !important;
}

footer {
  background: #090915;
  border-color: rgba(255, 255, 255, .10) !important;
  color: rgba(255, 255, 255, .62);
}

footer h4,
footer .text-white {
  color: #fff !important;
}

/* Restaurar el acabado original: una sola superficie oscura */
main section:not(.hero-sky) {
  background: initial !important;
}

main section.bg-gradient-to-b {
  background: linear-gradient(180deg, #fff1f8, #fff) !important;
}

main section.bg-\[\#0d0d19\] {
  background: #0d0d19 !important;
}

.glass-card {
  border-color: rgba(255, 255, 255, .12) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .04)) !important;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.glass-card p,
.glass-card [class*="text-white/"],
main section.bg-\[\#0d0d19\] [class*="text-white/"] {
  color: rgba(255, 255, 255, .72) !important;
}

main section.bg-\[\#0d0d19\] .border-white\/10,
main section.bg-\[\#0d0d19\] .border-white\/12 {
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .045) !important;
}

.form-field input,
.form-field textarea,
.choice,
.consent-row,
.selfie-helper-copy {
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #fff !important;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255, 255, 255, .42) !important;
}

.legal-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 102, 184, .16), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(130, 79, 255, .15), transparent 30rem),
    #090915;
  color: rgba(255, 255, 255, .78);
}

.legal-shell {
  width: min(900px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 7.5rem 0 4rem;
}

.legal-back {
  color: #ff8acb;
  font-weight: 800;
}

.legal-card {
  margin-top: 1.75rem;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 1px solid rgba(255, 138, 203, .28);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.legal-card h1 {
  color: #fff;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
  font-weight: 900;
}

.legal-card h2 {
  margin-top: 2rem;
  color: #ff8acb;
  font-size: 1.2rem;
  font-weight: 900;
}

.legal-card p,
.legal-card li {
  margin-top: .7rem;
  line-height: 1.75;
}

.legal-card ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.legal-card a {
  color: #ff8acb;
  font-weight: 800;
}

.legal-meta {
  margin-top: .75rem;
  color: rgba(255, 255, 255, .52);
  font-size: .85rem;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 21, .72);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  max-height: min(88vh, 860px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at top right, rgba(255, 102, 184, .16), transparent 12rem),
    #151323;
  padding: 1.5rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.modal-copy {
  display: grid;
  gap: 1rem;
  color: rgba(255, 255, 255, .76);
  font-size: .96rem;
  line-height: 1.75;
}

.terms-text {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .035);
  padding: 1rem;
  color: rgba(255, 255, 255, .8);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.check-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .85rem;
  align-items: start;
}

.check-row span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(255, 138, 203, .15);
  color: #ff8acb;
  font-weight: 900;
}

.creator-fit-title {
  color: #b5167a;
  text-shadow: 0 10px 30px rgba(255, 102, 184, .20);
}

details summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 640px) {
  main.pt-28 {
    padding-top: 5.6rem;
  }

  main > section.hero-sky > div {
    gap: 1rem;
    padding-inline: 1.1rem;
    padding-top: 1.25rem;
    padding-bottom: 1.6rem;
  }

  main > section.hero-sky .mt-8 {
    margin-top: 1rem;
  }

  main > section.hero-sky .glass-card.rounded-2xl,
  main > section.hero-sky aside.glass-card {
    margin-top: .2rem;
    margin-bottom: .2rem;
  }

  main > section.py-12 > div {
    padding-inline: 1.1rem;
  }

  .site-nav {
    height: 4.25rem;
    padding-inline: 1rem;
  }

  .site-logo {
    font-size: 1.75rem;
  }

  #mobile-menu {
    padding-block: 1rem;
  }

  #inicio {
    padding-top: 5.75rem;
  }

  .hero-layout {
    min-height: auto;
    gap: .75rem;
    padding-inline: 1rem;
    padding-bottom: 1.75rem;
  }

  .hero-copy {
    margin-inline: auto;
    max-width: 24rem;
    text-align: center;
  }

  .hero-copy > span {
    font-size: .64rem;
    padding: .45rem .8rem;
  }

  .hero-title {
    margin-top: 1.15rem;
    font-size: clamp(2.55rem, 12vw, 3.55rem);
    line-height: .98;
  }

  .hero-subtitle {
    margin-top: 1.1rem;
    font-size: .98rem;
    line-height: 1.65;
  }

  .hero-actions {
    margin-top: 1.45rem;
    gap: .7rem;
  }

  .hero-actions a:first-child {
    width: 100%;
    padding: 1rem 1.25rem;
  }

  .hero-actions a:last-child {
    padding-block: .7rem;
  }

  .form-stack {
    gap: 1rem;
  }

  .form-stack > .glass-card,
  .form-stack > .flex {
    margin-top: .2rem;
    margin-inline: .55rem;
  }

  #creator-form .glass-card + .glass-card,
  #creator-form .glass-card + .flex,
  #submission-result + section {
    margin-top: .65rem;
  }

  .selfie-helper {
    gap: .75rem;
  }

  .selfie-helper-copy {
    padding: .8rem .9rem;
  }

  .acceptance-stack {
    gap: 1.1rem;
  }

  .acceptance-stack > .consent-row,
  .acceptance-stack > .consent-stack {
    margin-top: .25rem;
  }

  #creator-form .flex.flex-col.gap-4.sm\\:flex-row {
    padding-inline: .7rem;
  }

  .hero-art {
    height: clamp(300px, 86vw, 360px);
    margin-top: .25rem;
    max-width: min(100%, 360px);
  }

  .hero-card-primary {
    left: max(1rem, calc(50% - 10.4rem));
    top: .5rem;
    width: clamp(7.25rem, 31vw, 9rem);
    border-radius: 1rem;
    padding: .45rem;
  }

  .hero-card-secondary {
    bottom: 2.1rem;
    right: max(1rem, calc(50% - 10.2rem));
    width: clamp(6.85rem, 29vw, 8.7rem);
    border-radius: .95rem;
    padding: .35rem;
  }

  .hero-envelope {
    bottom: 2.35rem;
    width: min(74vw, 18.5rem);
  }

  .hero-card-primary div,
  .hero-card-secondary div {
    margin-top: .35rem;
    font-size: .65rem;
  }

  .stats-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    overflow: visible;
    border: 0;
    background: transparent;
    padding: 0;
  }

  #stats-widget article {
    min-height: 8.8rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .075);
    padding: 1rem .75rem;
    text-align: center;
  }

  #stats-widget article > div:first-child {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .85rem;
  }

  #stats-widget article .text-3xl {
    font-size: 1.55rem;
  }

  #quick-widget {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  #quick-widget article {
    border: 1px solid rgba(244, 114, 182, .22);
    border-radius: 1rem;
    padding: 1.1rem .75rem;
  }

  #quick-widget article > div:first-child {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
  }

  section {
    scroll-margin-top: 5rem;
  }

  main section:not(#inicio) {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  #como-funciona > div,
  #beneficios > div,
  #seguridad > div,
  #faq > div {
    padding-inline: 1rem;
  }

  #steps-widget {
    gap: .85rem;
  }

  #steps-widget article {
    grid-template-columns: 3rem 1fr;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
  }

  #steps-widget article > div:first-child {
    grid-row: span 2;
  }

  #steps-widget article > div:nth-child(2) {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
  }

  #steps-widget article > div:nth-child(3) {
    grid-column: 1 / -1;
    padding-top: .15rem;
  }

  #benefits-widget {
    gap: .85rem;
  }

  #benefits-widget article {
    min-height: auto;
    padding: 1.1rem;
  }

  #benefits-widget article h3 {
    margin-top: 1rem;
  }

  #security-widget article {
    grid-template-columns: 3rem 1fr;
    gap: .8rem;
    padding: 1rem;
  }

  #security-widget article > div:first-child {
    width: 3rem;
    height: 3rem;
  }

  #faq-widget details {
    border-radius: .9rem;
  }

  #faq-widget summary {
    padding: 1rem;
    line-height: 1.35;
  }

  #faq .mt-12 {
    margin-top: 2rem;
    padding: 1.25rem;
    text-align: center;
  }

  #faq .mt-12 h3,
  .promo-band h3 {
    font-size: 1.65rem;
    line-height: 1.08;
  }

  #faq .mt-12 img {
    width: 11rem;
  }

  .promo-band {
    margin-top: 2.25rem;
    padding: 1.5rem;
  }

  .promo-band p:nth-child(2) {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  .section-title::before,
  .section-title::after {
    margin: 0 .2rem;
    font-size: .42em;
  }

  .section-title {
    font-size: clamp(1.85rem, 9vw, 2.45rem);
    line-height: 1.08;
  }

  footer {
    padding-block: 2.5rem;
  }

  footer > div {
    gap: 1.5rem;
  }
}