/* Reutiliza .duo, .dupla, .btn y .experiencia del diseño original. */
.producto-intro {padding-bottom:var(--space-5)}
.producto-rubro {font-size:1rem;color:var(--muted);letter-spacing:0.1rem}
.producto-beneficio {font-family:var(--font-display);font-size:1.3rem;line-height:1.5;font-weight:600}
.producto-filtros,.visor-controles {display:flex;flex-wrap:wrap;gap:0.6rem}
.producto-filtros [aria-pressed=true],.visor-controles [aria-pressed=true] {background:var(--accent);color:var(--accent-on)}
.producto-seccion {scroll-margin-top:6rem;border-top:0.1rem solid var(--border-soft)}
.producto-seccion:nth-child(odd) {background:var(--surface-warm)}
.producto-duo--invertido .producto-copy {order:2}
.producto-duo--invertido .producto-visual {order:1}
.producto-previa {display:block;width:100%;padding:0;border:0;background:transparent;color:var(--fg);text-align:left;cursor:zoom-in;font:inherit}
.producto-previa:hover .dupla__grande {box-shadow:0 0 0 0.2rem var(--accent)}
.producto-ampliar {display:flex;justify-content:space-between;font-size:1rem;color:var(--muted);margin-top:1.5rem}
.producto-sin-previa {padding:2rem;border:0.1rem dashed var(--border);border-radius:var(--radius-md)}
.producto-visor {width:min(calc(var(--viewport-width) * 0.9),80rem);max-height:calc(var(--viewport-height) * 0.9);padding:1.5rem;border:0.1rem solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--fg);margin:auto;overflow:auto}
.producto-visor::backdrop {background:color-mix(in srgb,var(--dlv-black) 75%,transparent)}
.visor-cabecera {display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.visor-cabecera h2 {margin:0}
.visor-controles {margin-block:1rem}
.visor-pantalla {margin-block:1rem;display:flex;justify-content:center}
.visor-pantalla img {display:block;width:100%;height:auto;align-self:start;border-radius:var(--radius-md);border:0.1rem solid var(--border)}
.visor-pantalla[data-screen=mobile] img,.visor-pantalla[data-screen=mobileCharts] img {width:min(100%,24.4rem)}
.producto-visor #visor-muestra {display:inline-block;margin-top:1rem}
.estrategia-casos {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:2rem}
.estrategia-caso {display:grid;align-content:start;gap:1rem;min-width:0}
.estrategia-caso img {width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:var(--radius-md);border:0.1rem solid var(--border)}
.estrategia-caso h3 {margin:0}
html[data-bp=phone] .producto-duo--invertido .producto-copy,html[data-bp=tablet] .producto-duo--invertido .producto-copy {order:0}
html[data-bp=phone] .producto-duo--invertido .producto-visual,html[data-bp=tablet] .producto-duo--invertido .producto-visual {order:0}
html[data-bp=phone] .producto-visor {width:calc(100% - 1rem);padding:1rem}
html[data-bp=phone] .visor-cabecera h2 {font-size:1.2rem}

.visor-controles [hidden],#visor-muestra[hidden] {display:none}

/* Alternativa de presentación: pantallas y consulta, sin operar productos. */
.producto-presentacion { display: grid; gap: 2rem; }
.producto-presentacion .producto-copy { max-width: 54rem; }
.producto-detalle > .experiencia__cuerpo { max-width: none; }
.producto-detalle > .experiencia__cuerpo > p { max-width: 43rem; }
.producto-galeria { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap: 1.5rem; }
.producto-pantalla { display: grid; align-content: start; gap: 0.8rem; padding: 1rem; border: 0.1rem solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.producto-pantalla img { width: 100%; height: auto; aspect-ratio: 1.5; object-fit: contain; object-position: top; background: var(--bg); border-radius: var(--radius-md); }
.producto-pantalla h3 { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.4; }
.producto-pantalla p { font-size: 1rem; line-height: 1.6; }
.producto-pantalla .producto-ampliar { margin-top: 0.8rem; }
#visor-recorrido [aria-pressed="true"] { background: var(--accent); color: var(--accent-on); }

/* Vista general horizontal/vertical y recorrido cotidiano, con tokens originales. */
.producto-resumen { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,26rem),1fr)); gap: 2rem; align-items: center; }
.producto-panorama { min-width: 0; }
.producto-panorama .dupla__celu { width: 26%; }
.producto-panorama .dupla__celu img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.producto-visual > h3 { margin-bottom: 1.5rem; }

/* Visor móvil: controles compactos y explicación opcional después de la imagen. */
.visor-herramientas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.visor-dispositivo { width: 1.3rem; height: 1.3rem; }
.visor-herramientas .btn { gap: 0.4rem; }
.visor-detalle summary { cursor: pointer; min-height: 2.8rem; padding-block: 0.6rem; }
.visor-detalle .texto { max-width: none; font-size: 1rem; line-height: 1.5; }
html[data-bp=phone] .producto-visor[open] { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; height: fit-content; max-height: calc(var(--viewport-height) - 1rem); }
html[data-bp=phone] .producto-visor > * { flex-shrink: 0; }
html[data-bp=phone] .visor-cabecera { margin: 0; gap: 0.5rem; }
html[data-bp=phone] .visor-cabecera h2 { font-size: 1.2rem; line-height: 1.3; }
html[data-bp=phone] .visor-herramientas { flex-wrap: nowrap; justify-content: space-between; gap: 0.5rem; }
html[data-bp=phone] .visor-controles { margin: 0; flex-wrap: nowrap; gap: 0.3rem; }
html[data-bp=phone] .visor-herramientas .btn,html[data-bp=phone] #visor-cerrar { min-width: 2.8rem; min-height: 2.8rem; padding: 0.4rem; }
html[data-bp=phone] .visor-paso-titulo,html[data-bp=phone] .visor-dispositivo-texto { display: none; }
html[data-bp=phone] .visor-pantalla { margin: 0; }
html[data-bp=phone] .visor-detalle { order: 3; }
html[data-bp=phone] #visor-faltante { order: 2; }
html[data-bp=phone] #visor-muestra { order: 4; margin-top: 0; }

/* Capturas horizontales completas dentro del espacio disponible del visor. */
.visor-pantalla[data-screen=desktop] img { width: auto; max-width: 100%; max-height: calc(var(--viewport-height) - 26rem); object-fit: contain; }

/* Previas de productos: gira el marco y cambia a la captura de cada orientación. */
.producto-tablet-demo { min-width: 0; }
.producto-tablet-demo .producto-panorama { padding-block-end: 0; }
.tablet-escena { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.tablet-marco { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; padding: 0; border-radius: 1.2rem; background: var(--dlv-chrome); box-shadow: var(--elev-raised); transform-origin: center; transition: transform calc(var(--motion-base) * 3) var(--ease-standard); }
.tablet-pantalla { box-shadow: 0 0 0 0.35rem var(--dlv-chrome); display: block; width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 0.6rem; }
.tablet-pantalla img { position: absolute; display: block; max-width: none; object-fit: contain; transition: opacity var(--motion-base) var(--ease-standard); }
.tablet-horizontal { width: 100%; height: 100%; inset: 0; }
.tablet-vertical { width: 75%; height: calc(100% * 4 / 3); left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-90deg); opacity: 0; }
[data-tablet-orientation=vertical] .tablet-marco { transform: translateX(21.875%) rotate(90deg) scale(0.75); }
[data-tablet-orientation=vertical] .tablet-horizontal { opacity: 0; }
[data-tablet-orientation=vertical] .tablet-vertical { opacity: 1; }
.producto-tablet-demo .dupla__celu { z-index: 1; }
.tablet-girar { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .tablet-marco,.tablet-pantalla img { transition: none; } }