header:has(+ .home-editorial) {
  max-width: 1250px;
  width: calc(100% - 48px);
  border-radius: 16px;
  background: #111116;
  box-shadow: none;
}
.home-editorial {
  --home-text: #f5f0fc;
  --home-muted: #c0b8ce;
  --home-line: #e4d7ff29;
  --home-accent: #d7bbff;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 48px) 42px;
  color: var(--home-text);
  font-family: Inter, Manrope, sans-serif;
}
.home-editorial :is(h1,h2,h3,p,figure) { margin: 0; }
.home-opening {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.95fr);
  gap: clamp(24px,5vw,78px);
  align-items: center;
  padding: clamp(35px,6vw,90px) 0 clamp(42px,7vw,96px);
}
.home-index { color: var(--home-accent); font-size: .72rem; font-weight: 650; letter-spacing: .15em; }
.home-intro h1 {
  margin: 20px 0;
  font: 720 clamp(3rem,7.2vw,7rem)/.97 Manrope,Inter,sans-serif;
  letter-spacing: -.075em;
}
.home-intro h1 em { color: var(--home-accent); font-style: normal; }
.home-intro > p { color: var(--home-muted); max-width: 420px; font-size: clamp(1rem,1.6vw,1.22rem); line-height: 1.65; }
.home-hero-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 14px; margin: 24px 0 13px; }
.home-editorial .home-primary { min-height: 46px; padding: 12px 18px; border-radius: 8px; background: #dfcaff; border: 1px solid #f2e4ff; color: #20132c; font-weight: 700; text-align: center; }
.home-editorial .home-primary:hover { background: #efe2ff; }
.home-editorial .home-text-link { color: #e5d4ff; text-decoration: underline; text-underline-offset: 4px; font-size: .92rem; }
.home-intro > small,.home-gallery > p { color: var(--home-muted); font-size: .84rem; }
.home-editorial .landing-claim {
  display: flex;
  align-items: center;
  width: min(100%, 435px);
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--home-line);
  border-radius: 12px;
  background: #16131e;
}
.home-editorial .landing-claim label { margin-left: 9px; color: var(--home-accent); white-space: nowrap; }
.home-editorial .landing-claim input { flex: 1; min-width: 0; width: auto; margin: 0; padding: 8px 0; border: 0; color: #fff; background: transparent; font-size: .95rem; box-shadow: none; }
.home-editorial .landing-claim .button { flex: none; margin: 0; }
.home-gallery {
  --gallery-halo: #267a8e8f;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 42%,var(--gallery-halo),transparent 72%),#14121e;
}
.home-gallery[data-look=sol] { --gallery-halo:#a34e376e; }
.home-gallery[data-look=aura] { --gallery-halo:#837aa470; }
.home-gallery-top { display: flex; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--home-line); color: #e2d9ed; font-size: .7rem; font-weight: 650; letter-spacing: .13em; }
.home-gallery-display {
  display: grid;
  position: relative;
  place-items: center;
  min-height: clamp(315px, 34vw, 440px);
  padding: 16px;
  background: repeating-linear-gradient(135deg,transparent 0 15px,#f4dcff08 15px 16px);
}
.home-gallery-display img { display: block; width: clamp(156px, 18vw, 222px); height: auto; border-radius: 17px; border: 1px solid #e6dcf75c; box-shadow: 0 20px 48px #040307a6; user-select: none; }
.home-gallery-display img[hidden] { display: none; }
.home-gallery-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; padding: 12px 10px 6px; border-top: 1px solid var(--home-line); }
.home-gallery-controls button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 5px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #e4dcee; font-size: .86rem; }
.home-gallery-controls button:is(:hover,[aria-pressed=true]) { background: #302644; border-color: #a88bd35c; }
.home-gallery-controls i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #92e9f6; }
.home-gallery-controls [data-home-look=sol] i { background: #f6a17a; }
.home-gallery-controls [data-home-look=aura] i { background: #e2dcf3; }
.home-gallery > p { min-height: 41px; padding: 4px 8px 10px; text-align: center; }
.home-feature-section,.home-plan-section,.home-faq { border-top: 1px solid var(--home-line); padding: clamp(32px,5vw,62px) 0; }
.home-section-heading h2,.home-closing h2 { margin: 9px 0; font: 720 clamp(1.9rem,4vw,3.5rem)/1.12 Manrope,Inter,sans-serif; letter-spacing: -.045em; }
.home-section-heading p { color: var(--home-muted); }
.home-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.home-feature-grid article,.landing-extras article { padding: clamp(13px,2.5vw,24px); border: 1px solid var(--home-line); border-radius: 12px; background: #15131e; }
.home-feature-grid article svg { width: 23px; height: 23px; color: var(--home-accent); }
.home-feature-grid h3 { margin: 10px 0 6px; font-size: 1rem; }
.home-feature-grid p,.landing-extras p,.home-faq p { color: var(--home-muted); line-height: 1.6; font-size: .92rem; }
.landing-compare,.landing-extras { margin-top: 22px; }
.landing-compare table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: clamp(.77rem,1.4vw,1rem); background: #17141f; border: 1px solid var(--home-line); }
.landing-compare :is(th,td) { padding: clamp(7px,1.5vw,14px); border-bottom: 1px solid var(--home-line); text-align: left; overflow-wrap: anywhere; }
.landing-compare thead th:first-child { width: 52%; }
.landing-compare tbody th { font-weight: 500; }
.landing-compare :is(th,td):last-child { background: #261b36; }
.landing-extras h3 { margin-bottom: 10px; }
.landing-extras article { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.landing-extras article div { flex: 1 1 180px; }
.landing-extras article > span { color: var(--home-accent); }
.home-faq { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1fr); gap: 18px; }
.home-faq details { padding: 14px 0; border-bottom: 1px solid var(--home-line); }
.home-faq summary { cursor: pointer; font-weight: 600; }
.home-faq p { margin: 9px 0 0; }
.home-closing { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: clamp(18px,4vw,42px); border-radius: 16px; background: linear-gradient(110deg,#291d3b,#191b30); border: 1px solid var(--home-line); }
.home-editorial [id] { scroll-margin-top: 24px; }
@media(max-width:760px) {
  header nav .home-nav-extra { display: none; }
  .home-opening,.home-faq { grid-template-columns: minmax(0,1fr); }
  .home-gallery-display { min-height: 310px; }
  .home-feature-grid { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:390px) {
  .home-editorial .landing-claim .button { padding-inline: 9px; font-size: .78rem; }
}

/* Centered product showcase with the desktop editor and profile stack. */
body:has(.home-editorial) {
  background: radial-gradient(ellipse 110% 650px at 50% 0,#291a32 0%,#1a1320 52%,transparent 100%),#0b0a0e;
}
header:has(+ .home-editorial) {
  width: min(calc(100% - 40px),975px);
  height: 62px;
  border-radius: 999px;
  background: #131117;
  border-color: #e5c3f919;
}
header:has(+ .home-editorial) nav a[href="/edit"],
header:has(+ .home-editorial) nav a[href="/signup"] {
  padding: 8px 13px;
  border: 1px solid #a36bbb60;
  border-radius: 999px;
  background: #32223f;
  color: #f1dfff;
}
.home-opening { display: block; position: relative; isolation: isolate; padding: clamp(34px,5vw,70px) 0 clamp(38px,6vw,76px); }
.home-intro { text-align: center; }
.home-intro h1 { font-size: clamp(2.45rem,4.15vw,3.8rem); letter-spacing: -.045em; margin: 0 0 14px; }
.home-intro > p { max-width: 550px; margin-inline: auto; }
.home-hero-actions { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 21px; }
.home-editorial :is(.home-primary,.home-secondary) {
  padding: 10px 17px;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: .87rem;
}
.home-editorial .home-primary { border-color: #a97bc870; background: #4b295b; color: #faf0ff; }
.home-editorial .home-primary:hover { background: #613971; }
.home-editorial .home-secondary { border-color: var(--home-line); background: #17131c; color: #efe7f7; }
.home-gallery { margin-top: clamp(24px,4vw,48px); padding: 0; background: transparent; border: 0; overflow: visible; }
.home-showcase {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  align-items: center;
  gap: clamp(12px,2.5vw,36px);
  padding: 12px clamp(8px,3vw,36px);
  user-select: none;
}
.home-studio-shot {
  display: grid;
  grid-template-columns: 25% minmax(0,1fr);
  aspect-ratio: 1.64;
  min-width: 0;
  align-self: start;
  margin-top: 6%;
  border: 1px solid #be89dc88;
  border-radius: clamp(12px,2vw,23px);
  background: #121017;
  overflow: hidden;
  transform: perspective(1050px) rotateX(7deg) rotateY(15deg) rotateZ(4deg);
  box-shadow: 0 20px 48px #0006;
  mask-image: linear-gradient(#000 0 68%,#000a 86%,transparent);
}
.home-shot-rail,.home-shot-body { min-width: 0; padding: clamp(7px,1.6vw,23px); }
.home-shot-rail { background: #1d1526; border-inline-end: 1px solid #e5c3f919; }
.home-shot-rail b { display: block; margin-bottom: 14%; font-size: clamp(.7rem,1.7vw,1.4rem); }
.home-shot-rail span { display: flex; align-items: center; gap: 4px; padding: 8% 4px; white-space: nowrap; font-size: clamp(.41rem,.86vw,.76rem); color: #ded3e5; }
.home-shot-active { background: #482b54; border-radius: 5px; }
.home-shot-rail svg,.home-shot-assets svg { flex: none; width: 1em; height: 1em; color: #e6b8ff; }

.home-shot-assets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.home-shot-assets > div { display: grid; justify-items: center; gap: 5px; padding: 12% 4px; border: 1px solid #e5c3f924; border-radius: 6px; background: #251b30; font-size: clamp(.48rem,1vw,.8rem); }
.home-shot-settings { padding: 6%; margin-top: 5%; border: 1px solid #e5c3f920; border-radius: 7px; font-size: clamp(.5rem,1vw,.82rem); }
.home-shot-settings div { display: flex; gap: 6px; align-items: center; margin-top: 4%; color: #dbcde3; }

.home-gallery-display { display: block; position: relative; aspect-ratio: 1.2; min-height: 0; padding: 0; background: transparent; }
.home-gallery-display img {
  position: absolute;
  top: var(--card-top);
  left: var(--card-left);
  width: 45%;
  max-width: none;
  opacity: .72;
  transform: rotate(var(--card-rotation));
  border-color: #c18cdb90;
  border-radius: clamp(10px,2vw,21px);
  mask-image: linear-gradient(#000 0 71%,#000c 86%,transparent 100%);
  transition: transform .24s ease,opacity .24s ease;
}
.home-gallery-display [data-home-image=aura] { --card-top:0%; --card-left:4%; --card-rotation:11deg; z-index: 1; }
.home-gallery-display [data-home-image=sol] { --card-top:7%; --card-left:25%; --card-rotation:6deg; z-index: 2; }
.home-gallery-display [data-home-image=nova] { --card-top:13%; --card-left:49%; --card-rotation:-3deg; z-index: 3; }
.home-gallery[data-look=aura] [data-home-image=aura],
.home-gallery[data-look=sol] [data-home-image=sol],
.home-gallery[data-look=nova] [data-home-image=nova] { z-index: 4; opacity: 1; transform: translateY(-6px) rotate(var(--card-rotation)); }
.home-gallery-controls { position: relative; z-index: 5; margin-top: 1%; border: 0; }
.home-gallery-controls button:is(:hover,[aria-pressed=true]) { background: #352342; }
.home-feature-section .home-section-heading,.home-plan-section .home-section-heading { text-align: center; }
.home-feature-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.home-feature-grid article { background: #151218; }
.home-claim-strip { display: grid; justify-items: center; gap: 10px; margin-top: 26px; }
.home-plan-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; max-width: 690px; margin: 26px auto 36px; }
.home-plan-cards article { display: flex; flex-direction: column; gap: 9px; padding: clamp(15px,3vw,27px); border: 1px solid var(--home-line); border-radius: 14px; background: #151218; }
.home-plan-cards .home-plan-plus { background: linear-gradient(140deg,#2b1a36,#19121f); border-color: #ad76c55e; }
.home-plan-cards small,.home-plan-cards li::marker { color: var(--home-accent); }
.home-plan-cards strong { font-size: 1.45rem; }
.home-plan-cards strong span,.home-plan-cards p { font-size: .83rem; color: var(--home-muted); }
.home-plan-cards ul { margin: 0 0 8px; padding-inline-start: 18px; display: grid; gap: 7px; font-size: .91rem; }
.home-plan-cards .button { margin-top: auto; }
.home-footer { display: block; width: min(calc(100% - 40px),1184px); max-width: none; margin: 0 auto; padding: 28px 0; border-top: 1px solid #d8b7ed24; color: #c6b9d0; }
.home-footer-grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap: 20px; }
.home-footer-grid .brand { display: inline-flex; align-items: center; gap: 7px; }
.home-footer-grid p { max-width: 260px; margin: 8px 0 0; line-height: 1.55; }
.home-footer-grid nav { display: grid; align-content: start; justify-items: start; gap: 8px; }
.home-footer-grid strong { color: #f5ecfc; }
.home-footer-base { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 14px; border-top: 1px solid #d8b7ed24; }
.home-footer-base svg { width: 20px; height: 20px; }
@media(max-width:760px) {
  header:has(+ .home-editorial) { width: calc(100% - 26px); height: auto; min-height: 54px; padding-inline: 12px; }
  header:has(+ .home-editorial) nav { gap: 7px; }
  header:has(+ .home-editorial) nav a[href="/#ejemplos"],header:has(+ .home-editorial) nav #logout { display: none; }
  .home-showcase { gap: 9px; padding-inline: 0; }
  .home-studio-shot { aspect-ratio: 1.44; }
  .home-shot-rail { padding-inline: 3px; }
  .home-shot-rail svg { display: none; }
  .home-shot-rail span { font-size: .37rem; padding-inline: 0; }
  .home-feature-grid,.home-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:430px) {
  .home-plan-cards { grid-template-columns: minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  .home-gallery-display img { transition: none; }
}

.home-brand-field {
  position: absolute;
  inset: -90px 0 14%;
  z-index: -1;
  pointer-events: none;
  overflow: clip;
  mask-image: linear-gradient(#000 0 45%, transparent);
}
.home-brand-field span {
  position: absolute;
  width: clamp(38px,8vw,116px);
  aspect-ratio: 1;
  background: #b375c7;
  mask: url("/assets/vyre-logo-v2.webp") center / contain no-repeat;
  opacity: .095;
  transform: rotate(var(--mark-angle,-22deg));
}
.home-brand-field span:nth-child(1) { inset: 0 auto auto 1%; --mark-angle: -29deg; }
.home-brand-field span:nth-child(2) { inset: 16% auto auto 10%; --mark-angle: 18deg; }
.home-brand-field span:nth-child(3) { inset: 2% auto auto 23%; --mark-angle: -14deg; }
.home-brand-field span:nth-child(4) { inset: 30% auto auto 1%; --mark-angle: -14deg; }
.home-brand-field span:nth-child(5) { inset: 4% 16% auto auto; --mark-angle: 22deg; }
.home-brand-field span:nth-child(6) { inset: 24% 3% auto auto; --mark-angle: -25deg; }
.home-brand-field span:nth-child(7) { inset: 0 1% auto auto; --mark-angle: 12deg; }
.home-gallery { position: relative; }
.home-showcase-sparks { position: absolute; inset: 0; pointer-events: none; color: #deb6f3; }
.home-showcase-sparks span { position: absolute; opacity: .56; font-size: clamp(.55rem,1.2vw,1rem); }
.home-showcase-sparks span:nth-child(1) { top: 21%; left: 52%; }
.home-showcase-sparks span:nth-child(2) { bottom: 22%; left: 2%; }
.home-showcase-sparks span:nth-child(3) { right: 5%; bottom: 18%; }
.home-studio-shot { margin: 6% 0 0; grid-template-columns: 23% minmax(0,1fr); }
.home-shot-rail,.home-shot-body { padding: clamp(6px,1.2vw,18px); }
.home-shot-rail { display: flex; flex-direction: column; background: #18131e; }
.home-shot-brand,.home-shot-account { display: flex; align-items: center; gap: 5px; }
.home-shot-brand { margin: 2px 0 10%; }
.home-shot-brand img { width: 25%; height: auto; }
.home-shot-brand b { margin: 0; }
.home-shot-account { margin-top: auto; padding-top: 6px; color: #ede1f1; font-size: clamp(.4rem,.86vw,.73rem); }
.home-shot-account i { display: grid; place-items: center; width: 1.6em; aspect-ratio: 1; border-radius: 50%; background: #694a9d; font-style: normal; }
.home-shot-account strong,.home-shot-account small { display: block; line-height: 1.15; }
.home-shot-account small { color: #c3abc9; }
.home-shot-heading { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 5%; color: #d4b6de; font-size: clamp(.38rem,.75vw,.68rem); }
.home-shot-heading strong { display: block; margin-top: 2px; color: #fbf4ff; font-size: clamp(.58rem,1.4vw,1.18rem); }
.home-shot-heading > span { border-radius: 999px; background: #2c1d37; padding: 3px 6px; }
.home-shot-assets > div { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 1px 4px; padding: 8% 7%; }
.home-shot-assets > div strong { grid-column: 1 / -1; color: #f4e6f9; font-size: clamp(.42rem,.87vw,.76rem); overflow-wrap: anywhere; }
.home-shot-lower { display: grid; grid-template-columns: minmax(0,2.5fr) minmax(0,1fr); gap: 5px; margin-top: 5%; }
.home-shot-chart,.home-shot-settings { border: 1px solid #e5c3f920; border-radius: 6px; background: #1c1623; padding: 7%; }
.home-shot-chart { font-size: clamp(.43rem,.96vw,.8rem); }
.home-shot-chart > span { display: block; margin: 2px 0 4px; color: #bcabca; font-size: .8em; }
.home-shot-chart svg { display: block; width: 100%; height: auto; }
.home-shot-days { display: flex; justify-content: space-between; gap: 1px; margin-top: 3px; color: #c2acc9; font-size: .68em; }
.home-shot-settings { margin: 0; padding: 10% 7%; }
.home-shot-settings div { margin-top: 11%; padding: 4px 2px; border-radius: 4px; background: #302338; font-size: .85em; line-height: 1.15; gap: 3px; }
.home-shot-settings svg { width: .9em; height: .9em; flex: none; color: #dba8f0; }
@media(max-width:760px) {
  .home-brand-field { inset-inline: -10px; }
  .home-brand-field span:nth-child(4) { display: none; }
  .home-shot-rail { padding-inline: 3px; }
  .home-shot-brand { gap: 2px; }
  .home-shot-account,.home-shot-days { display: none; }
  .home-shot-settings div { padding: 1px; }
  .home-shot-assets > div { padding: 4px 2px; }
}

.home-showcase-controls { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(12px,2.5vw,36px); }
.home-studio-controls { justify-content: center; }
.home-shot-body[hidden] { display: none; }
.home-shot-share-link,.home-shot-badges > div {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 6%;
  border: 1px solid #d4a6f12c;
  border-radius: 6px;
  background: #271c33;
  font-size: clamp(.43rem,.93vw,.8rem);
}
.home-shot-share-link svg,.home-shot-badges img { width: 1.4em; height: 1.4em; color: #e2b2ff; }
.home-shot-share-link small,.home-shot-share-link strong { display: block; }
.home-shot-share-link span,.home-shot-badges small { color: #e0c5ed; white-space: nowrap; }
.home-shot-message { margin: 6px 0; padding: 6px; background: #291e31; border-radius: 4px; }
.home-shot-badges { display: grid; gap: 5px; }
.home-shot-badges > div { padding: 3% 4%; }
@media(max-width:760px) {
  .home-showcase-controls { grid-template-columns: minmax(0,1fr); gap: 0; }
  .home-showcase-controls .home-gallery-controls { margin: 0; padding-block: 5px; }
}