/* Demostraciones originales, sin librerías, vídeo ni conexiones externas. */
.visual-services {margin: 0 0 76px;}
.visual-intro {display: flex; justify-content: space-between; align-items: end; gap: 40px; margin: 0 0 30px;}
.visual-intro h2 {font-size: clamp(2rem, 3.5vw, 3.2rem); max-width: 20ch; margin-top: 12px;}
.visual-intro > p {max-width: 32ch; color: var(--muted); font-size: var(--text-body);}
.visual-tabs {display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border: 1px solid var(--line); border-bottom: 0;}
.visual-tabs button {position: relative; min-height: 94px; padding: 15px 14px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; font-size: var(--text-body); line-height: 1.35; transition: background .2s;}
.visual-tabs button:last-child {border-right: 0;}
.visual-tabs button:hover {background: var(--pale);}
.visual-tabs button[aria-selected=true] {background: var(--green); color: var(--paper);}
.visual-number {display: block; font: var(--text-small)/1.5 monospace; opacity: .75; margin-bottom: 10px;}
.visual-tab-arrow {position: absolute; top: 14px; right: 14px; opacity: .55;}
.visual-panel {display: grid; grid-template-columns: 1.12fr 1fr; border: 1px solid var(--line);}
.visual-panel[hidden], .visual-tabs[hidden], .visual-services [hidden] {display: none;}
.visual-stage {background: var(--dark); color: var(--paper); padding: 24px; display: flex; flex-direction: column; align-items: start;}
.visual-stage-top {display: flex; justify-content: space-between; width: 100%; gap: 15px; font: var(--text-small)/1.5 monospace; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; color: #b9cdbd;}
.visual-stage figure {width: 100%; flex: 1;}
.visual-stage svg {display: block; width: 100%; height: auto;}
.visual-stage figcaption {font-size: var(--text-small); line-height: 1.6; color: #d3dece; margin: 18px 0; min-height: 3.3em; max-width: 65ch;}
.visual-action {border: 1px solid #809e8e; background: transparent; color: var(--paper); min-height: 46px; padding: 9px 16px; font-size: var(--text-body); display: inline-flex; gap: 14px; align-items: center;}
.visual-action:hover, .visual-action[aria-pressed=true] {background: #e3e7db; color: var(--dark); border-color: #e3e7db;}
.visual-action-icon {font-size: 1.2rem; line-height: 1;}
.visual-copy {padding: clamp(24px, 3.3vw, 48px); align-self: center;}
.visual-copy h3 {font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin: 17px 0 22px; max-width: 18ch;}
.visual-copy > p:not(.eyebrow) {font-size: var(--text-body); color: var(--muted);}
.visual-copy dl {margin: 26px 0;}
.visual-copy dl > div {display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line);}
.visual-copy dt {font-size: var(--text-small); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;}
.visual-copy dd {margin: 0; font-size: var(--text-body); color: var(--muted); line-height: 1.5;}
.visual-limit {display: flex; gap: 14px; color: var(--green);}
.visual-limit > span {font-size: 1.6rem; line-height: 1.1;}
.visual-limit p {font-size: var(--text-small); line-height: 1.65;}
.visual-limit strong {display: block; font-weight: 600;}
.visual-foot {display: flex; gap: 24px; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: var(--text-small); color: var(--muted);}
.visual-foot p {display: flex; gap: 8px; align-items: baseline;}
.visual-dot {display: inline-block; width: 6px; height: 6px; background: #b0845f; border-radius: 50%; flex-shrink: 0;}
.visual-foot a {color: var(--green);}
.visual-overlay {opacity: 0; transition: opacity .55s ease;}
.is-analyzing .visual-overlay {opacity: 1;}
.visual-plane {transform: matrix(.92,-.2,.32,.85,-20,75); transition: transform .65s ease;}
.is-analyzing .visual-plane {transform: matrix(1,0,0,1,0,0);}
.sensor-a, .sensor-b, .sensor-link, .file-layer {transition: transform .65s ease, opacity .65s ease;}
.is-analyzing .sensor-a {transform: translateX(152px);}
.is-analyzing .sensor-b {transform: translateX(-152px); opacity: .55;}
.is-analyzing .sensor-link {opacity: 0;}
.is-analyzing .file-back {transform: translate(350px,-10px) scale(.7);}
.is-analyzing .file-middle {transform: translate(128px,40px) scale(.7);}
.is-analyzing .file-front {transform: translate(-70px,90px) scale(.7);}
.home-visual {padding-top: 35px;}
.home-editorial {margin-top: -30px;}
.service-detail-heading {margin-bottom: 24px;}
.service-detail-heading h2 {margin-top: 0;}
.service-detail-heading p {font-size: var(--text-body); color: var(--muted);}
.service-detail-intro {margin: 25px 0;}
.service-detail {border-bottom: 1px solid var(--line);}
.service-detail:first-of-type {border-top: 1px solid var(--line);}
.service-detail > summary {list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 22px 0; font: 1.3rem/1.35 var(--serif); color: var(--ink);}
.service-detail > summary::-webkit-details-marker {display: none;}
.service-detail > summary > span {font: 1.2rem/1 var(--sans); color: var(--green); transition: transform .2s;}
.service-detail[open] > summary > span {transform: rotate(45deg);}
.service-detail-body {padding: 0 0 24px;}
.service-detail-body p + p {margin-top: 16px;}
.visual-workflow {margin-bottom: 65px;}
.workflow-steps {list-style: none; padding: 0; margin: 35px 0 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line);}
.workflow-steps li {position: relative; padding: 25px; background: #e8ede2; border-right: 1px solid var(--line);}
.workflow-steps li:last-child {border: 0; background: var(--green); color: var(--paper);}
.workflow-steps svg {display: block; width: 140px; max-width: 100%; height: 110px; margin: 12px auto 20px; fill: none; stroke: currentColor; stroke-width: 2;}
.workflow-steps h3 {font-size: 1.7rem; margin-bottom: 15px;}
.workflow-steps p {font-size: var(--text-body); line-height: 1.6;}
.workflow-number {font: var(--text-small)/1.2 monospace;}
.visual-services button:focus-visible, .service-detail summary:focus-visible {outline: 3px solid #c3903d; outline-offset: 4px; z-index: 1;}
@media (max-width: 1000px) {.visual-tabs {grid-template-columns: repeat(3,minmax(0,1fr));}.visual-tabs button {min-height: 80px; border-bottom: 1px solid var(--line);}.visual-copy {padding: 24px;}.visual-copy dl > div {grid-template-columns: 1fr; gap: 5px;}.visual-stage {padding: 20px;}.workflow-steps li {padding: 20px;}}
@media (max-width: 700px) {.visual-intro {display: block;}.visual-intro > p {margin-top: 18px; max-width: 45ch;}.visual-panel {grid-template-columns: 1fr;}.visual-tabs button {padding: 13px 10px; font-size: var(--text-small);}.visual-stage {padding: 18px;}.visual-copy {padding: 25px 22px;}.visual-copy h3 {max-width: 23ch;}.visual-copy dl > div {grid-template-columns: 95px 1fr; gap: 12px;}.visual-stage figcaption {min-height: 0;}.visual-foot {flex-direction: column; gap: 12px;}.workflow-steps {grid-template-columns: repeat(2,minmax(0,1fr));}.workflow-steps li {border-bottom: 1px solid var(--line);}.workflow-steps li:nth-child(2) {border-right: 0;}.workflow-steps li:nth-child(3) {border-bottom: 0;}.service-detail > summary {font-size: 1.18rem;}.visual-services {margin-bottom: 50px;}}
@media (prefers-reduced-motion: reduce) {.visual-services *, .service-detail > summary > span {transition: none !important;}}
@media print {.visual-panel[hidden] {display: grid;}.visual-tabs, .visual-action {display: none;}.visual-panel {break-inside: avoid;}.service-detail > .service-detail-body {display: block;}}
.custom-study{position:relative;aspect-ratio:600/360}.custom-study img{width:100%;height:100%;object-fit:contain}.custom-study-result{position:absolute;inset:0;opacity:0}.is-analyzing .custom-study-result{opacity:1}.is-analyzing .custom-study:has(.custom-study-result) .custom-study-original{opacity:0}

/* Límites metodológicos y controles legibles en todos los tamaños. */
.visual-tabs button, .visual-action { font-size: var(--text-control); }
.visual-action { min-height: 48px; }
.visual-panel > *, .visual-copy dl > * { min-width: 0; }
.visual-copy dl > div { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
.visual-copy dt { font-size: var(--text-small); text-transform: none; letter-spacing: normal; }
.visual-copy dd { font-size: var(--text-body); line-height: 1.65; }
.visual-stage-top { flex-wrap: wrap; }
.visual-tabs button:focus-visible { outline: 3px solid #ab622f; outline-offset: 4px; }
.visual-action:focus-visible { outline: 3px solid #f5f3ed; outline-offset: 4px; }
@media (max-width: 1000px) { .visual-copy dl > div { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .visual-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 440px) { .workflow-steps { grid-template-columns: 1fr; }.workflow-steps li { border-right: 0; }.workflow-steps li:nth-child(3) { border-bottom: 1px solid var(--line); } }