@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root {
  color-scheme:dark;
  --bg:#090b10;
  --surface:#10131b;
  --surface2:#181c25;
  --line:#252934;
  --text:#f0f1f5;
  --muted:#989eae;
  --accent:#a899fa;
  --green:#72c9b2;
  --radius:12px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',Arial,sans-serif;
  font-size:14px;
  line-height:1.6
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  outline-offset:5px
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent)
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer;
  color:inherit
}
button:disabled {
  opacity:.45;
  cursor:not-allowed
}
button {
  border:0
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:'Manrope',Arial,sans-serif;
  line-height:1.2;
  font-weight:650;
  letter-spacing:-.04em
}
h1 {
  font-size:clamp(36px,5vw,60px)
}
h2 {
  font-size:clamp(25px,3vw,34px)
}
h3 {
  font-size:18px;
  letter-spacing:-.025em
}
p {
  color:var(--muted)
}
small {
  font-size:11px;
  line-height:1.5
}
svg {
  flex-shrink:0
}
img {
  max-width:100%
}
.shell {
  width:min(1200px,calc(100% - 80px));
  margin:auto
}
.muted {
  color:var(--muted)
}
.eyebrow {
  font-size:10px;
  letter-spacing:.16em;
  font-weight:650;
  color:var(--accent);
  display:block;
  margin-bottom:14px
}
.primary,.secondary,.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:44px;
  border-radius:8px;
  padding:12px 18px;
  font-weight:600;
  font-size:12px;
  transition:background .2s,transform .2s,border-color .2s
}
.primary {
  background:var(--accent);
  color:#131020
}
.primary:hover:not(:disabled) {
  background:#b8abff;
  transform:translateY(-1px)
}
.secondary {
  background:var(--surface2);
  border:1px solid var(--line)
}
.secondary:hover:not(:disabled) {
  border-color:#727888
}
.text-button {
  padding:8px 0;
  min-height:36px;
  background:transparent
}
.text-button:hover {
  color:var(--accent)
}
.wide {
  width:100%;
  margin-top:16px
}
.icon-button {
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  min-height:34px;
  border-radius:8px;
  color:var(--muted)
}
.icon-button:hover {
  background:var(--surface2);
  color:var(--text)
}
.skip {
  position:fixed;
  left:16px;
  top:-60px;
  z-index:100;
  background:var(--accent);
  padding:12px;
  color:var(--bg)
}
.skip:focus {
  top:16px
}
header {
  height:84px;
  border-bottom:1px solid #1b1f28;
  position:sticky;
  top:0;
  z-index:30;
  background:#090b10eb;
  backdrop-filter:blur(16px)
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}
.brand {
  display:inline-flex;
  gap:9px;
  align-items:center;
  font-family:'Manrope',sans-serif;
  font-size:22px;
  letter-spacing:.035em;
  font-weight:800
}
.brand-symbol {
  background:var(--accent);
  font-size:27px;
  font-weight:800;
  color:#171322;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  line-height:1;
  border-radius:8px;
  transform:rotate(-8deg);
  padding-bottom:5px;
  font-style:italic
}
.brand-period {
  color:var(--accent);
  margin-left:-10px
}
.header-inner nav {
  display:flex;
  gap:29px;
  align-items:center
}
.header-inner nav a {
  color:var(--muted);
  font-size:12px;
  position:relative;
  padding:32px 0
}
.header-inner nav a:hover,.header-inner nav .current {
  color:var(--text)
}
.header-inner nav .current:after {
  content:'';
  position:absolute;
  bottom:19px;
  left:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent)
}
.header-actions {
  display:flex;
  align-items:center;
  gap:23px
}
.account-link {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:10px
}
.cart-icon {
  position:relative;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  flex-shrink:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface2);
  transition:background .2s ease,border-color .2s ease;
}
.cart-icon:hover {
  border-color:var(--accent);
  background:#8b8ef31a;
}
.cart-icon svg { width:26px; height:26px; }
.cart-icon span {
  position:absolute;
  top:-6px;
  right:-6px;
  font-size:11px;
  min-width:22px;
  height:22px;
  padding:0 4px;
  color:var(--bg);
  background:var(--accent);
  display:grid;
  place-items:center;
  border:2px solid var(--bg);
  border-radius:50%;
  font-weight:700;
}
.mobile-toggle {
  display:none
}
.hero {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:52px;
  align-items:center;
  min-height:548px;
  padding:66px 0 64px
}
.hero-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  letter-spacing:.14em;
  font-weight:600;
  color:#b5b0c7;
  margin-bottom:25px
}
.hero-label>span {
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px #a899fa55
}
.hero h1 {
  font-size:clamp(38px,4.5vw,59px);
  line-height:1.14;
  letter-spacing:-.055em;
  font-weight:600
}
.hero h1>span {
  display:block
}
.muted-line {
  color:#9ba0ae
}
.hero-copy>p {
  font-size:14px;
  max-width:380px;
  margin:23px 0 28px;
  line-height:1.8
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:27px
}
.hero-note {
  margin-top:30px;
  color:#858b9b;
  font-size:10px;
  display:flex;
  align-items:center;
  gap:8px
}
.hero-art {
  height:374px;
  position:relative;
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 50%,#27233855,transparent 68%);
  border-radius:18px;
  border:1px solid #23242f;
  overflow:hidden
}
.hero-art:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(#89809930 .7px,transparent .7px);
  background-size:20px 20px;
  mask-image:linear-gradient(transparent,black 40%,transparent)
}
.art-top {
  position:absolute;
  top:23px;
  left:25px;
  right:25px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#9a96a9;
  font-size:8px;
  letter-spacing:.1em
}
.art-top svg {
  margin-left:auto
}
.small-dot {
  width:4px;
  height:4px;
  background:var(--accent);
  border-radius:50%
}
.orbital {
  position:absolute;
  border:1px solid #55506a25;
  border-radius:50%;
  width:420px;
  height:190px;
  left:10px;
  top:80px;
  transform:rotate(-30deg)
}
.orbit-two {
  transform:rotate(40deg);
  top:90px
}
.floating-card {
  width:152px;
  height:184px;
  border:1px solid #3c3a4a;
  border-radius:15px;
  position:absolute;
  background:linear-gradient(145deg,#222430,#101218);
  box-shadow:0 20px 35px #0005;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.floating-card small {
  font-size:10px;
  color:#dedde4;
  margin-top:18px
}
.art-chip {
  font-size:6px;
  letter-spacing:.12em;
  color:#9690a6;
  border:1px solid #4a425955;
  padding:4px 8px;
  border-radius:20px;
  margin-top:9px
}
.float-netflix {
  top:92px;
  left:35px;
  transform:rotate(-13deg);
  z-index:2
}
.float-music {
  top:63px;
  left:calc(50% - 53px);
  transform:rotate(6deg);
  z-index:3;
  background:linear-gradient(145deg,#192c28,#111a18);
  border-color:#355043
}
.float-ai {
  top:135px;
  right:19px;
  transform:rotate(17deg);
  z-index:4;
  background:linear-gradient(145deg,#29263b,#181621)
}
.art-n {
  font-family:Arial,sans-serif;
  font-size:64px;
  line-height:.9;
  font-weight:900;
  color:#ed4c61
}
.art-music {
  color:#69d7a0;
  font-size:68px;
  line-height:.85;
  transform:rotate(-10deg)
}
.art-ai {
  font-size:65px;
  line-height:.9;
  color:#b8abf1
}
.art-bottom {
  position:absolute;
  bottom:20px;
  left:24px;
  right:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:7px;
  letter-spacing:.1em;
  color:#a5a1b6
}
.art-bottom>span:last-child {
  display:flex;
  align-items:center;
  gap:5px
}
.art-bottom>div {
  display:flex;
  gap:5px
}
.art-bottom>div>span {
  height:3px;
  width:13px;
  border-radius:2px;
  background:#45414f
}
.art-bottom>div>span:first-child {
  background:var(--accent);
  width:24px
}
.benefit-strip {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 4px;
  gap:20px
}
.benefit-strip>span {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:11px;
  color:#aaadbb
}
.benefit-strip svg {
  color:#8b849f
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:28px
}
.section-heading>.muted {
  font-size:11px
}
.popular {
  padding:66px 0
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}
.popular-grid {
  grid-template-columns:repeat(6,1fr)
}
.product-card {
  background:var(--surface);
  border:1px solid #232732;
  border-radius:var(--radius);
  padding:19px;
  transition:border-color .2s,transform .2s;
  min-width:0
}
.product-card:hover {
  border-color:#514b67;
  transform:translateY(-3px)
}
.product-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:22px
}
.service-mark {
  height:43px;
  width:43px;
  background:color-mix(in srgb,var(--service),transparent 90%);
  border:1px solid color-mix(in srgb,var(--service),transparent 80%);
  color:var(--service);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  flex-shrink:0;
  font-size:22px;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  letter-spacing:-.07em
}
.service-mark img {
  width:80%;
  height:80%;
  object-fit:contain
}
.service-mark.large {
  width:72px;
  height:72px;
  font-size:38px
}
.product-title {
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  text-align:left;
  font-weight:600;
  font-size:14px;
  line-height:1.3
}
.product-title svg {
  color:#696e7e
}
.product-card>p {
  font-size:10px;
  margin-top:6px;
  min-height:30px
}
.product-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin-top:17px
}
.availability {
  font-size:9px;
  color:#a2a4b2;
  display:flex;
  align-items:center;
  gap:6px
}
.availability:before {
  content:'';
  height:4px;
  width:4px;
  border-radius:50%;
  background:#6c6b7b
}
.availability.available {
  color:var(--green)
}
.availability.available:before {
  background:var(--green)
}
.availability.stock-pulse {
  color: #87dfa7;
}
.availability.stock-pulse:before {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: #65dd98;
  animation: stock-breathe 4.8s ease-in-out infinite;
}
@keyframes stock-breathe {
  0%, 50%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 #65dd9826;
  }
  72% {
    opacity: .6;
    box-shadow: 0 0 0 5px #65dd9800;
  }
  88% {
    opacity: 1;
    box-shadow: 0 0 0 0 #65dd9800;
  }
}
.add-service {
  height:27px;
  width:27px;
  border:1px solid #333442;
  background:#1c202a;
  border-radius:7px;
  display:grid;
  place-items:center;
  color:#bcb5d4
}
.add-service:hover,.add-service.added {
  background:var(--accent);
  color:#191523
}
.favorite {
  min-width:25px;
  min-height:27px
}
.favorite.is-favorite {
  color:var(--accent)
}
.favorite.is-favorite svg {
  fill:var(--accent)
}
.builder {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:60px;
  padding:45px;
  background:linear-gradient(110deg,#16141e,#11131b 70%);
  border:1px solid #2e293c;
  border-radius:16px;
  align-items:center;
  scroll-margin-top:100px
}
.builder-copy h2 {
  font-size:38px;
  line-height:1.13
}
.builder-copy p {
  font-size:12px;
  margin-top:20px;
  line-height:1.8
}
.subtle-label {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#9893a8;
  font-size:10px;
  margin-top:25px
}
.builder-panel {
  background:#0e1017;
  border:1px solid #302c3c;
  border-radius:12px;
  padding:23px
}
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px
}
.panel-heading>strong {
  font-size:13px
}
.panel-heading>span {
  color:var(--muted);
  font-size:10px
}
.slots {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px
}
.slot {
  position:relative;
  border:1px dashed #3a3649;
  background:#18162030;
  border-radius:9px;
  min-height:84px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#8f859f;
  overflow:visible;
  min-width:0;
  padding:8px 2px
}
.slot:hover {
  border-color:var(--accent)
}
.slot small {
  font-size:8px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.slot.filled {
  border:1px solid #48405c;
  background:#211c2a
}
.slot .service-mark {
  height:31px;
  width:31px;
  font-size:18px;
  border-radius:8px
}
.slot-remove {
  position:absolute;
  right:-4px;
  top:-4px;
  background:#514360;
  color:white;
  border-radius:50%;
  width:16px;
  height:16px;
  display:grid;
  place-items:center
}
.builder-label {
  display:block;
  font-size:10px;
  color:#a8a3b4;
  margin:23px 0 10px
}
.duration {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px
}
.duration button {
  position:relative;
  background:#171922;
  border:1px solid #2b2c3a;
  border-radius:7px;
  padding:10px 6px;
  font-size:11px;
  min-height:40px;
  color:#a5a2b2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.duration button.selected {
  background:#30283f;
  color:#c8b9ff;
  border-color:#83709e
}
.duration small {
  font-size:6px;
  letter-spacing:.02em
}
.builder-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:23px;
  border-top:1px solid #292631;
  padding-top:21px
}
.builder-total>div {
  display:flex;
  flex-direction:column
}
.builder-total small {
  font-size:9px;
  color:#9692a3
}
.builder-total strong {
  font-size:30px;
  letter-spacing:-.06em;
  line-height:1.5;
  font-weight:500
}
.builder-total strong span {
  font-size:10px;
  letter-spacing:0;
  color:#9e97ab
}
.builder-total .primary {
  font-size:10px;
  padding:12px 14px
}
.fine-print {
  font-size:9px;
  color:#9893a4;
  line-height:1.7;
  margin-top:17px
}
.catalog-section {
  padding:76px 0 20px
}
.catalog-tools {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:18px
}
.search {
  display:flex!important;
  flex-direction:row;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  padding:0 13px;
  flex:1;
  color:#83879a
}
.search > svg {
  flex-shrink:0;
}
.search input {
  min-width:0;
  width:100%;
  background:transparent;
  border:0;
  padding:12px 0;
  font-size:12px;
  color:var(--text);
  min-height:43px
}
.search input:focus {
  outline:0
}
.search:focus-within {
  outline:2px solid var(--accent);
  outline-offset:2px
}
select,input,textarea {
  border:1px solid #323541;
  background:#11151e;
  color:var(--text);
  border-radius:7px;
  padding:11px 12px;
  min-width:0
}
select {
  font-size:11px;
  min-height:44px
}
input::placeholder,textarea::placeholder {
  color:#818797
}
input[type=color] {
  padding:3px;
  min-height:44px
}
textarea {
  resize:vertical;
  min-height:88px;
  line-height:1.6
}
label {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:17px;
  font-size:12px;
  color:#c8cad3
}
label>small {
  color:var(--muted);
  font-size:10px
}
.catalog-tools label {
  margin:0
}
.category-tabs,.admin-tabs {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:24px
}
.category-tabs button,.admin-tabs button {
  background:transparent;
  color:#9da1b1;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:7px;
  font-size:11px;
  min-height:38px;
  padding:9px 13px
}
.category-tabs button:hover,.admin-tabs button:hover {
  background:var(--surface)
}
.category-tabs button.selected,.admin-tabs button.selected {
  background:#252032;
  color:#c2b0f9;
  border-color:#3d334e
}
.category-tabs button svg {
  width:14px
}
.how {
  padding:76px 0;
  border-bottom:1px solid var(--line)
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  margin-top:35px
}
.steps article>span {
  font-family:'Manrope',sans-serif;
  font-size:12px;
  color:var(--accent);
  border:1px solid #393144;
  background:#211c2b;
  padding:7px 9px;
  border-radius:7px;
  display:inline-block;
  margin-bottom:20px
}
.steps h3 {
  font-size:16px;
  margin-bottom:10px
}
.steps p {
  font-size:12px;
  line-height:1.8
}
.faq {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:80px;
  padding:72px 0
}
.faq h2 {
  line-height:1.25
}
.faq .text-button {
  font-size:11px;
  margin-top:20px
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  gap:20px;
  padding:19px 0;
  font-size:12px;
  color:#d6d6df
}
summary::-webkit-details-marker {
  display:none
}
details[open] summary svg {
  transform:rotate(45deg)
}
details p {
  font-size:12px;
  line-height:1.8;
  padding-bottom:20px
}
footer {
  border-top:1px solid var(--line);
  padding-top:42px!important
}
.footer-top {
  display:grid;
  grid-template-columns:2.4fr 1fr 1fr 1.2fr;
  gap:30px;
  padding-bottom:40px
}
.footer-top .brand {
  font-size:20px
}
.footer-top p {
  font-size:11px;
  margin-top:14px
}
.footer-top>div {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:10px
}
.footer-top>div>strong {
  font-size:11px;
  font-weight:500;
  margin-bottom:4px
}
.footer-top>div>a:not(.brand) {
  font-size:10px;
  color:var(--muted)
}
.footer-top>div>a:hover {
  color:var(--accent)
}
.footer-bottom {
  border-top:1px solid #1d212a;
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  color:#818696
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:70;
  display:flex;
  align-items:center;
  gap:12px;
  background:#252330;
  border:1px solid #5b4c72;
  padding:14px 17px;
  max-width:min(560px,calc(100% - 32px));
  width:max-content;
  box-shadow:0 12px 50px #0008;
  border-radius:12px;
  font-size:12px
}
.page-section {
  padding:58px 0 80px;
  min-height:62vh
}
.page-section>h1 {
  margin-bottom:34px
}
.page-intro {
  padding:60px 0 40px
}
.page-intro p {
  margin-top:17px
}
.breadcrumb {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-bottom:32px
}
.empty {
  text-align:center;
  padding:62px 24px;
  border:1px dashed var(--line);
  border-radius:12px;
  margin:20px 0
}
.empty>svg {
  color:var(--accent);
  margin-bottom:20px
}
.empty h2,.empty h3 {
  margin-bottom:12px
}
.empty p {
  margin-bottom:25px
}
.checkout-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:28px;
  align-items:start
}
.summary,.auth-card,.editor,.order-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px
}
.summary h2 {
  font-size:23px;
  margin-bottom:16px
}
.summary>p {
  font-size:12px;
  margin-bottom:16px
}
.summary-price {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:20px 0;
  border-block:1px solid var(--line);
  font-size:12px;
  margin-top:25px
}
.summary-price strong {
  font-size:21px;
  letter-spacing:-.04em
}
.cart-item {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  padding:25px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  margin-bottom:14px
}
.cart-item>div:nth-child(2) {
  flex:1
}
.cart-item h3 {
  font-size:14px;
  margin-bottom:7px
}
.cart-item p {
  font-size:11px
}
.cart-item small {
  color:var(--muted)
}
.stack-marks {
  display:flex;
  gap:4px;
  flex-wrap:wrap
}
.stack-marks .service-mark {
  width:30px;
  height:30px;
  font-size:16px
}
.notice {
  display:flex;
  align-items:flex-start;
  gap:11px;
  border:1px solid #4a3e5d;
  border-radius:9px;
  background:#221d2c;
  color:#c2b6d5;
  padding:15px 16px;
  font-size:12px;
  line-height:1.7;
  margin:18px 0
}
.notice.error {
  border-color:#744149;
  color:#e8adb8;
  background:#2c1b22
}
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.four-col {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}
.card-test {
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  padding:28px;
  margin-top:24px
}
.test-banner {
  display:flex;
  align-items:center;
  gap:13px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  margin-bottom:22px;
  color:var(--accent)
}
.test-banner strong {
  font-size:12px
}
.test-banner p {
  font-size:11px;
  margin-top:4px
}
.payment-option {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  background:var(--surface2);
  padding:15px;
  border:1px solid #55506b;
  border-radius:9px
}
.payment-option small {
  display:block;
  font-size:9px;
  color:var(--muted)
}
.radio-dot {
  margin-left:auto;
  border:4px solid var(--accent);
  width:16px;
  height:16px;
  border-radius:50%
}
.order-summary {
  border-bottom:1px solid var(--line);
  padding:17px 0
}
.order-summary strong {
  font-size:12px
}
.order-summary p {
  font-size:11px;
  margin-top:6px
}
.checkbox {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:9px;
  font-size:11px;
  flex-wrap:wrap
}
.checkbox input {
  accent-color:var(--accent);
  height:16px;
  width:16px;
  margin:0;
  flex-shrink:0
}
.checkbox a {
  text-decoration:underline
}
.legal>p {
  white-space:pre-wrap;
  line-height:1.9;
  max-width:800px
}
.support-box {
  padding:30px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  display:flex;
  gap:25px;
  align-items:center
}
.support-box>div {
  flex:1
}
.support-box h2 {
  font-size:22px;
  margin-bottom:8px
}
.support-box p {
  font-size:12px
}
.auth-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
  padding:90px 60px
}
.auth-copy h1 {
  font-size:44px
}
.auth-copy p {
  margin-top:25px;
  max-width:330px;
  line-height:1.9
}
.auth-card {
  padding:35px
}
.auth-card>svg {
  color:var(--accent);
  margin-bottom:22px
}
.auth-card h2 {
  font-size:27px
}
.auth-card>p {
  font-size:12px;
  margin-top:10px
}
.auth-card form {
  margin-top:25px
}
.auth-links {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:20px 0
}
.auth-links button {
  background:transparent;
  padding:0;
  color:var(--accent);
  font-size:10px
}
.auth-card>small {
  font-size:9px
}
.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:30px 0 40px
}
.stats article {
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  padding:25px;
  display:flex;
  flex-direction:column;
  gap:9px
}
.stats article>svg {
  color:var(--accent);
  width:20px
}
.stats strong {
  font-size:34px;
  font-weight:500;
  letter-spacing:-.05em
}
.stats span {
  color:#a4a6b5;
  font-size:12px
}
.stats small {
  color:var(--muted);
  font-size:10px
}
.account-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:30px;
  align-items:start
}
.account-grid h2 {
  font-size:25px;
  margin-bottom:22px
}
.order-card {
  margin:20px 0
}
.order-card p {
  font-size:11px;
  margin:12px 0
}
.status-row {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.status-row span {
  background:var(--surface2);
  border:1px solid #343443;
  padding:5px 10px;
  border-radius:5px;
  font-size:10px
}
.order-card form {
  margin-top:25px
}
.price-table {
  padding:45px 0 70px
}
.price-table p {
  font-size:12px;
  margin-top:12px
}
.table-scroll {
  overflow:auto;
  margin:25px 0;
  max-width:100%
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  text-align:left;
  min-width:550px
}
th,td {
  padding:16px;
  border-bottom:1px solid var(--line)
}
th {
  color:#aaa5ba;
  font-size:11px;
  font-weight:500;
  background:var(--surface)
}
td small {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:6px
}
td input {
  width:100%;
  min-width:75px;
  max-width:150px
}
.admin-tabs {
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  margin:25px 0 35px
}
.admin .section-heading h2 {
  font-size:24px
}
.editor {
  margin:30px 0
}
.editor h2 {
  font-size:25px;
  margin-bottom:25px
}
.editor h3,.settings-form h3 {
  margin:25px 0 17px;
  font-size:18px
}
fieldset {
  border:1px solid var(--line);
  border-radius:8px;
  margin:15px 0 20px;
  padding:15px
}
legend {
  color:var(--muted);
  font-size:11px
}
.check-grid {
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px
}
.button-row {
  display:flex;
  gap:12px
}
.settings-form {
  max-width:800px
}
.settings-form h2 {
  margin-bottom:25px
}
.faq-editor {
  padding:20px 0;
  border-bottom:1px solid var(--line)
}
.customer summary {
  font-size:13px
}
.skeleton {
  min-height:190px;
  border-radius:12px;
  background:linear-gradient(90deg,#11151e,#1a1d29,#11151e);
  background-size:200%;
  animation:pulse 1.8s infinite
}
@keyframes pulse {
  to {
    background-position:-200% 0
  }
}
dialog {
  width:min(580px,calc(100% - 32px));
  max-height:90dvh;
  border:1px solid #4c425d;
  background:#10131b;
  color:var(--text);
  border-radius:16px;
  padding:30px;
  box-shadow:0 30px 100px #0009
}
dialog::backdrop {
  background:#04060bc9;
  backdrop-filter:blur(5px)
}
.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:25px
}
.modal-head h2 {
  font-size:26px
}
.detail-intro {
  display:flex;
  align-items:center;
  gap:22px
}
.detail-intro p {
  font-size:12px
}
.detail-intro .eyebrow {
  font-size:8px
}
.detail-price {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:25px;
  font-size:12px
}
.detail-price strong {
  font-weight:500;
  color:var(--accent)
}
@media(min-width:1440px) {
  .shell {
    width:min(1280px,calc(100% - 120px))
  }
  .hero {
    gap:90px;
    min-height:580px
  }
  .hero-art {
    height:390px
  }
  .float-netflix {
    left:45px
  }
  .float-ai {
    right:33px
  }
  .floating-card {
    width:165px;
    height:195px
  }
  .popular-grid .product-card {
    padding:22px
  }
}
@media(max-width:1100px) {
  .shell {
    width:calc(100% - 48px)
  }
  .hero {
    gap:30px
  }
  .hero h1 {
    font-size:46px
  }
  .hero-art {
    height:345px
  }
  .floating-card {
    width:130px;
    height:169px
  }
  .float-netflix {
    left:20px
  }
  .float-music {
    left:calc(50% - 55px)
  }
  .float-ai {
    right:12px
  }
  .popular-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .builder {
    padding:30px;
    gap:30px;
    grid-template-columns:1fr 1.7fr
  }
  .builder-copy h2 {
    font-size:31px
  }
  .product-grid:not(.popular-grid) {
    grid-template-columns:repeat(3,1fr)
  }
  .header-inner nav {
    gap:20px
  }
  .header-actions {
    gap:14px
  }
  .auth-layout {
    padding-inline:20px;
    gap:55px
  }
}
@media(max-width:800px) {
  .header-inner nav {
    gap:17px
  }
  .header-inner nav a {
    font-size:10px
  }
  .account-link {
    font-size:10px
  }
  .brand {
    font-size:19px
  }
  .hero {
    grid-template-columns:1fr;
    gap:36px;
    padding:46px 0 40px
  }
  .hero-copy {
    max-width:580px
  }
  .hero h1 {
    font-size:52px
  }
  .hero-art {
    height:340px;
    width:100%;
    max-width:550px;
    margin:auto
  }
  .floating-card {
    width:160px;
    height:185px
  }
  .float-netflix {
    left:calc(50% - 205px);
    top:80px
  }
  .float-music {
    left:calc(50% - 65px);
    top:55px
  }
  .float-ai {
    right:calc(50% - 216px);
    top:108px
  }
  .hero-note {
    margin-top:22px
  }
  .benefit-strip {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
  }
  .builder {
    grid-template-columns:1fr;
    padding:30px;
    gap:28px
  }
  .builder-copy h2 br {
    display:none
  }
  .builder-copy p br {
    display:none
  }
  .builder-copy .subtle-label {
    display:none
  }
  .builder-copy p {
    margin-top:14px
  }
  .builder-panel {
    padding:25px
  }
  .slots .slot {
    min-height:90px
  }
  .catalog-tools {
    flex-wrap:wrap
  }
  .catalog-tools .search {
    flex-basis:100%
  }
  .catalog-tools .secondary,.catalog-tools select {
    flex:1
  }
  .faq {
    gap:30px;
    grid-template-columns:1fr;
    padding:50px 0
  }
  .faq h2 br {
    display:none
  }
  .faq .text-button {
    display:none
  }
  .steps {
    gap:25px
  }
  .steps p {
    font-size:11px
  }
  .footer-top {
    grid-template-columns:1.5fr 1fr 1fr;
    gap:25px
  }
  .footer-top>div:first-child {
    grid-column:1/-1
  }
  .checkout-grid,.account-grid {
    grid-template-columns:1fr
  }
  .auth-layout {
    grid-template-columns:1fr;
    padding:50px 0;
    gap:35px
  }
  .auth-copy h1 {
    font-size:40px
  }
  .auth-copy p {
    max-width:100%;
    margin-top:15px
  }
  .auth-copy .subtle-label {
    display:none
  }
  .auth-card {
    max-width:520px;
    width:100%;
    margin:auto
  }
  .support-box {
    flex-wrap:wrap
  }
  .support-box>div {
    flex-basis:75%
  }
  .support-box a {
    width:100%
  }
  .stats {
    gap:10px
  }
  .stats article {
    padding:17px
  }
  .stats strong {
    font-size:27px
  }
  .stats span {
    font-size:10px
  }
  .footer-bottom {
    flex-direction:column;
    gap:7px
  }
  .cart-item {
    padding:20px
  }
  .cart-item .stack-marks {
    flex-basis:100%
  }
}
@media(max-width:580px) {
  .shell {
    width:calc(100% - 36px)
  }
  header {
    height:68px
  }
  .header-inner {
    gap:12px
  }
  .header-inner nav {
    display:none
  }
  .header-inner nav.mobile-open {
    display:flex;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    background:#10131bf5;
    border-bottom:1px solid var(--line);
    padding:20px 22px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px
  }
  .header-inner nav a {
    padding:10px;
    font-size:14px;
    width:100%
  }
  .header-inner nav .current:after {
    left:0;
    bottom:20px
  }
  .mobile-toggle {
    display:flex
  }
  .header-actions {
    gap:12px
  }
  .account-link {
    font-size:10px
  }
  .account-link svg {
    display:none
  }
  .cart-icon {
    width:46px;
    height:46px;
    border-radius:12px
  }
  .cart-icon svg { width:24px; height:24px; }
  .cart-icon span {
    font-size:9px
  }
  .brand {
    font-size:18px;
    gap:8px
  }
  .brand-symbol {
    height:25px;
    width:25px;
    font-size:25px
  }
  .hero {
    padding-top:39px;
    gap:32px
  }
  .hero-label {
    font-size:7px;
    letter-spacing:.1em;
    margin-bottom:19px
  }
  .hero h1 {
    font-size:clamp(32px,9.6vw,49px);
    line-height:1.18
  }
  .hero-copy>p {
    font-size:12px;
    margin-top:20px;
    max-width:95%
  }
  .hero-actions {
    gap:20px
  }
  .hero-actions .primary {
    font-size:11px;
    padding:12px 15px
  }
  .hero-actions .text-button {
    font-size:10px;
    gap:8px
  }
  .hero-note {
    font-size:8px
  }
  .hero-art {
    height:286px
  }
  .floating-card {
    width:121px;
    height:155px;
    border-radius:12px
  }
  .float-netflix {
    left:calc(50% - 145px);
    top:73px
  }
  .float-music {
    left:calc(50% - 48px);
    top:48px
  }
  .float-ai {
    right:calc(50% - 153px);
    top:101px
  }
  .floating-card small {
    font-size:8px;
    margin-top:14px
  }
  .art-n {
    font-size:49px
  }
  .art-music {
    font-size:53px
  }
  .art-ai {
    font-size:50px
  }
  .art-chip {
    font-size:5px;
    padding:3px 6px
  }
  .art-top {
    font-size:6px;
    top:19px;
    left:18px;
    right:18px
  }
  .art-bottom {
    font-size:6px;
    left:18px;
    right:18px;
    bottom:17px
  }
  .benefit-strip {
    padding:21px 0;
    gap:15px 12px
  }
  .benefit-strip>span {
    font-size:8px;
    gap:7px
  }
  .benefit-strip svg {
    width:14px
  }
  .section-heading {
    align-items:flex-start;
    gap:12px;
    margin-bottom:22px
  }
  .section-heading h2 {
    font-size:24px
  }
  .section-heading>.muted {
    display:none
  }
  .section-heading>.text-button {
    font-size:9px;
    white-space:nowrap;
    gap:5px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:.12em;
    margin-bottom:10px
  }
  .popular {
    padding:44px 0
  }
  .product-grid,.popular-grid,.product-grid:not(.popular-grid) {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .product-card {
    padding:15px
  }
  .product-title {
    font-size:12px;
    gap:4px
  }
  .product-title svg {
    width:13px
  }
  .product-card>p {
    font-size:8px;
    min-height:24px
  }
  .product-top {
    margin-bottom:18px
  }
  .service-mark {
    height:38px;
    width:38px;
    border-radius:9px;
    font-size:20px
  }
  .product-bottom {
    margin-top:12px
  }
  .availability {
    font-size:8px;
    gap:5px
  }
  .add-service {
    width:26px;
    height:26px
  }
  .builder {
    padding:22px 16px;
    gap:24px;
    border-radius:12px
  }
  .builder-copy {
    padding:0 4px
  }
  .builder-copy h2 {
    font-size:28px
  }
  .builder-copy p {
    font-size:11px
  }
  .builder-panel {
    padding:18px 13px
  }
  .panel-heading {
    margin-bottom:17px
  }
  .panel-heading strong {
    font-size:12px
  }
  .panel-heading span {
    font-size:9px
  }
  .slots {
    gap:6px
  }
  .slot,.slots .slot {
    min-height:65px;
    gap:7px;
    border-radius:7px
  }
  .slot small {
    font-size:6px
  }
  .slot svg {
    width:18px
  }
  .slot .service-mark {
    height:27px;
    width:27px;
    font-size:16px
  }
  .slot-remove {
    width:14px;
    height:14px
  }
  .slot-remove svg {
    width:10px
  }
  .duration {
    gap:5px
  }
  .duration button {
    font-size:9px;
    padding:9px 3px;
    min-height:38px
  }
  .duration small {
    font-size:5px
  }
  .builder-total {
    margin-top:20px;
    padding-top:18px;
    gap:8px
  }
  .builder-total strong {
    font-size:27px
  }
  .builder-total strong span {
    font-size:8px
  }
  .builder-total .primary {
    font-size:9px;
    padding:10px;
    gap:7px
  }
  .builder-total .primary svg {
    width:14px
  }
  .fine-print {
    font-size:8px
  }
  .catalog-section {
    padding:49px 0 10px
  }
  .catalog-tools {
    gap:8px
  }
  .catalog-tools .secondary,.catalog-tools select {
    font-size:10px;
    padding:10px
  }
  .search input {
    font-size:10px
  }
  .category-tabs {
    flex-wrap:nowrap;
    overflow:auto;
    margin-inline:-18px;
    padding-inline:18px;
    padding-bottom:8px;
    gap:5px
  }
  .category-tabs button {
    flex-shrink:0;
    font-size:9px;
    padding:8px 10px;
    gap:6px
  }
  .category-tabs button svg {
    width:12px
  }
  .how {
    padding:45px 0
  }
  .how h2 {
    font-size:27px;
    max-width:250px
  }
  .steps {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:30px
  }
  .steps article {
    display:grid;
    grid-template-columns:38px 1fr;
    column-gap:17px
  }
  .steps article>span {
    grid-row:1/3;
    align-self:start;
    text-align:center;
    margin:0
  }
  .steps article h3 {
    font-size:15px
  }
  .steps article p {
    font-size:11px;
    max-width:250px
  }
  .faq {
    padding:45px 0;
    gap:20px
  }
  .faq h2 {
    font-size:27px
  }
  summary {
    font-size:11px;
    padding:17px 0
  }
  details p {
    font-size:11px
  }
  footer {
    padding-top:30px!important
  }
  .footer-top {
    grid-template-columns:1fr 1fr 1fr;
    gap:25px 12px;
    padding-bottom:30px
  }
  .footer-top p {
    font-size:10px
  }
  .footer-top>div>strong {
    font-size:10px
  }
  .footer-top>div>a:not(.brand) {
    font-size:9px
  }
  .footer-bottom {
    font-size:8px;
    padding:18px 0
  }
  .page-section {
    padding:38px 0 50px
  }
  .page-section>h1 {
    font-size:35px;
    margin-bottom:25px
  }
  .page-intro {
    padding:38px 0 30px
  }
  .page-intro h1 {
    font-size:35px
  }
  .page-intro p {
    font-size:12px
  }
  .summary,.card-test,.auth-card,.order-card,.editor {
    padding:21px
  }
  .two-col {
    gap:12px
  }
  .four-col {
    grid-template-columns:repeat(2,1fr)
  }
  .stats {
    grid-template-columns:1fr;
    margin-bottom:25px
  }
  .stats article {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center
  }
  .stats strong {
    grid-column:2;
    grid-row:1/3
  }
  .stats small {
    grid-column:1
  }
  .stats article>svg {
    display:none
  }
  .account-grid {
    gap:22px
  }
  .auth-copy h1 {
    font-size:35px
  }
  .auth-copy p {
    font-size:12px
  }
  .auth-card h2 {
    font-size:25px
  }
  .auth-layout {
    padding-top:35px
  }
  .section-heading h1 {
    font-size:34px
  }
  .section-heading .secondary {
    font-size:9px;
    padding:9px
  }
  .admin-tabs {
    flex-wrap:nowrap;
    overflow:auto;
    padding-bottom:12px;
    gap:5px
  }
  .admin-tabs button {
    white-space:nowrap;
    font-size:10px
  }
  .admin .section-heading>.subtle-label {
    display:none
  }
  .support-box {
    padding:23px;
    gap:18px
  }
  .support-box h2 {
    font-size:21px
  }
  .notice {
    font-size:11px
  }
  .payment-option {
    padding:12px;
    font-size:11px
  }
  .payment-option small {
    font-size:8px
  }
  .test-banner p {
    font-size:10px
  }
  .test-banner strong {
    font-size:12px
  }
  .card-test>small {
    font-size:9px
  }
  .cart-item {
    gap:13px
  }
  .cart-item>strong {
    font-size:13px
  }
  .cart-item h3 {
    font-size:13px
  }
  .cart-item>div:nth-child(2) {
    flex-basis:60%
  }
  .table-scroll {
    margin:20px 0
  }
  dialog {
    padding:22px
  }
  .modal-head h2 {
    font-size:24px
  }
  .detail-intro {
    gap:16px
  }
  .detail-intro p {
    font-size:11px
  }
  .service-mark.large {
    width:60px;
    height:60px;
    font-size:32px
  }
  .detail-price {
    font-size:10px
  }
  .toast {
    bottom:16px;
    font-size:11px;
    padding:12px
  }
  .price-table {
    padding:35px 0
  }
  .legal p {
    font-size:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    transform:none!important
  }
}
.checkout-grid>*,.account-grid>*,.two-col>*,.four-col>*,.auth-layout>* {
  min-width:0
}
label>input,label>textarea,label>select {
  max-width:100%;
  width:100%
}
.checkbox>input {
  width:16px
}
.catalog-heading {
  font-size:34px
}
.hero-brand-logo {
  width:64px;
  height:64px;
  object-fit:contain
}
.service-mark:has(img) {
  background:#fff;
  border-color:#ffffff20;
  padding:3px
}
.service-mark img {
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:5px
}
.service-mark:has(img[src$=".svg"]) {
  background:color-mix(in srgb,var(--service),transparent 90%);
  padding:7px
}
.floating-card:has(img[src*="chatgpt"]) {
  background:linear-gradient(145deg,#30383a,#21282a)
}
@media(max-width:580px) {
  .hero-brand-logo {
    width:47px;
    height:47px
  }
}
.service-mark:has(img[src$=".svg"]) {
  background:#fff;
  border-color:#ffffff20
}
.service-mark:has(img[src*="apple-tv"]) {
  background:#141414
}
.hero-brand-logo {
  border-radius:0
}
[hidden] {
  display: none !important;
}
.builder-total strong .price-value {
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}
#tarjeta-form .payment-option {
  margin-bottom: 20px;
}
[data-admin-section] {
  scroll-margin-top: 100px;
}

/* El catálogo completo tiene más presencia que la fila compacta de destacados. */
.popular-grid .product-card {
  padding: 20px;
  min-height: 265px;
}
.popular-grid .service-mark {
  width: 60px;
  height: 60px;
  border-radius: 12px;
}
.popular-grid .product-title {
  font-size: 16px;
  line-height: 1.35;
  min-height: 44px;
}
.popular-grid .product-card > p {
  font-size: 11px;
  min-height: 34px;
  margin-top: 8px;
}
.popular-grid .availability {
  font-size: 10px;
}
.popular-grid .add-service {
  width: 32px;
  height: 32px;
}
#catalog-products .product-card {
  padding: 24px;
  min-height: 250px;
}
#catalog-products .service-mark {
  width: 64px;
  height: 64px;
  border-radius: 13px;
}
#catalog-products .product-title {
  font-size: 18px;
  line-height: 1.35;
}
#catalog-products .product-card > p {
  font-size: 12px;
  min-height: 36px;
  margin-top: 9px;
}
#catalog-products .availability {
  font-size: 11px;
}
#catalog-products .add-service {
  width: 36px;
  height: 36px;
}
@media (max-width: 580px) {
  .popular-grid .product-card {
    padding: 17px;
    min-height: 240px;
  }
  .popular-grid .service-mark {
    width: 52px;
    height: 52px;
  }
  .popular-grid .product-title {
    font-size: 15px;
  }
  #catalog-products .product-card {
    padding: 17px;
    min-height: 230px;
  }
  #catalog-products .service-mark {
    width: 52px;
    height: 52px;
    border-radius: 11px;
  }
  #catalog-products .product-title {
    font-size: 15px;
  }
  #catalog-products .product-card > p,
  #catalog-products .availability {
    font-size: 10px;
  }
}

/* Presentación del checkout de demostración. */
.demo-ribbon { padding:10px 20px; text-align:center; color:#c6c3ff; background:#8b8ef312; border-bottom:1px solid #8b8ef326; font-size:12px; letter-spacing:.03em; }
.demo-confirmacion { max-width:720px; margin:28px auto; padding:48px 30px; text-align:center; border:1px solid #65dd9840; border-radius:24px; background:radial-gradient(ellipse at top,#65dd9810,transparent 70%),#10131c; animation:demo-appear .6s ease-out both; }
.demo-confirmacion h2 { margin:22px 0 16px; font-size:clamp(28px,5vw,42px); }
.demo-confirmacion p { line-height:1.7; }
.demo-check { display:grid; place-items:center; width:84px; height:84px; border-radius:50%; margin:0 auto 28px; color:#ff5c5c; background:#ff5c5c14; border:1px solid #ff5c5c50; box-shadow:0 0 45px #ff5c5c15; animation:demo-appear .8s cubic-bezier(.2,.8,.2,1) both; }.demo-resumen { margin:24px 0; padding:20px; border:1px solid #ffffff10; border-radius:14px; }
.demo-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; }
#tarjeta-form[data-state="validating"] button { opacity:.7; }
#tarjeta-form[data-state="validating"] button:after { content:''; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:demo-spin 1s linear infinite; }
@keyframes demo-appear { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes demo-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .demo-confirmacion,.demo-check,#tarjeta-form[data-state="validating"] button:after { animation:none; } }

.transfer-card { margin-top:24px; border:1px solid #8b8ef350; background:radial-gradient(ellipse at top right,#8b8ef313,transparent 65%),#10131c; }
.transfer-tag { margin-left:auto; padding:5px 9px; border-radius:6px; background:#8b8ef31a; color:#c6c3ff; font-size:10px; font-weight:700; letter-spacing:.08em; }
.transfer-details { margin:24px 0; }
.transfer-details > div { display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid #ffffff0e; }
.transfer-details dt { color:#9298a7; font-size:12px; }
.transfer-details dd { margin:0; text-align:right; font-size:13px; font-weight:600; }
.transfer-clabe { font-variant-numeric:tabular-nums; }
.transfer-reference { padding:24px 16px; margin:22px 0; text-align:center; border:1px dashed #8b8ef359; border-radius:14px; background:#8b8ef309; }
.transfer-reference > span { color:#a6aabd; font-size:12px; }
.transfer-reference output { display:block; margin:12px 0 18px; color:#d6ceff; font-size:clamp(28px,6vw,40px); font-weight:700; letter-spacing:.16em; font-variant-numeric:tabular-nums; }
.transfer-tools { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.transfer-card > small { display:block; margin-top:14px; line-height:1.6; }
@media(max-width:580px) { .transfer-details > div { flex-direction:column; gap:8px; } .transfer-details dd { text-align:left; } }


/* Tamaños legibles en la ficha del servicio. */
#producto-dialogo {
  width:min(640px,calc(100% - 32px));
}
#producto-dialogo .modal-head h2 {
  font-size:30px;
}
#producto-dialogo .detail-intro p {
  font-size:15px;
  line-height:1.65;
}
#producto-dialogo .detail-intro .eyebrow {
  font-size:11px;
}
#producto-dialogo .notice {
  font-size:14px;
  line-height:1.6;
}
#producto-dialogo .builder-label {
  font-size:13px;
  margin-top:24px;
}
#producto-dialogo .duration button {
  font-size:14px;
  min-height:52px;
}
#producto-dialogo .duration small {
  font-size:10px;
}
#producto-dialogo .detail-price {
  font-size:16px;
}
#producto-dialogo .detail-price strong {
  font-size:24px;
}
#producto-dialogo .fine-print {
  font-size:13px;
  line-height:1.65;
  margin:20px 0;
}
#producto-dialogo > .primary,
#producto-dialogo > .secondary {
  font-size:14px;
  min-height:48px;
}
@media(max-width:580px) {
  #producto-dialogo .modal-head h2 { font-size:27px; }
  #producto-dialogo .detail-intro p { font-size:14px; }
  #producto-dialogo .duration button { font-size:13px; }
  #producto-dialogo .fine-print { font-size:12px; }
}


/* Alineación del resumen de checkout. */
.checkout-summary {
  display:grid;
  gap:22px;
  padding:30px;
}
.checkout-summary h2 {
  margin:0;
  font-size:26px;
  line-height:1.25;
}
.checkout-summary .order-summary {
  padding:0 0 20px;
  margin-bottom:18px;
}
.checkout-summary .order-summary:last-child {
  margin-bottom:0;
}
.checkout-summary .order-summary strong {
  display:block;
  font-size:15px;
  line-height:1.6;
  overflow-wrap:anywhere;
}
.checkout-summary .order-summary p {
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
}
.checkout-summary #pedido-form {
  display:grid;
  gap:12px;
}
.checkout-summary label {
  margin:0;
  gap:10px;
  font-size:14px;
  line-height:1.5;
}
.checkout-summary #correo {
  min-width:0;
  min-height:48px;
  padding:12px 14px;
  font-size:14px;
}
.checkout-summary .fine-print {
  margin:0;
  font-size:12px;
  line-height:1.7;
}
.checkout-summary #correo-ayuda {
  color:var(--muted);
}
.checkout-summary .checkbox {
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:start;
  gap:10px;
  margin-top:4px;
  font-size:13px;
}
.checkout-summary .checkbox input {
  width:18px;
  height:18px;
  min-height:18px;
  padding:0;
  margin:1px 0 0;
}
@media(max-width:580px) {
  .checkout-summary { padding:22px; gap:20px; }
  .checkout-summary h2 { font-size:24px; }
}


/* Tamaños legibles de tarjeta y transferencia, solo en checkout. */
#checkout-flujo .card-test {
  padding:30px;
}
#checkout-flujo .card-test .payment-option {
  padding:18px;
  min-height:68px;
  font-size:16px;
  line-height:1.45;
}
#checkout-flujo .card-test .payment-option > svg {
  width:24px;
  height:24px;
  flex-shrink:0;
}
#checkout-flujo .card-test .payment-option small {
  margin-top:4px;
  font-size:11px;
}
#checkout-flujo .test-banner strong {
  font-size:15px;
}
#checkout-flujo .test-banner p {
  font-size:13px;
  line-height:1.6;
}
#checkout-flujo .card-test label {
  font-size:14px;
  line-height:1.5;
  gap:10px;
  margin-bottom:20px;
}
#checkout-flujo .card-test input {
  min-width:0;
  min-height:50px;
  padding:13px 14px;
  font-size:16px;
}
#checkout-flujo .card-test .primary,
#checkout-flujo .card-test .secondary {
  min-height:50px;
  font-size:15px;
}
#checkout-flujo .card-test .fine-print,
#checkout-flujo .card-test > small {
  font-size:13px;
  line-height:1.65;
}
#checkout-flujo .transfer-details > div {
  padding:17px 0;
}
#checkout-flujo .transfer-details dt {
  font-size:14px;
  line-height:1.5;
}
#checkout-flujo .transfer-details dd {
  font-size:16px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
#checkout-flujo .transfer-reference {
  padding:28px 20px;
}
#checkout-flujo .transfer-reference > span {
  font-size:14px;
}
#checkout-flujo .transfer-reference output {
  font-size:clamp(32px,6vw,46px);
}
#checkout-flujo .transfer-tools .text-button {
  font-size:14px;
}
#checkout-flujo .transfer-tag {
  font-size:11px;
}
@media(max-width:580px) {
  #checkout-flujo .card-test { padding:22px; }
  #checkout-flujo .card-test .payment-option { padding:14px; font-size:15px; }
  #checkout-flujo .transfer-details dd { font-size:15px; }
  #checkout-flujo .transfer-reference { padding:24px 14px; }
}


/* Confirmación visual al añadir una selección al carrito. */
.cart-icon.cart-added {
  border-color:var(--accent);
}
.cart-icon.cart-added svg {
  animation:bag-bump .5s ease;
}
.cart-icon.cart-added::after {
  content:'✓ Agregado';
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  padding:9px 13px;
  border:1px solid #a995ff66;
  border-radius:9px;
  background:#211c32;
  color:#e1d8ff;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 8px 24px #0004;
  animation:bag-added 1.6s ease both;
}
@keyframes bag-bump {
  0%,100% { transform:translateY(0) scale(1); }
  35% { transform:translateY(-4px) scale(1.15); }
  65% { transform:translateY(1px) scale(.95); }
}
@keyframes bag-added {
  0%,100% { opacity:0; transform:translateY(-4px); }
  15%,80% { opacity:1; transform:translateY(0); }
}


/* Entrada suave de las opciones del servicio. */
#producto-dialogo[open] {
  animation:product-reveal .32s cubic-bezier(.2,.75,.25,1) both;
  transform-origin:center;
}
#producto-dialogo[open]::backdrop {
  animation:product-backdrop .25s ease-out both;
}
@keyframes product-reveal {
  from { opacity:0; transform:translateY(16px) scale(.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes product-backdrop {
  from { background-color:#04060b00; backdrop-filter:blur(0); }
  to { background-color:#04060bc9; backdrop-filter:blur(5px); }
}
@media(prefers-reduced-motion:reduce) {
  #producto-dialogo[open],
  #producto-dialogo[open]::backdrop { animation:none; }
}

/* Ruedita de carga */
.pago-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(20, 16, 40, 0.2);
  border-top-color: #211835;
  border-radius: 50%;
  animation: pago-girar 0.7s linear infinite;
}

@keyframes pago-girar {
  to { transform: rotate(360deg); }
}

/* Mantener el color original mientras carga */
.primary.pago-cargando,
.primary.pago-cargando:disabled {
  background: #a994f7;
  border-color: #a994f7;
  opacity: 1;
  cursor: wait;
}

/* Ocultar otras animaciones mientras procesa */
.pago-cargando svg,
.pago-cargando .spinner:not(.pago-spinner),
.pago-cargando .loading-spinner {
  display: none !important;
}

/* Centrar una sola ruedita */
.primary.pago-cargando,
.primary.pago-cargando:disabled {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #a994f7 !important;
  border-color: #a994f7 !important;
  opacity: 1 !important;
  cursor: wait;
}

/* Evitar animaciones adicionales del formulario de tarjeta */
#tarjeta-form .pago-cargando::before,
#tarjeta-form .pago-cargando::after {
  content: none !important;
  display: none !important;
}