/* zvrastudio. — identidad del estudio y trama decorativa. */
.studio-page { --violet: #823aff; }
.studio-brand { flex-direction: column; align-items: flex-start; gap: 3px; width: 230px; }
.studio-wordmark { display: block; position: relative; width: 100%; height: 41px; }
.studio-wordmark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.studio-wordmark .brand-light-ink { display: block; mix-blend-mode: normal; }
.studio-wordmark .brand-dark-ink { display: none; mix-blend-mode: multiply; }
.studio-brand small { margin: 0; font-size: 9px; letter-spacing: .045em; color: #929099; }
.brand-on-light .brand-light-ink { display: none; }
.brand-on-light .brand-dark-ink { display: block; }
.brand-on-light small { color: #5c5862; }
.studio-page .site-header { background: rgb(9 10 12 / 90%); backdrop-filter: blur(16px) grayscale(1); isolation: isolate; }
.site-header .studio-brand, .site-header .studio-wordmark { background: transparent; }
.studio-page .desktop-nav { gap: 8px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.studio-page .desktop-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 11px 17px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 650; letter-spacing: -.015em; color: #b1abbc; transition: background .22s ease, color .22s ease, border-color .22s ease; }
.studio-page .desktop-nav a:hover, .studio-page .desktop-nav a:focus-visible { color: #fff; background: #823aff16; border-color: #a46ae637; }
.studio-page .desktop-nav a[aria-current] { color: #fff; border-color: transparent; background: transparent; box-shadow: none; }
.studio-page .mobile-nav a[aria-current] { color: #f5ecff; background: #823aff1c; box-shadow: inset 3px 0 #9c62f0; padding-left: 17px; }
@media (min-width: 901px) and (max-width: 1150px) {
  .studio-page .site-header { gap: 16px; }
  .studio-page .site-header .studio-brand { width: 200px; }
  .studio-page .desktop-nav a { padding: 10px 12px; font-size: 12px; }
}
.studio-page .site-footer { background: #09090c; }
.site-footer .studio-brand { width: 205px; }
.site-footer .studio-wordmark { height: 37px; }
.site-footer .studio-brand small { font-size: 8px; margin-left: 0; }

/* La imagen original se usa como máscara: sus blancos toman el tono grafito
   o violeta; sus negros dejan pasar el fondo oscuro de cada sección. */
.zebra-texture { position: absolute; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; mask-image: radial-gradient(ellipse closest-side, #000 12%, #000b 48%, transparent 100%); }
.zebra-texture::before { content: ""; position: absolute; inset: 0; background: var(--zebra-ink, #56515d); opacity: var(--zebra-opacity, .18); mask-image: url('./assets/zebra-trama.png'); mask-mode: luminance; mask-size: cover; mask-position: center; mask-repeat: no-repeat; }
.zebra-graphite { --zebra-ink: #56515d; --zebra-opacity: .18; }
.zebra-violet { --zebra-ink: #823aff; --zebra-opacity: .17; }
.rentable-scene .zebra-texture { inset: 0 5% 8% 0; --zebra-ink: #726b7c; --zebra-opacity: .23; }
.future-scene .zebra-texture { inset: 0 0 0 15%; }
.custom-scene .zebra-texture { inset: 0 0 0 28%; }
.studio-page .custom-grid { opacity: .10; }
.studio-page .process-section { position: relative; isolation: isolate; min-height: 650px; padding-top: 120px; padding-bottom: 120px; align-items: center; gap: 7%; }
.studio-page .process-section > .zebra-texture { inset: 0 32% 0 0; z-index: -1; --zebra-ink: #73657f; --zebra-opacity: .27; }
.studio-page .process-section .section-intro h2 { font-size: clamp(44px, 4.8vw, 74px); line-height: 1.04; letter-spacing: -.055em; margin-bottom: 28px; }
.studio-page .process-section .section-intro > p:last-child { max-width: 420px; font-size: 16px; color: #b4afbe; }
.studio-page .process-section .eyebrow { color: #b49acd; }
.studio-page .process-list { display: grid; gap: 15px; }
.studio-page .process-list li, .studio-page .process-list li:first-child { gap: 23px; padding: 25px; border: 1px solid #ffffff12; border-radius: 12px; background: #111116d9; }
.studio-page .process-list li > span { font-size: 22px; font-weight: 750; line-height: 1.15; letter-spacing: -.04em; color: #a06af2; padding-top: 2px; }
.studio-page .process-list h3 { font-size: 22px; margin-bottom: 10px; }
.studio-page .process-list p { font-size: 14px; line-height: 1.75; max-width: 420px; color: #a9a5b1; }
.studio-page .contact-banner { isolation: isolate; overflow: hidden; background: #101014; }
.studio-page .contact-banner > .zebra-texture { z-index: -2; --zebra-opacity: .20; }
.studio-page .contact-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #10101433, #101014f5 30%, #101014f5 70%, #10101433); }
.studio-page .contact-banner .button-light { background: #f4f1f8; box-shadow: 0 5px 30px #823aff12; }
.studio-page .status-dot.violet { background: #823aff; box-shadow: 0 0 14px #823aff40; }
.studio-page .project-state { border-color: #823aff55; background: #823aff12; }
.studio-page .contact-dialog { border-color: #823aff40; }
.studio-page .contact-dialog .eyebrow { color: #b394e0; }
.studio-credit { display: flex; flex-direction: column; gap: 5px; }
.studio-credit > small { color: #7c8088; font-size: 8px; letter-spacing: .04em; margin-left: 9px; }
.studio-credit .studio-brand { width: 150px; }
.studio-credit .studio-wordmark { height: 28px; }

/* La ficha del producto continúa la identidad visual del estudio. */
.detail-page { --bg: #090a0c; --violet: #823aff; background: #090a0c; }
.detail-page .site-header { background: rgb(9 10 12 / 90%); backdrop-filter: blur(16px) grayscale(1); isolation: isolate; }
.detail-page .product-brand > a:first-child { border: 0; padding: 0; }
.detail-page .product-brand .studio-brand { width: 205px; }
.detail-page .product-brand .studio-wordmark { height: 38px; }
.detail-page .product-brand > .rentable-logo { border-left: 1px solid #ffffff20; padding-left: 23px; }
.detail-page .site-header .header-contact, .detail-page .contact-banner .button, .detail-page .contact-dialog .button { background: #f3eff8; color: #17121e; }
.detail-page .product-nav { background: #0d0c11ed; border-color: #ffffff12; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.detail-page .product-nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 15px; color: #b1abbc; font-weight: 650; }
.detail-page .product-nav a[aria-current] { color: #fff; }
.detail-page .detail-hero { isolation: isolate; background: radial-gradient(ellipse at 85% 55%, #32243c40, transparent 65%), #0b0b0f; }
.detail-page .detail-hero > .zebra-texture { z-index: -1; inset: 0 0 0 10%; --zebra-opacity: .22; }
.detail-page .detail-hero .eyebrow { color: #b49acd; }
.detail-page .detail-hero h1 > span { color: #ac79f5; }
.detail-page .detail-hero-copy > p:not(.eyebrow), .detail-page .module-copy > p { color: #b0aab8; }
.detail-page .product-intro { position: relative; isolation: isolate; background: #111015; }
.detail-page .product-intro > .zebra-texture { z-index: -1; inset: 0 10%; --zebra-opacity: .10; }
.detail-page .product-intro > p { color: #b0aab8; }
.detail-page .product-intro > span { color: #a397b2; }
.detail-page .module-section { position: relative; isolation: isolate; background: #0c0c10; border-color: #ffffff12; }
.detail-page .module-section.reverse { background: #101014; }
.detail-page .module-section > .zebra-texture { z-index: -1; inset: 10% 25% 10% 0; --zebra-opacity: .14; }
.detail-page .module-section.reverse > .zebra-texture { inset: 10% 0 10% 25%; }
.detail-page .module-copy .eyebrow { color: #b49acd; }
.detail-page .module-copy h2 { letter-spacing: -.05em; font-weight: 800; }
.detail-page .benefit-list li { color: #a9a3b1; }
.detail-page .benefit-list li::before { color: #ad7ded; }
.detail-page .module-extra { color: #a99bbd; }
.detail-page .module-extra strong { color: #d7c4ef; }
.detail-page .visual-caption { color: #8d8399; }
.detail-page .team-visual { background: radial-gradient(ellipse at 75% 15%, #31263e, #17151c); border-color: #39303f; }
.detail-page .team-avatar { background: #372547; color: #d2aaff; }
.detail-page .team-task { background: #141019; border-color: #44314f; }
.detail-page .team-row small, .detail-page .team-task p { color: #a496b1; }
.detail-page .difference-section { position: relative; isolation: isolate; background: #0b0b0f; }
.detail-page .difference-section > .zebra-texture { z-index: -1; inset: 0 4%; --zebra-opacity: .16; }
.detail-page .difference-grid article > span { color: #b184f1; }
.detail-page .difference-grid p, .detail-page .difference-heading p { color: #a9a3b1; }
.detail-page .detail-faq { position: relative; isolation: isolate; background: #101014; }
.detail-page .detail-faq > .zebra-texture { z-index: -1; inset: 0 25% 0 0; --zebra-opacity: .14; }
.detail-page .faq-list summary::after { color: #b184f1; }
.detail-page .faq-list details p { color: #aaa3b3; }
.detail-page .contact-banner { position: relative; isolation: isolate; overflow: hidden; background: #101014; }
.detail-page .contact-banner > .zebra-texture { z-index: -1; --zebra-opacity: .17; }
.detail-page .contact-banner .violet-text { color: #a16ae8; }
.detail-page .contact-banner .rentable-cta-name { display: inline-block; margin: 0; font-size: 1em; color: #f4f5f5; font-weight: 850; letter-spacing: -.065em; line-height: inherit; vertical-align: baseline; }
.detail-page .contact-banner .rentable-cta-name > span { color: #8cecff; font-weight: 900; margin-left: .015em; }
.detail-page .site-footer { background: #09090c; }
.detail-page .contact-dialog { border-color: #823aff40; }
.detail-page .contact-dialog input:focus, .detail-page .contact-dialog select:focus, .detail-page .contact-dialog textarea:focus { border-color: #b485ff; box-shadow: 0 0 0 2px #9b55ff22; }
.detail-page .contact-dialog .cyan-text { color: #ab79ee; }

@media (max-width: 900px) {
  .studio-brand { width: 210px; }
  .studio-wordmark { height: 38px; }
  .rentable-scene .zebra-texture { left: 15%; }
  .future-scene .zebra-texture { inset: 35% 0 0; }
  .studio-page .process-section { min-height: 0; padding-top: 95px; padding-bottom: 95px; gap: 6%; }
  .studio-page .process-list li, .studio-page .process-list li:first-child { padding: 21px; gap: 17px; }
  .studio-page .process-list h3 { font-size: 20px; }
}
@media (max-width: 600px) {
  .detail-page .product-brand .studio-brand { width: clamp(125px, 38vw, 180px); }
  .detail-page .product-brand .studio-wordmark { height: 30px; }
  .detail-page .product-brand > .rentable-logo { border-left: 0; padding-left: 0; }
  .detail-page .module-section > .zebra-texture, .detail-page .module-section.reverse > .zebra-texture { inset: 0 0 25%; --zebra-opacity: .12; }
  .detail-page .detail-faq > .zebra-texture { inset: 0 0 15%; --zebra-opacity: .12; }
  .studio-page .site-header { gap: 9px; }
  .studio-page .site-header .studio-brand { width: clamp(124px, 39vw, 176px); gap: 0; }
  .studio-page .site-header .studio-wordmark { height: 30px; }
  .studio-page .site-header .studio-brand small { font-size: 6px; margin-left: 0; letter-spacing: .015em; }
  .studio-page .header-contact { min-height: 36px; padding: 10px 11px; gap: 8px; font-size: 9px; }
  .studio-page .header-contact > span { font-size: 13px; }
  .studio-page .site-footer .studio-brand { width: 180px; }
  .studio-page .site-footer .studio-wordmark { height: 34px; }
  .zebra-graphite { --zebra-opacity: .13; }
  .zebra-violet { --zebra-opacity: .12; }
  .studio-page .process-section { padding-top: 80px; padding-bottom: 80px; gap: 28px; }
  .studio-page .process-section > .zebra-texture { inset: 0 0 30%; --zebra-opacity: .21; }
  .studio-page .process-section .section-intro h2 { font-size: clamp(40px, 10vw, 54px); }
  .studio-page .process-section .section-intro > p:last-child { font-size: 14px; }
  .studio-page .process-list li, .studio-page .process-list li:first-child { padding: 22px 19px; }
  .studio-page .process-list p { font-size: 13px; }
  .studio-page .contact-banner > .zebra-texture { --zebra-opacity: .16; }
  .studio-page .contact-banner::after { background: linear-gradient(90deg, #10101466, #101014eb 24%, #101014eb 76%, #10101466); }
}
@media (max-width: 380px) {
  .studio-page .header-contact { padding: 9px 8px; }
  .studio-page .header-contact > span { display: none; }
  .studio-page .site-header .studio-brand small { display: none; }
}

/* Botones: tipografía compacta y una trama que aparece de forma gradual. */
:is(.studio-page, .detail-page) :is(.button, .text-button, .footer-contact, .product-tabs button, .mobile-nav button, .desktop-nav a, .product-nav a) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  font-weight: 750;
  letter-spacing: -.015em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
:is(.studio-page, .detail-page) .button { font-size: 14px; }
:is(.studio-page, .detail-page) :is(.text-button, .footer-contact) { padding-left: 17px; padding-right: 17px; border: 1px solid #ffffff1c; }
:is(.studio-page, .detail-page) .footer-contact { min-height: 40px; }
:is(.studio-page, .detail-page) :is(.button, .text-button, .footer-contact, .product-tabs button, .mobile-nav button, .desktop-nav a, .product-nav a)::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  pointer-events: none;
  background: url('./assets/zebra-trama.png') center / cover no-repeat;
  mix-blend-mode: soft-light;
  mask-image: radial-gradient(ellipse closest-side, #000 10%, #0009 45%, transparent 100%);
  opacity: 0;
  filter: blur(.5px);
  transition: opacity .3s ease;
}
:is(.studio-page, .detail-page) :is(.button, .text-button, .footer-contact, .product-tabs button, .mobile-nav button, .desktop-nav a, .product-nav a):focus-visible {
  background: #7133c9;
  color: #fff;
  border-color: #b58be9;
  outline: 2px solid #c7a3ff;
  outline-offset: 4px;
}
:is(.studio-page, .detail-page) :is(.button, .text-button, .footer-contact, .product-tabs button, .mobile-nav button, .desktop-nav a, .product-nav a):focus-visible::before { opacity: .17; }
@media (hover: hover) and (pointer: fine) {
  :is(.studio-page, .detail-page) :is(.button, .text-button, .footer-contact, .product-tabs button, .mobile-nav button, .desktop-nav a, .product-nav a):hover {
    background: #7133c9;
    color: #fff;
    border-color: #a87de0;
    box-shadow: 0 7px 24px #823aff29, inset 0 1px 0 #ffffff17;
    transform: translateY(-2px);
  }
  :is(.studio-page, .detail-page) :is(.button, .text-button, .footer-contact, .product-tabs button, .mobile-nav button, .desktop-nav a, .product-nav a):hover::before { opacity: .17; }
}
:is(.studio-page, .detail-page) :is(.button, .text-button, .footer-contact, .product-tabs button, .mobile-nav button, .desktop-nav a, .product-nav a):active { transform: translateY(0) scale(.985); }
@media (max-width: 700px) {
  .rentable-scene .zebra-texture { --zebra-opacity: .18; }
}

/* Cabezal neutro y uniforme; el violeta del logo conserva su color original. */
.site-header .desktop-nav a::before, .site-header .button::before { display: none; }
.studio-page .site-header .desktop-nav a:is(:hover, :focus-visible) { background: #ffffff0b; border-color: #ffffff24; color: #fff; box-shadow: none; }
.site-header .button:is(:hover, :focus-visible) { background: #fff; color: #101114; border-color: #ffffff55; box-shadow: none; }

/* La marca acompaña las secciones en la barra fija del producto. */
.detail-page .product-nav { align-items: center; justify-content: flex-start; gap: 24px; padding: 8px var(--gutter); overflow: visible; }
.detail-page .product-nav .product-nav-brand { flex: 0 0 auto; gap: 0; margin: 0; padding: 0 24px 0 0; border-right: 1px solid #ffffff20; border-radius: 0; color: #f4f5f7; font-size: 26px; font-weight: 850; line-height: 1; letter-spacing: -.065em; }
.detail-page .product-nav .product-nav-brand > span { color: var(--cyan); }
.detail-page .product-nav .product-nav-brand::before { display: none; }
.detail-page .product-nav .product-nav-brand:is(:hover, :focus-visible) { background: transparent; color: #fff; transform: none; box-shadow: none; border-color: #ffffff20; }
.product-nav-links { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; gap: 12px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #50485e transparent; }
.product-nav-links > a { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 900px) {
  .detail-page .product-nav { gap: 16px; }
  .detail-page .product-nav .product-nav-brand { padding-right: 16px; font-size: 23px; }
  .product-nav-links { justify-content: flex-start; gap: 7px; }
}
@media (max-width: 700px) {
  .detail-page .product-nav { gap: 12px; padding-top: 6px; padding-bottom: 6px; }
  .detail-page .product-nav .product-nav-brand { padding-right: 12px; font-size: 22px; }
}

/* Capturas de la aplicación real, conservando los marcos de la presentación. */
.capture-stack { display: grid; gap: 18px; }
.purchase-capture { position: relative; width: 66%; margin: -8% 0 0 auto; transform: rotate(2deg); }
.tables-layout .phone.phone-real { padding: 0; width: 100%; max-width: 225px; right: 0; border: 6px solid #30333c; border-radius: 28px; overflow: hidden; background: #101619; }
.phone-real img { display: block; width: 100%; height: auto; border-radius: 0; }

/* Inicio real en computadora y carta QR real en un celular superpuesto. */
.detail-hero-art.hero-devices { width: min(720px, 46vw); left: 49%; top: 105px; padding-bottom: 110px; transform: none; }
.hero-devices .hero-desktop { transform: perspective(1600px) rotateY(-12deg) rotateZ(-4deg); transform-origin: center left; }
.hero-desktop > img { display: block; width: 100%; height: auto; }
.hero-qr-phone { position: absolute; z-index: 1; right: 6%; bottom: 0; width: clamp(140px, 14vw, 195px); margin: 0; padding: 23px 0 6px; overflow: hidden; border: 5px solid #36373f; border-radius: 27px; background: #101619; box-shadow: 0 25px 55px #000b, inset 0 0 0 1px #ffffff10; transform: rotate(6deg); }
.hero-qr-viewport { width: 100%; aspect-ratio: 380 / 822; overflow: hidden; background: #101619; }
.hero-qr-viewport > img { display: block; width: 100%; height: auto; animation: hero-qr-scroll 9s ease-in-out infinite alternate !important; will-change: transform; }
.hero-phone-island { position: absolute; z-index: 2; top: 6px; left: 50%; width: 36%; height: 13px; border-radius: 20px; background: #020304; transform: translateX(-50%); box-shadow: 0 0 0 1px #ffffff05; }
.hero-phone-island::after { content: ""; position: absolute; top: 4px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #20334b, #070b13 65%); box-shadow: inset 0 0 0 1px #101a24; }
@keyframes hero-qr-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(var(--qr-travel, 0px)); }
}
@media (max-width: 900px) {
  .detail-hero-art.hero-devices { position: relative; width: 94%; max-width: 720px; left: 3%; top: auto; margin: 45px 0 25px; padding-bottom: 100px; }
  .hero-qr-phone { width: 26%; min-width: 140px; right: 3%; border-width: 4px; border-radius: 23px; }
}
@media (max-width: 700px) {
  .detail-hero-art.hero-devices { width: 100%; max-width: 100%; left: auto; margin: 35px 0 15px; padding-bottom: 120px; }
  .hero-devices .hero-desktop { transform: perspective(1200px) rotateY(-5deg) rotateZ(-2deg); }
  .hero-qr-phone { width: 32%; min-width: 108px; right: 3%; padding-top: 20px; border-radius: 19px; }
  .hero-phone-island { top: 5px; height: 11px; }
  .hero-phone-island::after { top: 3px; }
}
@media (max-width: 700px) {
  .purchase-capture { width: 76%; margin-top: -7%; }
  .tables-layout .phone.phone-real { width: min(230px, 75%); max-width: 230px; min-width: 0; border-width: 4px; border-radius: 20px; }
}