/* La escena del portátil (27-oct, la CTO: «fíjate en el inicio de Rojumar cómo es Tu Oficina Digital, ¡es que la
   copiaba entera!»). Traída de la web de Rojumar (css/estilo.css, .escena-* y .vitrina-*) con prefijo esc- para no
   chocar con la escena fija de estilo.css. La foto es la escena del portátil de Rojumar (img/escena/, 1916x821, con
   su versión espejo para que las dos escenas de la portada no sean la misma): se pinta a su tamaño natural y a todo
   lo ancho, así el hueco de la pantalla, medido en % de la foto, cae siempre en su sitio. El clip va DENTRO de la
   pantalla, recortado con la forma real (cuatro esquinas en % de la foto); el texto, en un cuadro de cristal sobre
   la pared; y debajo, la fila de pestañas que pasan solas (js/escena.js) y cambian el clip.
   Sin beige: cristal blanco, gris y oro. */

.esc { position: relative; overflow: clip; padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); background: #fcfcfb; }
.esc-marco { position: relative; }
.esc-foto { position: relative; }
/* Los bordes de arriba y abajo se funden con el fondo de la sección, sin corte (el portátil queda entero) */
.esc-fondo { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); }
/* La pantalla, con su forma real (está algo en perspectiva): cuatro esquinas medidas sobre la foto de 1916x821.
   1) .esc-negro tapa ese hueco (un pelo más grande, por el borde suavizado). 2) El clip va dentro, metido hacia
   dentro para que el marco visible sea igual por los cuatro lados. Las dos capas ocupan la foto entera para que
   los % del polígono sean de la foto. */
.esc-negro { position: absolute; inset: 0; z-index: 1; background: #1b1d22; pointer-events: none; clip-path: polygon(41.06% 20.30%, 78.26% 20.30%, 78.89% 69.73%, 40.38% 69.73%); }
.esc-pantalla { position: absolute; inset: 0; z-index: 1; margin: 0; clip-path: polygon(41.156% 20.400%, 78.161% 20.400%, 78.786% 69.627%, 40.479% 69.627%); }
.esc-pantalla video, .esc-pantalla img { position: absolute; left: 40.479%; top: 20.4%; width: 38.307%; height: 49.227%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity 600ms var(--suave); }
.esc-pantalla video.activo, .esc-pantalla img.activo { opacity: 1; }
/* La escena en espejo: el portátil a la izquierda y la pared (con el texto) a la derecha */
.esc-espejo .esc-negro { clip-path: polygon(58.94% 20.30%, 21.74% 20.30%, 21.11% 69.73%, 59.62% 69.73%); }
.esc-espejo .esc-pantalla { clip-path: polygon(58.844% 20.400%, 21.839% 20.400%, 21.214% 69.627%, 59.521% 69.627%); }
.esc-espejo .esc-pantalla video, .esc-espejo .esc-pantalla img { left: 21.214%; }
/* La caja de texto: en pantalla ancha, un cuadro de cristal sobre la pared, sin tapar el portátil; en pantallas
   más estrechas, arriba de la foto, como una cabecera normal */
.esc-texto-caja { width: min(var(--ancho), 100% - 2 * var(--gutter)); margin-inline: auto; padding: 0 0 28px; }
.esc-texto { max-width: 640px; }
.esc-texto .etiqueta { display: block; margin-bottom: 12px; }
.esc-texto .respiro { font-size: clamp(30px, 3.2vw, 46px); }
.esc-texto .linea-seccion { margin-top: 14px; }
/* La prueba: la única escrita, como el «Desde 1992» de Rojumar; aquí, de quién nació la plataforma */
.esc-prueba { display: grid; gap: 2px; margin: 22px 0 24px; padding-left: 16px; border-left: 2px solid var(--oro-mate); }
.esc-prueba b { font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; color: var(--tinta); }
.esc-prueba span { font-size: 14.5px; color: var(--tinta-2); line-height: 1.45; }
.esc-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.esc-acciones .ania-mas { margin-top: 0; }
@media (min-width: 1180px) {
  .esc-texto-caja { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: 0; pointer-events: none; }
  .esc-texto { pointer-events: auto; width: min(470px, 32vw); padding: clamp(24px, 2.2vw, 34px); border-radius: 24px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 60px rgba(74, 79, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(74, 79, 90, 0.06); }
  .esc-espejo .esc-texto-caja { justify-content: flex-end; }
  .esc-texto .respiro { font-size: clamp(28px, 2.3vw, 40px); }
  .esc-texto .linea-seccion { font-size: 16px; }
  .esc-prueba { margin: 18px 0 22px; }
  .esc-prueba b { font-size: clamp(19px, 1.5vw, 23px); }
  .esc-acciones .boton { height: 46px; padding: 0 20px; font-size: 15px; }
}
/* La fila: el título a la izquierda (dos líneas) y las diez pestañas, finas, con su línea de tiempo arriba */
.esc-fila { width: min(var(--ancho), 100% - 2 * var(--gutter)); margin: 14px auto 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.esc-fila-titulo { margin: 0; padding-top: 12px; font-weight: 300; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; letter-spacing: -0.02em; color: var(--tinta); }
.esc-fila-titulo span { display: block; }
.esc-fila-titulo em { font-style: normal; font-weight: 500; color: var(--oro-tinta); }
.esc-pestanas { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 14px; margin: 0; }
.esc-pestanas button { position: relative; display: grid; gap: 3px; align-content: start; text-align: left; padding: 14px 4px 4px; color: var(--tinta-2); cursor: pointer; }
.esc-pestanas button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(74, 79, 90, 0.14); }
.esc-pestanas b { font-weight: 500; font-size: 14px; line-height: 1.25; color: var(--tinta); transition: color 250ms; }
.esc-pestanas span { font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--gris); }
/* Quién lo pidió (en «Por qué Entre Asesores»): el perfil en oro, pequeño */
.esc-pestanas em { font-style: normal; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro-tinta); margin-top: 2px; }
.esc-pestanas button:hover b { color: var(--oro-tinta); }
.esc-pestanas button.activa b { color: var(--oro-tinta); }
.esc-pestanas i { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--amarillo); transform: scaleX(0); transform-origin: left; }
.esc-pestanas button.activa i { transform: scaleX(1); }
.en-pase .esc-pestanas button.activa i { animation: esc-tiempo var(--esc-turno, 9s) linear forwards; }
@keyframes esc-tiempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1279px) { .esc-pestanas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 18px; } }
@media (max-width: 1024px) { .esc-fila { grid-template-columns: 1fr; gap: 10px; } .esc-fila-titulo span { display: inline; } .esc-pestanas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* En el móvil no hay escena: el clip va en una lámina normal, grande y nítida, con el pie de foto debajo */
@media (max-width: 900px) {
  .esc-fondo, .esc-negro { display: none; }
  .esc-foto { width: min(var(--ancho), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .esc-pantalla { position: relative; inset: auto; clip-path: none; aspect-ratio: 16 / 10; border-radius: var(--radio); overflow: hidden; background: var(--humo); box-shadow: var(--sombra-lamina), 0 0 0 1px rgba(74, 79, 90, 0.08); }
  .esc-pantalla video, .esc-pantalla img, .esc-espejo .esc-pantalla video, .esc-espejo .esc-pantalla img { left: 0; top: 0; width: 100%; height: 100%; }
  .esc-fila { margin-top: 22px; }
}
@media (max-width: 640px) {
  .esc { padding: 56px 0 40px; }
  .esc-pestanas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .esc-pestanas span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .esc-pantalla video, .esc-pantalla img { transition-duration: 300ms !important; }
}