.studio-page {
  --paper: #fff3dd;
  --cream: #fffbf2;
  --ink: #1c2034;
  --line: #d9d1c2;
  --muted: #626372;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.studio-page .wrap { width: min(1280px, calc(100% - 96px)); }
.studio-page .prototype-bar { background: #ebe3d4; color: #555665; font-size: 9px; padding: 6px 12px; letter-spacing: 1px; }
.studio-page .site-header { height: 92px; border-bottom: 1px solid var(--line); }
.studio-page .wordmark { display: block; width: 212px; flex-shrink: 0; transform: none; }
.studio-page .wordmark img { width: 100%; height: auto; }
.studio-page .nav { font-size: 12px; gap: 30px; }
.studio-page .button { min-height: 51px; border-radius: 4px; padding: 14px 23px; font-size: 13px; gap: 25px; box-shadow: none; }
.studio-page .button:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--ink); }
.studio-page .button.coral { border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.studio-page .button.coral:hover { box-shadow: 5px 5px 0 var(--ink); }
.cover-copy { min-width: 0; }
.product-category { font-size: 12px; letter-spacing: 1.7px; text-transform: uppercase; font-weight: 800; margin-bottom: 22px; }
.cover h1 { font-family: var(--display); font-size: clamp(46px, 5.6vw, 80px); line-height: .96; letter-spacing: .5px; margin: 0 0 30px; }
.cover h1 > span { display: block; }
.cover h1 .cover-accent { color: var(--blue); }
.cover-action { display: flex; align-items: center; gap: 24px; }
.cover-action p { font-size: 11px; color: var(--muted); max-width: 142px; margin: 0; line-height: 1.65; }
/* Full-bleed layered hero: the whole top section is the scene.
   Both layers share one box (same size, position, object-fit and crop bleed);
   only their parallax translateY differs. Shifts come from src/hero.js. */
.cover { position: relative; isolation: isolate; overflow: hidden; padding-block: 64px 112px; }
.cover-inner { position: relative; z-index: 3; }
.cover-copy { max-width: 560px; }
.hero-scene { position: absolute; inset: 0; margin: 0; overflow: hidden; z-index: 0; }
.hero-scene img { position: absolute; top: -20%; left: auto; right: -6%; width: 74%; height: 114%; object-fit: cover; object-position: center; will-change: transform; }
.hero-bg { transform: translateY(var(--hero-bg-shift, 0px)); opacity: .96; -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0,0,0,.3) 22%, rgba(0,0,0,.75) 44%, #000 62%); mask-image: linear-gradient(90deg, transparent 2%, rgba(0,0,0,.3) 22%, rgba(0,0,0,.75) 44%, #000 62%); }
.hero-fg { z-index: 2; transform: translateY(var(--hero-fg-shift, 0px)); filter: drop-shadow(0 22px 30px #1c20343d); -webkit-mask-image: linear-gradient(to bottom, #000 90%, rgba(0,0,0,.55) 100%); mask-image: linear-gradient(to bottom, #000 90%, rgba(0,0,0,.55) 100%); }
.hero-scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(255,243,221,.82) 76%, rgba(255,243,221,.87)); }
.hero-veil { display: none; }
.hero-scene figcaption { position: absolute; z-index: 3; right: 16px; bottom: 10px; font-family: 'Courier New', monospace; font-size: 9px; letter-spacing: 1px; color: var(--muted); text-shadow: 0 1px 3px #fffdf8; }
.cover + .purchase-section { border-top-color: transparent; }
.purchase-section { position: relative; background: var(--cream); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding-block: 0 52px; scroll-margin-top: 0; }
/* Same-plane continuation across the seam: the echo layers mirror the hero
   geometry (74% width, right -6%) and consume the SAME --hero-*-shift vars
   set by src/hero.js on :root, so background stays slow and foreground stays
   fast while crossing into the configurator. Foreground enters the seam
   stronger and fades first; background lingers fainter, then dissolves. */
.purchase-echo { position: absolute; top: -150px; left: 0; right: 0; height: 620px; z-index: 0; pointer-events: none; overflow: clip; }
.echo-bg, .echo-fg { position: absolute; top: 0; left: auto; right: -6%; width: 74%; height: 100%; background-size: cover; background-position: center; will-change: transform; }
.echo-bg { opacity: .16; transform: translateY(var(--hero-bg-shift, 0px)); background-image: url('../../images/Imagen%20de%20ChatGPT%205%20oct%202026,%2019_14_47-1.png'); -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.85) 15%, rgba(0,0,0,.85) 45%, transparent 82%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.85) 15%, rgba(0,0,0,.85) 45%, transparent 82%); }
.echo-fg { opacity: .26; transform: translateY(var(--hero-fg-shift, 0px)); background-image: url('../../images/Imagen%20de%20ChatGPT%205%20oct%202026,%2019_14_48-2.png'); -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.9) 12%, rgba(0,0,0,.55) 32%, transparent 62%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.9) 12%, rgba(0,0,0,.55) 32%, transparent 62%); }
.purchase-section > .wrap { position: relative; z-index: 1; }
.section-kicker { color: var(--muted); font-family: 'Courier New', monospace; font-size: 9px; letter-spacing: 1.3px; font-weight: 400; margin: 0 0 12px; }
.studio-page .studio-title { padding: 29px 0 28px; align-items: end; }
.studio-page .studio-title h2 { font-family: Arial, Helvetica, sans-serif; font-weight: 800; font-size: 35px; line-height: 1.08; letter-spacing: -1.3px; margin: 0; }
.studio-page .studio-title > p { font-size: 12px; line-height: 1.65; margin-bottom: 0; max-width: 260px; }
.studio-page .studio-layout { grid-template-columns: 1fr 1.04fr; gap: 40px; }
.studio-page .preview-panel { border: 1px solid #d9dad6; background: #f0f0ed; border-radius: 8px; top: 18px; }
.studio-page .preview-top { padding: 18px 20px; font-size: 9px; letter-spacing: 1.2px; border-bottom: 1px solid #e0e1dd; gap: 10px; background: #f0f0ed; color: var(--ink); }
.studio-page .preview-top > span:last-child { text-align: right; }
.studio-page .preview-stage { margin: 18px 20px 0; background: #e5e6e3; }
.studio-page .preview-caption { padding: 18px 20px 0; }
.studio-page .preview-disclaimer { padding: 10px 20px 20px; font-size: 10px; }
.studio-page .step legend, .studio-page .step-title { font-size: 17px; letter-spacing: -.3px; }
.studio-page .step-number { border: 0; border-radius: 0; color: var(--blue); background: #e9edfc; width: 25px; height: 25px; font-family: 'Courier New', monospace; font-size: 11px; }
.studio-page .type-options { gap: 11px; }
.studio-page .type-card .card-body { border-radius: 6px; background: #fffdf8; box-shadow: 0 0 0 1px #d8d1c6; }
.studio-page .type-card input:checked + .card-body { background: #edf0ff; box-shadow: 0 0 0 1px var(--blue); }
/* Product name as the card's dark foot: the same near-black ink used by
   buttons/estimate, warm paper text, flex-centered so long names wrap to a
   second line instead of overflowing. The blue selection border lives on
   .card-body itself; a subtle inset blue line on the strip reinforces the
   selected state without competing with it. */
.studio-page .type-card .card-name { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 800; line-height: 1.25; letter-spacing: .3px; padding: 12px 10px; min-height: 50px; }
.studio-page .type-card input:checked + .card-body .card-name { box-shadow: inset 0 3px 0 var(--blue); }
.studio-page .type-card .sample { height: 100px; padding: 0; overflow: hidden; position: relative; display: grid; place-items: center; }
.studio-page .type-card .sample.sample-photo { width: 100%; height: auto; aspect-ratio: 1; padding: 0; background: transparent; }
.studio-page .type-card .sample-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: none; }
.studio-page .choice span { background: #fffdf8; border-color: #d8d1c6; border-radius: 4px; min-height: 44px; }
.studio-page .choice input:checked + span { background: var(--ink); border-color: var(--ink); }
.studio-page .upload-zone { border-radius: 6px; background: #f6f1e6; border-color: #a8a291; }
.studio-page .estimate { border-radius: 6px; padding: 24px; }
.studio-page .form-field input, .studio-page .form-field select { border-color: #d8d1c6; }
.studio-page .contact-section h3 { font-size: 20px; letter-spacing: -.5px; }
.studio-page .review-panel h3 { font-size: 23px; }
.studio-page .process { padding-block: 58px 50px; background: var(--ink); color: var(--paper); }
.studio-page .process .section-kicker { color: #c6cadf; }
.studio-page .process h2, .studio-page .faq h2 { font-family: Arial, Helvetica, sans-serif; text-transform: none; font-size: 33px; font-weight: 800; letter-spacing: -1px; }
.studio-page .process h2 { color: #fffdf8; }
.studio-page .process-grid { gap: 22px; margin-top: 29px; grid-template-columns: repeat(3, 1fr); }
.studio-page .process article { background: #272b45; border: 1px solid #3b4060; border-radius: 10px; padding: 25px 22px 27px; min-height: 160px; position: relative; }
.studio-page .process article::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 17px; height: 3px; background: linear-gradient(90deg,var(--coral),transparent); }
.studio-page .process-number { font-family: 'Courier New', monospace; font-size: 21px; color: var(--coral); display: block; margin-bottom: 18px; font-weight: 700; }
.studio-page .process h3 { font-size: 18px; letter-spacing: -.4px; color: #fffdf8; }
.studio-page .process p { color: #c9ccdd; max-width: 350px; }
.studio-page .process .fine { max-width: none; margin-bottom: 0; color: #9ea3bd; font-size: 10px; }
.studio-page .faq { padding-block: 0 0; border-top: 0; gap: 60px; width: 100%; margin-top: 0; background: linear-gradient(135deg,var(--blue),#1c2034 72%); color: var(--paper); padding: 44px min(48px, 5vw) 50px; }
.studio-page .faq .section-kicker { color: #c6d0ff; }
.studio-page .faq h2 { color: #fffdf8; }
.studio-page .faq details { border-bottom: 1px solid #ffffff2b; padding: 19px 4px; color: #eef0fb; }
.studio-page .faq summary { font-weight: 700; }
.studio-page .faq details p { color: #c9ccdd; max-width: 540px; }
.studio-page .footer { padding-block: 26px 30px; }
.studio-page .footer .wordmark { width: 164px; }
.studio-page .footer p { font-size: 10px; }
.standalone-configurator .purchase-section { border-top: 0; padding-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-fg, .echo-bg, .echo-fg { transform: none; }
}
@media (max-width: 1050px) {
  .studio-page .wrap { width: calc(100% - 48px); }
  .cover { padding-block: 48px 104px; }
  .cover-copy { max-width: 540px; }
  .cover h1 { font-size: 54px; letter-spacing: .3px; }
  .cover-action { gap: 17px; }
  .studio-page .studio-layout { gap: 25px; }
  .studio-page .type-card .sample { height: 90px; }
  .studio-page .process-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 700px) {
  .studio-page .wrap { width: calc(100% - 36px); }
  .studio-page .prototype-bar { font-size: 8px; letter-spacing: .4px; }
  .studio-page .site-header { height: 71px; }
  .studio-page .wordmark { width: 184px; }
  .studio-page .menu-toggle { font-size: 11px; padding: 9px 10px; }
  .studio-page .nav { top: 70px; background: var(--cream); gap: 18px; }
  .product-category { margin-bottom: 16px; font-size: 11px; }
  .cover h1 { font-size: clamp(38px, 10.8vw, 58px); letter-spacing: .2px; line-height: .97; margin-bottom: 24px; }
  .cover-action { gap: 15px; }
  .cover-action .button { padding: 13px 17px; font-size: 12px; gap: 19px; white-space: nowrap; }
  .cover-action p { font-size: 10px; max-width: 110px; }
  .cover { padding-block: 18px 44px; }
  .cover-copy { max-width: none; }
  .hero-scene { position: relative; inset: auto; width: 100%; height: 250px; margin: 2px 0 24px; overflow: visible; border-radius: 0; }
  .hero-scene img { top: 0; right: auto; object-position: center; }
  /* The RGBA plate is truncated at its right border in the source itself, so
     the foreground must reach the SCREEN edge — contain is width-driven at
     phone widths, so the image still spans edge to edge while its height
     (≈211 px at 375) centers inside the taller block, leaving air below the
     wrist instead of biting it. The right fade keeps dissolving whatever
     remains of the canvas border at any viewport width. */
  .hero-scene .hero-bg { left: 0; width: 100%; height: var(--mobile-cover-height, 540px); object-fit: cover; opacity: .68; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.32) 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.32) 82%, transparent 100%); }
  .hero-scene .hero-fg { left: 0; width: 100%; height: 250px; object-fit: contain; opacity: var(--mobile-sticker-opacity, 1); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 84%, transparent 99%); mask-image: linear-gradient(90deg, #000 0%, #000 84%, transparent 99%); }
  /* Text protection: a feathered progressive veil spanning the full viewport
     width (no side edges → no rectangular block), strongest behind the
     headline and dissolving to nothing at both ends; the background keeps
     showing through it behind the copy. */
  .cover-inner { padding-block: 10px 12px; }
  .cover-inner::before { content: ''; position: absolute; inset: -14px -18px -28px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(255,243,221,0) 0%, rgba(255,243,221,.5) 16%, rgba(255,243,221,.6) 55%, rgba(255,243,221,.34) 80%, rgba(255,243,221,0) 100%); }
  .hero-scene::after { display: none; }
  .hero-veil { display: none; }
  .purchase-echo { top: -90px; height: 420px; }
  .echo-bg, .echo-fg { width: 100%; right: 0; }
  .echo-bg { opacity: .1; }
  .echo-fg { opacity: .12; }
  .hero-scene figcaption { font-size: 7px; right: 10px; bottom: 7px; }
  .purchase-section { padding-bottom: 30px; }
  .studio-page .studio-title { padding: 24px 0 22px; }
  .studio-page .studio-title h2 { font-size: 28px; letter-spacing: -1px; }
  .section-kicker { font-size: 8px; letter-spacing: .9px; margin-bottom: 9px; }
  .studio-page .studio-layout { display: flex; gap: 23px; }
  .studio-page .preview-panel { position: relative; top: auto; }
  .studio-page .preview-top { padding: 13px 14px; font-size: 8px; }
  .studio-page .preview-stage { margin: 13px 20px 0; aspect-ratio: 1.6; max-height: 265px; }
  .studio-page .preview-caption { padding: 13px 14px 0; font-size: 10px; }
  .studio-page .preview-caption strong { font-size: 12px; }
  .studio-page .preview-disclaimer { padding: 8px 14px 16px; font-size: 9px; }
  .studio-page .type-options { gap: 9px; }
  .studio-page .type-card .sample { height: 83px; }
  .studio-page .type-card .card-name { font-size: 11px; letter-spacing: .2px; padding: 10px 7px; min-height: 48px; }
  .studio-page .process { padding-block: 36px 32px; }
  .studio-page .process-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 22px; }
  .studio-page .process article { min-height: 0; padding: 19px 18px 24px; }
  .studio-page .process article::after { left: 18px; right: 18px; bottom: 13px; height: 2px; }
  .studio-page .process-number { font-size: 16px; margin-bottom: 10px; }
  .studio-page .process h3 { font-size: 17px; }
  .studio-page .process h2, .studio-page .faq h2 { font-size: 28px; }
  .studio-page .faq { padding: 30px 20px 34px; display: block; }
  .studio-page .faq h2 { margin-bottom: 20px; }
  .studio-page .footer { gap: 15px; }
  .standalone-configurator .purchase-section { padding-top: 0; }
}