/* Approved October 11 refinements; shared production styles remain canonical. */
/* Pie compartido: al fondo del viewport en páginas cortas y tras el contenido
   en páginas largas. El body conserva la reserva de las barras fijas móviles;
   el asistente de pantalla completa mantiene su propio layout. */
body:not(.definitive-shell) {
  min-height:100svh;
  min-height:100dvh;
}
html body:not(.definitive-shell) > main#contenido {flex:1 0 auto}
html body:not(.definitive-shell) > .site-footer {flex-shrink:0;margin-block-start:auto}
/* Cabecera canónica: el home marca el eje vertical; las demás vistas no deben
   sumar márgenes propios ni cambiar la altura del logo o de sus acciones. */
html body > .site-header {
  box-sizing:border-box;
  top:0;
  margin-block-start:0;
  height:var(--g3-header-height,60px);
  min-height:var(--g3-header-height,60px);
  max-height:var(--g3-header-height,60px);
  align-items:center;
}
html body > .site-header nav {align-items:center}
html body > .site-header nav > :is(a,form,div) {align-self:center}
html body > .site-header :is(.nav-cta,.button,.staff-tool-link) {align-self:center;min-height:44px}
/* El editor tenía un margen vertical extra; el selector de cuenta forzaba 60px
   en escritorio aunque el resto del sitio usa 68px. */
html body:has(.editor-shell) > .site-header {top:0;margin-block-start:0}
html body:has(.editor-shell) > .site-header #publish-profile-form > .button--publish {min-height:44px}
html body:has(.account-choice) > .site-header {
  height:var(--g3-header-height,60px);
  min-height:var(--g3-header-height,60px);
  max-height:var(--g3-header-height,60px);
}
@media(min-width:760px) {
  html body:has(.account-choice) .account-choice {
    margin-top:calc(-1 * var(--g3-header-height,68px));
    padding-top:calc(clamp(1.25rem,4vh,3rem) + var(--g3-header-height,68px));
  }
}
.plan-summary-pill {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.55rem 1rem;width:fit-content;max-width:100%;padding:.75rem 1rem;font-size:.95rem;letter-spacing:normal;text-transform:none;margin:1rem auto;border-radius:999px}
.plan-summary-pill strong {font-size:1.1em}
.trial-plan-actions {display:flex;justify-content:center;align-items:center}
.plan-summary-pill.profile-plan-badge--platinum {background:linear-gradient(120deg,#5c586a,#888397);border:1px solid #d4d0df;color:#fff}
/* Every choice label remains white across pointer, keyboard and selected states. */
html body.definitive-shell #stepBody .choice,
html body.definitive-shell #stepBody .choice:is(:hover,:focus,:focus-visible,:active,[aria-checked="true"],[aria-pressed="true"]),
html body.definitive-shell #stepBody .choice > span:not(.mark),
html body.definitive-shell #stepBody .hair-choice > span {color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.section-edit-mode .social-handles .social-handles__wide {grid-column:1/-1}
html body.definitive-shell .social-handles > .field:only-child {grid-column:1/-1!important}
@media(max-width:600px) {
  html body.definitive-shell .social-handles {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.definitive-shell .region-controls {width:49%!important}
  html body.definitive-shell .region-controls select {padding-left:.5rem!important;padding-right:1.5rem!important;background-position:right .45rem center!important;font-size:.9rem!important}
}
.flash-snackbar[data-tone="error"] .flash-snackbar__icon {background:#ff6683;color:#240711}
html body.definitive-shell .media-upload-progress.is-complete {background:linear-gradient(120deg,#123c30,#10271f);border-color:#69d6a2;color:#fff;box-shadow:none}
html body.definitive-shell .media-upload-progress.is-complete :is(strong,.media-upload-progress__label,.media-upload-progress__detail) {color:#fff}
html body.definitive-shell .media-upload-progress.is-complete progress {accent-color:#69d6a2}
.notifications-page .page-head__aside form {flex:0 1 auto;min-width:0;margin:0}
.notifications-page .page-head__aside .button {min-width:0;max-width:100%;font-size:clamp(.7rem,2.8vw,.95rem);letter-spacing:.025em;padding:.7rem .8rem;white-space:normal;line-height:1.25}
body.definitive-shell .step-title-row {align-items:center;flex-wrap:nowrap;column-gap:0}
html body.definitive-shell .step-title-row #stepTitle{margin-block:0;line-height:1.15}
html body.definitive-shell .step-title-row .step-title-icon{position:relative;top:-2px;box-sizing:border-box;width:28px;height:28px;flex:0 0 28px;align-self:center;margin:0  -28px 0 .5rem;object-fit:contain;object-position:center;transform:none;transform-origin:center}
body.definitive-shell .last-step-label {flex:none;margin:0 0 0 auto;font-size:.7rem;padding:.35rem .55rem;white-space:nowrap}
body.definitive-shell .media-viewer-actions {display:flex;justify-content:center;align-items:center;gap:.6rem}
body.definitive-shell .media-viewer figure {overflow:hidden}
body.definitive-shell .media-viewer figure > :is(.viewer-image,.viewer-video) {position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:contain}
body.definitive-shell .media-viewer-actions button {position:static!important;inset:auto!important;transform:none!important;flex:0 1 auto;width:auto!important;min-width:0;letter-spacing:normal;text-transform:none;padding:.6rem .75rem}
body.definitive-shell .flash-stack {bottom:calc(90px + env(safe-area-inset-bottom))}
body.definitive-shell .demo-notice[hidden] {display:none!important}

/* El contenido WebP tiene márgenes transparentes distintos; normaliza el tamaño visible,
   no solo la caja, manteniendo el centro óptico al final de cada H1. */
html body.definitive-shell .step-title-icon[src*="/multimedia.webp"] {transform:scale(1.1)}

/* En móvil el scroll sigue funcionando por gesto; se quita el carril morado superpuesto
   y se deja holgura al final para que ningún control quede pegado al pie fijo visual. */
@media(max-width:700px){
  body.definitive-shell:not(.section-edit-mode) #stepBody,
  body.definitive-shell:not(.section-edit-mode) #stepBody.has-overflow {
    scrollbar-width:none!important;-ms-overflow-style:none!important;scrollbar-color:auto!important;
    scrollbar-gutter:auto!important;padding-bottom:32px!important;scroll-padding-bottom:32px!important;
  }
  body.definitive-shell:not(.section-edit-mode) #stepBody::-webkit-scrollbar {display:none!important;width:0!important;height:0!important}
}
/* Opciones simples y múltiples comparten el mismo botón; sin círculos de radio. */
html body.definitive-shell #stepBody .choice,
html body.definitive-shell #stepBody .hair-choice {
  min-width:0!important;gap:.65rem!important;border:1px solid #71637c!important;
  background:linear-gradient(135deg,#160e20,#1e0d19)!important;color:#fff!important;
  -webkit-text-fill-color:#fff!important;box-shadow:none!important
}
html body.definitive-shell #stepBody .choice .mark,
html body.definitive-shell #stepBody .hair-choice .mark {display:none!important}
html body.definitive-shell #stepBody .choice[aria-checked="true"],
html body.definitive-shell #stepBody .choice[aria-pressed="true"],
html body.definitive-shell #stepBody .hair-choice:has(input:checked) {
  background:#7425a8!important;border-color:#be83e8!important;color:#fff!important;-webkit-text-fill-color:#fff!important
}
html body.definitive-shell #stepBody .hair-choice input[type="radio"] {
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}
html body.definitive-shell #stepBody .hair-choice input[type="radio"]:checked + .mark + span {color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.definitive-shell #stepBody .hair-choice:focus-within {outline:3px solid #d4a7ff!important;outline-offset:3px}
html body.definitive-shell .publish-success p {color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.definitive-shell .media-placeholder--preparing {position:relative!important;isolation:isolate;overflow:hidden;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:#fff!important}
html body.definitive-shell .media-placeholder--preparing::after {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,7,12,.08),rgba(8,7,12,.72))}
html body.definitive-shell .media-placeholder__poster {position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:contain;opacity:.82;pointer-events:none}
html body.definitive-shell .media-placeholder--preparing > :not(.media-placeholder__poster) {position:relative;z-index:2;text-shadow:0 1px 5px #000}
html body.definitive-shell .media-placeholder--preparing small {display:block;margin-top:.25rem;color:#e6dceb;font-size:.78rem}
.media-preparing-spinner {width:2rem;height:2rem;border:3px solid #c78ef360;border-top-color:#d77ce8;border-radius:50%;animation:g3-video-spin .8s linear infinite}
@keyframes g3-video-spin {to {transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce) {.media-preparing-spinner {animation:none;border-right-color:#d77ce8}}
dialog.cover-preparing-dialog {width:min(30rem,calc(100% - 2rem));max-width:none;margin:auto;padding:1.5rem;border:1px solid rgba(190,137,222,.6);border-radius:1.25rem;background:linear-gradient(135deg,#20102f,#121018 65%,#291126);color:#fff;box-shadow:0 1.5rem 5rem #000b}
dialog.cover-preparing-dialog::backdrop {background:rgba(3,2,7,.78);backdrop-filter:blur(5px)}
.cover-preparing-dialog__content {display:flex;align-items:center;gap:1rem}
.cover-preparing-dialog__content .media-preparing-spinner {width:2.4rem;height:2.4rem;flex:none}
.cover-preparing-dialog__content h2 {margin:0 0 .25rem;color:#fff;font-size:1.15rem;line-height:1.3}
.cover-preparing-dialog__content p {margin:0;color:#e7dced;font-size:.95rem;line-height:1.45}
dialog.cover-preparing-dialog--fallback {position:fixed;inset:0;z-index:10000;display:block;box-shadow:0 0 0 100vmax rgba(3,2,7,.78),0 1.5rem 5rem #000b}
@media(max-width:600px) {
  html body.definitive-shell .wizard-top .stage-line,
  html body.definitive-shell .wizard-top .wizard-topline {grid-column:1 / -1;margin-right:-.5rem}
  html body.definitive-shell .wizard-top .stage-line {justify-content:flex-end;text-align:right}
}
@media(max-width:380px) {body.definitive-shell .step-title-row:has(#lastStepLabel:not([hidden])) #stepTitle {font-size:1.25rem!important}}

/* Introducción del perfil: composición editorial con portada temporal. */
html body.definitive-shell:has(.profile-intro) .wizard-top {display:none!important}
html body.definitive-shell:not(.section-edit-mode):has(.profile-intro) .wizard {
  width:min(calc(100% - 3rem),var(--g3-max,72rem))!important;
  padding:1rem var(--g3-margen,clamp(1rem,4vw,2rem)) 1.2rem!important;
}
html body.definitive-shell:not(.section-edit-mode):has(.profile-intro) .wizard-top {
  position:relative;z-index:2;margin-bottom:clamp(.7rem,2vh,1.35rem)!important;
}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) {
  position:relative;isolation:isolate;display:grid!important;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;column-gap:1.5rem;overflow:visible;
}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro)::before {
  content:"";position:absolute;z-index:-1;inset:-.75rem -1.5rem 0;pointer-events:none;
  background-image:
    radial-gradient(ellipse 58% 64% at 73% 42%,rgba(142,37,191,.16),rgba(14,7,22,.04) 46%,rgba(8,7,12,.52) 100%),
    linear-gradient(90deg,#08070c 0%,rgba(8,7,12,.92) 27%,rgba(8,7,12,.42) 54%,rgba(8,7,12,.02) 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 15%,transparent 73%);
  mask-image:radial-gradient(ellipse at center,#000 15%,transparent 73%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) > .profile-intro__video {
  position:absolute;z-index:-2;inset:-.75rem -1.5rem 0;width:auto;height:auto;max-width:none;
  object-fit:cover;object-position:0% 32%;opacity:.5;transform:scale(1.2);transform-origin:0 32%;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 15%,transparent 73%);
  mask-image:radial-gradient(ellipse at center,#000 15%,transparent 73%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  pointer-events:none;
}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) > * {position:relative;z-index:1}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .step-heading {
  grid-column:1;grid-row:1;align-self:end;width:100%;max-width:none;margin:clamp(1rem,5vh,3.6rem) 0 .55rem!important;
  text-align:center!important;
}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepTitle {
  width:7ch;max-width:7ch;margin:0 auto;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none;font-family:var(--serif);font-size:clamp(3.25rem,5.5vw,5.2rem)!important;
  font-weight:700!important;line-height:.93!important;letter-spacing:-.035em!important;text-align:center;text-transform:uppercase;
}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepBody {
  grid-column:1;grid-row:2;align-self:start;width:100%;max-width:none;margin:0;padding:0 0 .75rem!important;
  overflow:visible!important;text-align:center!important;
}
.profile-intro{max-width:35rem;margin:0 auto;color:#f3edf7;font-weight:400!important;text-align:center;text-transform:none!important;letter-spacing:normal!important}
.profile-intro__title-accent{color:#bd42f2!important;-webkit-text-fill-color:#bd42f2!important}
html body.definitive-shell .step:has(.profile-intro) #stepHelp:empty{display:none}
.profile-intro__lead{max-width:25rem;margin:.25rem auto 1rem;color:#d6cedd;font-size:clamp(1rem,1.45vw,1.2rem);font-weight:400;line-height:1.48;letter-spacing:.015em;text-align:center}
.profile-intro__lead--mobile,.profile-intro__feature-copy--mobile,.profile-intro__feature--mobile-only{display:none!important}
.profile-intro__features{display:grid;grid-auto-rows:1fr;gap:.65rem;margin:0;padding:0;list-style:none}
.profile-name-field,.profile-name-advice section{box-sizing:border-box;width:100%;max-width:42rem;margin:0 auto 1rem;padding:1rem;border:1px solid #7864b0;border-radius:16px;background:linear-gradient(135deg,#23183c99,#13192e99);backdrop-filter:blur(12px)}
.profile-name-input{position:relative}
.profile-name-input input{padding-right:3rem!important;border:2px solid #b83efa!important;border-radius:12px!important}
.profile-name-check{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:#07251d;background:#68ffc4;border-radius:50%;width:1.6rem;height:1.6rem;text-align:center;line-height:1.6rem;font-weight:700;box-shadow:0 0 12px #46e8a966}
.profile-name-check[hidden]{display:none}
html body.definitive-shell #stepBody .profile-name-check--asset{background:none!important;border:0!important;box-shadow:none;width:26px;height:26px;line-height:1}
html body.definitive-shell #stepBody .profile-name-check--asset img{display:block;width:26px;height:26px;object-fit:contain;margin:0;padding:0;border:0;background:none;box-shadow:none}
.profile-name-status-row{display:flex;justify-content:space-between;gap:.5rem;min-height:2.6em;margin-top:.6rem;font-size:.85rem}
.profile-name-status-row .is-available{color:#68ffc4;font-weight:700}
.profile-name-advice{width:100%;max-width:42rem;margin:auto;text-align:left}
.profile-name-advice h2{font:700 1rem/1.4 var(--g3-sans);margin:0 0 .6rem}
.profile-name-advice p,.profile-name-advice li{font-size:.9rem;line-height:1.5}
.profile-name-advice p{margin:0}
.profile-name-advice ul{padding-left:1.2rem;margin:0}
.profile-name-advice li+li{margin-top:.4rem}
.profile-name-tip{margin-top:.8rem!important;color:#b8b4c3!important}
html body.definitive-shell #stepBody .birth-row select{box-sizing:border-box;min-height:52px;padding:.65rem 2.2rem .65rem .75rem!important;background-position:right .75rem center!important;background-size:.75rem!important;text-align:left}
@media(max-width:699px){html body.definitive-shell #stepBody .region-map{transform:translateX(-12px)}}
html body.definitive-shell #stepBody .section-select .choice-grid>.choice:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - .65rem)/2)}
html body.definitive-shell #stepBody .profile-name-field{padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none}
html body.definitive-shell #stepBody .profile-name-field label{display:block;margin-bottom:.8rem;text-align:center;text-transform:uppercase!important;letter-spacing:.12em!important;color:#c598dd;font-weight:700}
html body.definitive-shell #stepBody .profile-name-input input{width:100%;box-sizing:border-box;min-height:64px;padding:.5rem 3rem .5rem 1rem!important;font-size:clamp(1.35rem,5vw,1.65rem)!important;font-weight:700;letter-spacing:.02em;border:1px solid rgba(220,194,255,.32)!important;border-radius:14px!important;background:linear-gradient(135deg,rgba(49,23,77,.72),rgba(25,15,35,.88) 60%,rgba(66,20,49,.62));color:#fff;backdrop-filter:blur(14px)}
html body.definitive-shell #stepBody .profile-name-input input:focus{border-color:#d4a7ff!important}
.profile-name-status-row{align-items:flex-start;min-height:1.5em;font-size:.85rem}
.profile-name-status-row>span:last-child{flex:none;white-space:nowrap}
html body.definitive-shell #stepBody .profile-name-advice p{font-size:.9rem;line-height:1.4}
html body.definitive-shell #stepBody .nationality-grid .choice{justify-content:flex-start!important;text-align:left!important}
html body.definitive-shell #stepBody .nationality-grid .choice span:not(.mark){text-align:left!important}
html body.definitive-shell #stepBody .nationality-grid .nationality-choice[data-option="Otro"]{justify-content:center!important;text-align:center!important;padding-inline:.55rem!important}
html body.definitive-shell #stepBody .nationality-grid .nationality-choice[data-option="Otro"]>span:not(.mark){text-align:center!important}
@media(min-width:760px){
  html body.definitive-shell #stepBody .birth-row{display:grid;grid-template-columns:5rem .8rem 5rem .8rem 6.5rem;justify-content:center;gap:.65rem;width:max-content;max-width:100%;margin-inline:auto}
  html body.definitive-shell #stepBody .birth-row .field{width:100%;min-width:0;margin:0}
}
html body.definitive-shell #stepBody :is(.profile-name-advice,.profile-name-field) :is(label,h2,p,li,.profile-name-status-row,.profile-name-status-row span){text-transform:none!important;letter-spacing:normal!important;font-weight:400;color:#eee6f5}
html body.definitive-shell #stepBody .profile-name-advice h2,html body.definitive-shell #stepBody .profile-name-field label{font-weight:700}
html body.definitive-shell #stepBody .profile-name-status-row .is-available{color:#68ffc4!important;font-weight:700}
html[data-theme] body.definitive-shell #stepBody .profile-name-field .profile-name-status-row .is-invalid,
html body.definitive-shell #stepBody .profile-name-field .profile-name-status-row .is-invalid{color:#ff738e!important;-webkit-text-fill-color:currentColor!important}
html[data-theme="light"] body.definitive-shell #stepBody .profile-name-field .profile-name-status-row .is-invalid{color:#b7193e!important;-webkit-text-fill-color:currentColor!important}
.profile-name-warning{margin-top:.7rem!important;padding:.75rem;border:1px solid rgba(196,181,253,.3);border-radius:12px;background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(255,255,255,.04));backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:#eee6f5!important}
.profile-intro__feature{display:flex;align-items:center;gap:.9rem;min-width:0;padding:.72rem .85rem;border:1px solid rgba(196,139,235,.3);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(112,53,150,.16) 48%,rgba(14,9,23,.38));box-shadow:inset 0 1px rgba(255,255,255,.13),0 10px 28px rgba(0,0,0,.16);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.profile-intro__icon{display:grid;place-items:center;width:56px;height:56px;flex:0 0 56px;border:2px solid #ba45ef;border-radius:50%;background:rgba(14,8,21,.44);box-shadow:0 0 22px rgba(151,47,205,.12)}
.profile-intro__icon img{display:block;width:31px;height:31px;object-fit:contain}
.profile-intro__feature-copy{display:grid;flex:1;gap:.12rem;min-width:0;text-align:center}
.profile-intro__feature strong{color:#fff;font-size:1rem;font-weight:600;line-height:1.25;letter-spacing:normal;text-transform:none}
.profile-intro__feature-copy>span{color:#cfc5d8;font-size:.9rem;font-weight:400;line-height:1.38;letter-spacing:normal;text-transform:none}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepFooter {
  grid-column:1/-1;grid-row:3;width:100%;max-width:none;margin:auto 0 0!important;padding:1rem 0 0!important;
}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .footer-row {justify-content:space-between;gap:1rem}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .footer-row>* {min-width:min(34%,220px);min-height:54px;border-radius:16px}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #nextButton {
  width:min(100%,34rem);min-height:72px;padding:1.1rem 1.5rem;border:1.5px solid #bc2af9;border-top-color:#d64de8;border-bottom-color:#8e08d8;border-radius:15px;
  background:radial-gradient(ellipse 33% 100% at 100% 0%,rgba(224,82,241,.62),rgba(208,49,245,.24) 45%,transparent 85%),radial-gradient(ellipse 45% 90% at 0% 0%,rgba(186,62,255,.33),transparent 80%),linear-gradient(180deg,#9a27fc 0%,#851bef 25%,#6906d6 62%,#5b00c8 100%);
  background-size:160% 140%,160% 140%,100% 100%;background-position:0% 0%,100% 0%,0% 0%;background-repeat:no-repeat;
  animation:moon-colors 6s ease-in-out infinite alternate,moon-glow 3.8s ease-in-out infinite!important;
  box-shadow:inset 0 1px 0 rgba(244,136,255,.5),inset 0 -1px 0 rgba(101,0,186,.45),0 0 22px rgba(139,0,219,.22);
  color:#fff;font-size:clamp(1.05rem,1.8vw,1.3rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #nextButton::before,
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #nextButton::after {content:none!important}
html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #nextButton:hover {filter:brightness(1.1)}
@keyframes moon-colors{
  from{background-position:0% 0%,100% 0%,0% 0%}
  to{background-position:100% 65%,0% 45%,0% 0%}
}
@keyframes moon-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(244,136,255,.5),inset 0 -1px 0 rgba(101,0,186,.45),0 0 22px 2px rgba(166,43,246,.3)}
  50%{box-shadow:inset 0 1px 0 rgba(244,136,255,.65),inset 0 -1px 0 rgba(101,0,186,.45),0 0 42px 5px rgba(166,43,246,.54)}
}
@media(prefers-reduced-motion:reduce){
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #nextButton{animation:none!important;box-shadow:inset 0 1px 0 rgba(244,136,255,.5),inset 0 -1px 0 rgba(101,0,186,.45),0 0 26px rgba(166,43,246,.35)}
}

/* La intro permite que el halo MOON salga de la columna, sin mover el CTA. */
@media(min-width:760px){
  html body.definitive-shell:not(.section-edit-mode):has(.profile-intro) .wizard{overflow:visible!important}
}

@media(max-width:759px){
  html body.definitive-shell:not(.section-edit-mode):has(.profile-intro) .wizard {width:100%!important;padding:.55rem 1.15rem calc(.5rem + 16px + env(safe-area-inset-bottom))!important;overflow:visible!important}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) {display:flex!important;flex-direction:column;gap:0;overflow:visible}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro)::before {
    inset:-5rem -1.15rem auto;width:calc(100% + 2.3rem);height:auto;aspect-ratio:1;
    background-image:linear-gradient(90deg,rgba(8,7,12,.35),rgba(8,7,12,.05) 65%,transparent);
    background-size:cover;background-position:center;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) > .profile-intro__video {
    inset:-5rem -1.15rem auto;width:calc(100% + 2.3rem);height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 50%;opacity:.75;transform:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
  }
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .step-heading {margin:calc(clamp(6.5rem,42vw,12rem) + 24px) 0 .35rem!important;text-align:center!important}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepTitle {width:100%;max-width:none;margin-inline:auto;font-size:clamp(1.75rem,8.4vw,2.45rem)!important;line-height:1.05!important;text-align:center!important;white-space:nowrap}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepBody {flex:1 1 auto;min-height:0;padding:0 0 .6rem!important;overflow-y:auto!important}
  .profile-intro{max-width:none;padding-top:0}
  .profile-intro__lead{max-width:23rem;margin:.2rem auto .75rem;color:#d77cff;font-size:1rem;font-weight:500;line-height:1.4;text-align:center}
  .profile-intro__lead--desktop,.profile-intro__feature-copy--desktop{display:none}
  .profile-intro__lead--mobile,.profile-intro__feature-copy--mobile{display:grid!important}
  .profile-intro__features{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"quick photos" "review visits";gap:.6rem}
  .profile-intro__feature{flex-direction:column;justify-content:flex-start;gap:.35rem;min-height:7.3rem;padding:.6rem .45rem;border:1px solid rgba(184,45,231,.7);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(112,53,150,.15) 48%,rgba(14,9,23,.44));box-shadow:inset 0 1px rgba(255,255,255,.1),0 8px 22px rgba(0,0,0,.15);text-align:center}
  .profile-intro__feature:nth-child(1){grid-area:photos}
  .profile-intro__feature:nth-child(2){grid-area:review}
  .profile-intro__feature:nth-child(3){grid-area:quick}
  .profile-intro__feature:nth-child(4){grid-area:visits;display:flex!important}
  .profile-intro__icon{width:42px;height:42px;flex:0 0 42px;border-color:#b62ce5;background:rgba(15,7,24,.58);box-shadow:0 0 20px rgba(188,39,236,.18)}
  .profile-intro__icon img{width:24px;height:24px;filter:brightness(0) saturate(100%) invert(32%) sepia(91%) saturate(5582%) hue-rotate(273deg) brightness(101%) contrast(103%)}
  .profile-intro__feature:nth-child(4) .profile-intro__icon img{filter:none}
  .profile-intro__feature-copy--mobile{flex:none;width:100%;gap:.22rem}
  .profile-intro__feature strong{font-size:.95rem}
  .profile-intro__feature-copy>span{font-size:.83rem}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepFooter {margin:0!important;padding:.55rem 0 0!important}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .footer-row {flex-direction:column-reverse;gap:.55rem}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .footer-row>* {width:100%;min-width:0;min-height:58px;border-radius:17px}
}
@media(max-height:760px) and (max-width:759px){
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .step-heading{margin-top:calc(clamp(5.5rem,36vw,10rem) + 24px)!important}
  .profile-intro__feature{min-height:6.5rem;padding:.5rem .42rem}
  .profile-intro__icon{width:38px;height:38px;flex-basis:38px}
  .profile-intro__icon img{width:22px;height:22px}
  .profile-intro__features{gap:.4rem}
  .profile-intro__lead{margin-bottom:.6rem;font-size:.94rem}
}
@media(min-width:760px){
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;align-content:start;column-gap:clamp(1.5rem,4vw,3rem)}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) > .profile-intro__video{
    inset:-5% auto auto 45%;width:60%;height:110%;object-fit:cover;object-position:center;opacity:.88;transform:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 10%,rgba(0,0,0,.32) 20%,rgba(0,0,0,.7) 34%,#000 48%,#000 58%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.45) 78%,rgba(0,0,0,.12) 86%,transparent 92%),linear-gradient(to bottom,transparent 5%,rgba(0,0,0,.15) 12%,rgba(0,0,0,.6) 24%,#000 38%,#000 62%,rgba(0,0,0,.65) 76%,rgba(0,0,0,.15) 88%,transparent 95%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 10%,rgba(0,0,0,.32) 20%,rgba(0,0,0,.7) 34%,#000 48%,#000 58%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.45) 78%,rgba(0,0,0,.12) 86%,transparent 92%),linear-gradient(to bottom,transparent 5%,rgba(0,0,0,.15) 12%,rgba(0,0,0,.6) 24%,#000 38%,#000 62%,rgba(0,0,0,.65) 76%,rgba(0,0,0,.15) 88%,transparent 95%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro)::before{
    inset:0;background:none;-webkit-mask-image:none;mask-image:none;
  }
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .step-heading{align-self:start;margin:clamp(3rem,9vh,5rem) 0 .35rem!important;text-align:left!important}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepTitle{width:7.4ch;max-width:7.4ch;margin-left:0;margin-right:auto;font-size:clamp(3.75rem,5.8vw,5.4rem)!important;text-align:left!important}
  .profile-intro__feature-copy--desktop,.profile-intro__lead--mobile{display:none!important}
  .profile-intro__lead--desktop{display:block!important}
  .profile-intro__feature-copy--mobile{display:grid!important}
  .profile-intro__lead{max-width:none;margin:.2rem 0 .85rem;color:#d77cff;font-size:clamp(.85rem,1.3vw,1.1rem);font-weight:500;line-height:1.4;text-align:left;white-space:nowrap}
  .profile-intro__features{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"quick photos" "review visits";gap:.75rem}
  .profile-intro__feature{flex-direction:column;justify-content:flex-start;gap:.4rem;min-height:8rem;padding:.75rem .6rem;border:1px solid rgba(184,45,231,.7);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(112,53,150,.15) 48%,rgba(14,9,23,.44));text-align:center}
  .profile-intro__feature:nth-child(1){grid-area:photos}
  .profile-intro__feature:nth-child(2){grid-area:review}
  .profile-intro__feature:nth-child(3){grid-area:quick}
  .profile-intro__feature:nth-child(4){grid-area:visits;display:flex!important}
  .profile-intro__icon{width:46px;height:46px;flex-basis:46px;border-color:#b62ce5;background:rgba(15,7,24,.58);box-shadow:0 0 20px rgba(188,39,236,.18)}
  .profile-intro__icon img{width:26px;height:26px;filter:brightness(0) saturate(100%) invert(32%) sepia(91%) saturate(5582%) hue-rotate(273deg) brightness(101%) contrast(103%)}
  .profile-intro__feature:nth-child(4) .profile-intro__icon img{filter:none}
  .profile-intro__feature-copy--mobile{flex:none;width:100%;gap:.35rem}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepBody{padding-bottom:0!important}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepFooter{grid-column:1;margin:0!important;padding:calc(.75rem + 12px) 0 0!important}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .footer-row{flex-direction:column-reverse;gap:.55rem}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) .footer-row>*{width:100%;min-width:0;min-height:46px}
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #nextButton{width:100%;min-height:72px}
}
@media(min-width:760px) and (max-height:760px){
  .profile-intro__feature{min-height:8rem;padding:.65rem .55rem;gap:.4rem}
  .profile-intro__icon{width:46px;height:46px;flex-basis:46px}
  .profile-intro__icon img{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro){animation:none}}

/* Referencia de ubicación: misma lectura cómoda al escribir y en el ejemplo. */
html body.definitive-shell #stepBody #field-approximate_location {
  font-size: 18px !important;
  line-height: 1.5;
  font-weight: 500;
}
html body.definitive-shell #stepBody #field-approximate_location::placeholder {
  font-size: inherit;
  font-weight: 400;
}

/* Ingreso: campos tranquilos y un pie separado de la navegación móvil. */
body:has(.auth-shell--login) .auth-shell--login .form-card {
  background: rgba(18, 12, 30, .78);
  box-shadow: none;
}
body:has(.auth-shell--login) .auth-shell--login .field > input,
body:has(.auth-shell--login) .auth-shell--login .secret-field {
  background: #181220 !important;
  border: 1px solid #786885 !important;
  box-shadow: none;
}
body:has(.auth-shell--login) .auth-shell--login .field .secret-field input,
body:has(.auth-shell--login) .auth-shell--login .secret-field button {
  background: transparent !important;
  box-shadow: none;
}
body:has(.auth-shell--login) .auth-help-links a { text-decoration: none; }
body:has(.auth-shell--login) .auth-shell--login .auth-alt__sep { margin: .9rem 0; }
html[data-theme="light"] body:has(.auth-shell--login) .auth-shell--login .form-card {
  background: #fff;
  border-color: #d8d2df;
  box-shadow: 0 4px 16px rgba(31, 18, 45, .05);
}
html[data-theme="light"] body:has(.auth-shell--login) .auth-shell--login .field > input,
html[data-theme="light"] body:has(.auth-shell--login) .auth-shell--login .secret-field {
  background: #fff !important;
  border-color: #91849e !important;
}
body:has(.auth-shell--login) .auth-shell--login .field > input:focus-visible,
body:has(.auth-shell--login) .auth-shell--login .secret-field:focus-within {
  outline: 2px solid var(--g3-focus);
  outline-offset: 2px;
}
@media(max-width:759px) {
  body:has(.auth-shell--login) .site-footer {
    margin-top: auto;
    padding-top: 1.75rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* La introducción móvil debe caber en una sola pantalla, sin un scroller interno. */
@media(max-width:759px){
  html body.definitive-shell:not(.section-edit-mode) .step:has(.profile-intro) #stepBody{
    min-height:0!important;overflow:hidden!important;overscroll-behavior:none!important
  }
}