/* lumaq.es · demos en vídeo, fases del Sistema y pestañas (ciclo 6c-2). Solo transform y opacity en lo que se mueve. */

/* ---------- marco de demo: póster reservado en 16:9, el vídeo aparece encima al reproducirse ---------- */
.demo-escena { margin: 0; min-width: 0; }
.demo-marco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border-radius: var(--r-escena); background: var(--dia-200); box-shadow: var(--sombra-escena); }
.demo-marco picture, .demo-marco img, .demo-marco video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.demo-marco img, .demo-marco video { object-fit: cover; }
.demo-marco video { opacity: 0; transition: opacity var(--d-3) var(--ease-out); }
.demo-marco[data-reproduciendo="true"] video { opacity: 1; }
/* 9b: en movil, las demos con version vertical reservan 4:5 (1080x1350) y no pasan de 28 rem de ancho */
@media (max-width: 767px) { .demo-marco[data-con-vertical] { aspect-ratio: 4 / 5; max-width: 28rem; margin-inline: auto; } }
@media (max-width: 767px) { .demo-marco[data-con-vertical] { aspect-ratio: 1080 / 1580; } .demo-marco[data-con-vertical] picture, .demo-marco[data-con-vertical] img, .demo-marco[data-con-vertical] video { inset: 0 0 auto 0; height: auto; aspect-ratio: 4 / 5; } .demo-marco[data-con-vertical] .demo-boton { bottom: var(--s-2); top: auto; right: var(--s-2); } }   /* franja propia bajo el video: en ninguna esquina del video el boton esta libre (arriba tapa "Contenido", abajo los subtitulos de dos lineas) */
.demo-boton { position: absolute; z-index: 2; right: var(--s-3); bottom: var(--s-3); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(21, 27, 39, .86); color: #fff; cursor: pointer; touch-action: manipulation; transition: transform var(--d-1) var(--ease-out); }
.demo-boton[hidden] { display: none; }
.demo-boton .ico { width: 20px; height: 20px; }
.demo-boton:active { transform: scale(.94); }
.demo-boton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--luz-tinta); }
@media (hover: hover) and (pointer: fine) { .demo-boton:hover { background: rgba(21, 27, 39, 1); } }
.demo-escena figcaption { margin-top: var(--s-2); font-size: var(--t-label); font-weight: 600; color: var(--ink-2); }
.demo-trans { margin-top: var(--s-2); }
.demo-trans summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; color: var(--acento-texto); font-weight: 600; text-decoration: underline; }
.demo-trans summary::-webkit-details-marker { display: none; }
.demo-trans summary::after { content: "+"; margin-left: var(--s-2); text-decoration: none; }
.demo-trans[open] summary::after { content: "\2212"; }
.demo-trans ol { display: grid; gap: var(--s-2); padding: var(--s-2) 0 var(--s-3); list-style: decimal; padding-left: 1.4em; font-size: var(--t-6); color: var(--ink-2); line-height: 1.5; max-width: 62ch; }

/* ---------- Sistema: vídeo a un lado, cuatro fases que van apareciendo ---------- */
.sistema-demo { row-gap: var(--s-5); align-items: start; margin-top: var(--s-5); }
.fases { display: grid; gap: var(--s-3); align-content: start; }
.fase { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-tarjeta); background: var(--superficie, var(--dia-100)); box-shadow: inset 0 0 0 1px var(--linea); }
.fase .n { grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--luz-grad); color: var(--tinta-900); font-size: var(--t-label); font-weight: 700; }
.fase h3 { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-5); font-weight: 600; letter-spacing: 0; line-height: 28px; }
.fase p { grid-column: 2; margin-top: var(--s-1); font-size: var(--t-6); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
@media (min-width: 1024px) {
  .sistema-demo .demo-escena { grid-column: 1 / 8; position: sticky; top: calc(var(--cabecera) + var(--s-5)); }
  .sistema-demo .fases { grid-column: 8 / 13; gap: var(--s-5); padding-block: var(--s-4); }
  .fase { min-block-size: 18svh; align-content: center; padding: var(--s-5); }
  .fase h3 { font-size: var(--t-4); }
  .fase p { font-size: var(--t-5); }
}
/* aparición: solo con JS y movimiento permitido; sin JS, o con movimiento reducido, las cuatro se ven siempre */
@media (prefers-reduced-motion: no-preference) {
  [data-fases][data-listo="true"] .fase { opacity: 0; transform: translateY(8px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
  [data-fases][data-listo="true"] .fase[data-visto="true"] { opacity: 1; transform: none; }
}
.sistema__ademas { margin-top: var(--s-6); font-size: var(--t-5); color: var(--ink-2); max-width: var(--medida); text-wrap: pretty; }

.capitulo.proyectos { padding-bottom: var(--s-7); } /* 9b: sin la fila "Lo que hacemos" entre Proyectos y Kits, el aire lo pone el propio modulo */
/* ---------- Proyectos (8c): dos módulos de pestañas con rotación calmada: "Así lo hacemos" (ejemplos) y "Casos reales" ---------- */
.mod { scroll-margin-top: calc(var(--cabecera) + var(--s-4)); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; }
.mod__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 32px; }
.mod__tit { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-4); font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.rota { display: flex; align-items: center; gap: var(--s-3); }
.rota[hidden] { display: none; }
.rota__boton { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(21, 27, 39, .86); color: #fff; cursor: pointer; touch-action: manipulation; }
.rota__boton .ico { width: 20px; height: 20px; }
.rota__boton[hidden] { display: none; }
.rota__boton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--luz-tinta); }
@media (hover: hover) and (pointer: fine) { .rota__boton:hover { background: #151B27; } }
.mod--casos { padding-top: var(--s-7); border-top: 1px solid var(--linea); margin-top: var(--s-4); }
/* escena: con JS los paneles (y los pasos de un panel) se apilan en la misma celda y se funden: la altura la marca el más alto y nada se mueve al rotar */
.mod__escena, .servicios-tabs__panel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.servicios-tabs__panel { gap: var(--s-6); }
.mod--js .servicios-tabs__panel { gap: 0; }
.mod--js .mod__escena > [data-panel], .mod--js .servicios-tabs__panel > [data-paso] { grid-area: 1 / 1; transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms; }
.mod--js .mod__escena > [data-panel]:not([data-activo="true"]), .mod--js .servicios-tabs__panel > [data-paso]:not([data-activo="true"]) { opacity: 0; visibility: hidden; pointer-events: none; }
.mod--js .mod__escena > [data-panel][data-activo="true"], .mod--js .servicios-tabs__panel > [data-paso][data-activo="true"] { transition: opacity 240ms var(--ease-out), visibility 0s; }
.panel__titulo { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-4); font-weight: 600; letter-spacing: 0; }
.paso-demo__nombre { font-size: var(--t-label); font-weight: 600; color: var(--ink-2); }
[data-solo-sinjs][hidden] { display: none; }
.paso-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--canal); align-items: start; align-content: start; min-width: 0; }
@media (min-width: 1024px) { .paso-demo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.servicios-tabs__texto > p { font-size: var(--t-4); line-height: 1.4; color: var(--ink); max-width: 28ch; text-wrap: balance; }
/* Selector de ejemplos (ciclo 11, v2): una bandeja clara con una LENTE oscura que se desliza hasta la pestana elegida (solo transform, 340 ms, ease-in-out fuerte). La barra ambar de abajo se llena con el progreso del video. Color del texto y del icono cambian con un pequeno retardo para llegar a la vez que la lente (si no, texto claro sobre fondo claro durante un instante). Pulsar = scale .97; hover solo con puntero fino; movimiento reducido sin transiciones. */
.servicios-tabs__lista { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; padding: 6px; background: var(--dia-100); border: 1px solid var(--linea); border-radius: calc(var(--r-tarjeta) + 6px); box-shadow: var(--sombra-corta); justify-self: stretch; max-width: 100%; }
.servicios-tabs__lista[hidden] { display: none; }
.servicios-tabs [role="tab"] { position: relative; overflow: hidden; z-index: 1; display: flex; align-items: center; gap: var(--s-3); min-height: 68px; padding: var(--s-3) var(--s-4); text-align: left; border: 0; border-radius: var(--r-tarjeta); background: transparent; color: var(--ink-2); font: inherit; cursor: pointer; touch-action: manipulation; white-space: normal; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.servicios-tabs [role="tab"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--luz-ambar), var(--luz-ember)); transform: scaleX(0); transform-origin: left; }
.servicios-tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(var(--p, 1)); transition: transform 240ms linear; }
.tab__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dia-200); color: var(--ink-2); transition: background-color 160ms ease 110ms, color 160ms ease 110ms; }
.tab__ico .ico { width: 20px; height: 20px; }
.tab__txt { display: grid; gap: 2px; min-width: 0; }
.tab__tit { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: 1.0625rem; line-height: 1.15; letter-spacing: -0.012em; text-wrap: balance; color: var(--ink); transition: color 160ms ease 110ms; }
.tab__sub { font-family: var(--f-text); font-weight: 500; font-size: var(--t-label); line-height: 1.35; letter-spacing: 0.005em; color: var(--ink-2); transition: color 160ms ease 110ms; }
.servicios-tabs [role="tab"][aria-selected="true"] .tab__tit { color: #fff; }
.servicios-tabs [role="tab"][aria-selected="true"] .tab__sub { color: #D9DEE8; }
.servicios-tabs [role="tab"][aria-selected="true"] .tab__ico { background: var(--luz-ambar); color: var(--noche-900, #0E1014); }
.tabs__lente { position: absolute; left: 0; top: 0; z-index: 0; width: var(--w0, 0); height: var(--h0, 0); border-radius: var(--r-tarjeta); background: linear-gradient(135deg, #1B2230 0%, #0E1014 100%); box-shadow: 0 12px 24px -12px rgba(14, 16, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .08); transform-origin: 0 0; transform: translate(var(--x, 0), var(--y, 0)) scale(var(--sx, 1), var(--sy, 1)); transition: transform 340ms cubic-bezier(0.77, 0, 0.175, 1); pointer-events: none; }
.tabs__lente[data-quieta] { transition: none; }
.servicios-tabs [role="tab"]:active { transform: scale(0.97); }
.servicios-tabs [role="tab"]:focus-visible { outline: 3px solid var(--foco, var(--luz-tinta)); outline-offset: 2px; }
@media (max-width: 767px) { .servicios-tabs__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; } .servicios-tabs [role="tab"] { min-height: 64px; padding: var(--s-2) var(--s-3); gap: var(--s-2); } .tab__ico { width: 34px; height: 34px; } .tab__ico .ico { width: 18px; height: 18px; } .tab__tit { font-size: 0.9375rem; font-stretch: 100%; letter-spacing: -0.008em; } .tab__sub { font-size: 12px; } }
@media (hover: hover) and (pointer: fine) { .servicios-tabs [role="tab"][aria-selected="false"]:hover .tab__ico { background: var(--luz-ambar-suave); color: var(--ink); transition-delay: 0s; } .servicios-tabs [role="tab"][aria-selected="false"]:hover .tab__tit { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .tabs__lente, .servicios-tabs [role="tab"], .servicios-tabs [role="tab"]::after, .tab__ico, .tab__tit, .tab__sub { transition: none; } .servicios-tabs [role="tab"]:active { transform: none; } }
/* control segmentado (vista del CRM) */
.seg { display: inline-flex; max-width: 100%; padding: 4px; gap: 2px; border-radius: var(--r-etiqueta); background: var(--dia-200); margin-top: var(--s-3); }
.seg[hidden] { display: none; }
.seg [role="radio"] { min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-etiqueta); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-6); font-weight: 600; cursor: pointer; touch-action: manipulation; transition: background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out); }
.seg [role="radio"][aria-checked="true"] { background: var(--dia-100); color: var(--ink); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra-corta); }
.seg [role="radio"]:focus-visible { outline: 3px solid var(--foco, var(--luz-tinta)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .seg [role="radio"][aria-checked="false"]:hover { color: var(--ink); } }
@media (min-width: 768px) { .seg [role="radio"] { padding: 0 var(--s-4); } }
.ficha__texto .ficha__nombre { margin: var(--s-3) 0 var(--s-3); font-family: var(--f-display); font-stretch: 118%; font-weight: 650; font-size: var(--t-3); line-height: var(--lh-3); letter-spacing: var(--ls-3); }
.proyectos .ficha { grid-row: auto; }

/* ---------- 9b: menos ruido ---------- */
@media (max-width: 767px) { .fase { padding: var(--s-3) var(--s-4); } }

/* Cambio de pestana (ciclo 11): el panel entrante llega desde 10 px mas abajo; el saliente se funde sin moverse. */
.mod--js .mod__escena > [data-panel]:not([data-activo="true"]) { transform: translateY(10px); }
.mod--js .mod__escena > [data-panel] { transition: opacity 240ms var(--ease-out), transform 280ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 240ms; }
.mod--js .mod__escena > [data-panel][data-activo="true"] { transform: none; transition: opacity 240ms var(--ease-out), transform 280ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .mod--js .mod__escena > [data-panel], .mod--js .mod__escena > [data-panel]:not([data-activo="true"]) { transform: none; transition: opacity 120ms linear, visibility 0s; } }