/* Páginas de servicio (caos·datos, caos·panel, caos·sistema): portada con la demo grande y
   escenas alternadas, cada una con su animación. Se apoya en nueva.css, nueva-producto.css y nueva-demos.css. */

.svc-portada { padding-top: clamp(110px, 15vh, 150px); padding-bottom: clamp(32px, 5vh, 56px); position: relative; overflow: hidden; }
.svc-portada__grilla { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.svc-volver { display: inline-block; font-size: 14px; color: var(--gris); margin-bottom: 18px; }
.svc-volver:hover { color: var(--tinta); }
.svc-portada h1 { font-size: clamp(42px, min(5.4vw, 9vh), 88px); margin: 16px 0 16px; }
.svc-portada .servicio__cita { margin-bottom: 4px; }
.svc-otros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.svc-otros a { font-size: 13.5px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco); color: var(--gris); transition: color .4s var(--curva), border-color .4s var(--curva); }
.svc-otros a:hover, .svc-otros a.actual { color: var(--tinta); border-color: var(--tinta); }

/* escenas */
.escena-fila { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 4vw, 64px); align-items: center; padding: clamp(28px, 5vh, 52px) 0; }
.escena-fila + .escena-fila { border-top: 1px solid var(--linea); }
.escena-fila--inversa { grid-template-columns: 1.2fr .8fr; }
.escena-fila--inversa .escena-fila__texto { order: 2; }
.escena-fila__texto h2 { font-family: var(--display); font-size: clamp(28px, min(2.8vw, 5vh), 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; margin: 12px 0 12px; }
.escena-fila__texto h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.escena-fila__texto p { color: var(--gris); }
.escena-fila__num { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-2); }
.g--alto { height: clamp(220px, 32vh, 300px); }
.g--medio { height: clamp(190px, 26vh, 250px); }
.g--chico { height: clamp(140px, 18vh, 180px); }
.estado-escena { font-family: var(--mono); font-size: 10.5px; color: var(--rosa); }

/* dashboard que se arma solo */
.tablero { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tablero > * { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .6s var(--curva), transform .8s var(--curva); }
.tablero > .on { opacity: 1; transform: none; }
.tablero .kpi-t { grid-column: span 2; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; }
.tablero .kpi-t span { font-size: 11px; color: var(--gris-2); display: block; }
.tablero .kpi-t strong { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.tablero .kpi-t em { font-style: normal; font-size: 11px; display: block; }
.tablero .widget { grid-column: span 3; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px 4px; min-width: 0; }
.tablero .widget--ancho { grid-column: span 6; }
.tablero .widget p { font-size: 12px; font-weight: 500; }
.tablero .g { height: clamp(120px, 16vh, 160px); }
.cursor-armado { font-family: var(--mono); font-size: 10.5px; color: var(--gris-2); }

/* sistema con módulos que rotan */
.app { display: grid; grid-template-columns: 150px 1fr; min-height: clamp(330px, 46vh, 420px); }
.app__lado { background: #0f0f12; color: rgba(255,255,255,.6); padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.app__marca { font-family: var(--display); font-weight: 700; color: #fff; padding: 0 10px 14px; font-size: 15px; }
.app__marca span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.app__item { padding: 9px 10px; border-radius: 10px; transition: background .5s var(--curva), color .5s var(--curva); }
.app__item.on { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 3px 0 0 var(--rosa); }
.app__vista { padding: 16px 18px; display: none; min-width: 0; }
.app__vista.on { display: block; animation: entraVista .7s var(--curva); }
@keyframes entraVista { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.app__titulo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.app__titulo b { font-family: var(--display); font-size: 18px; letter-spacing: -.02em; }
.app__titulo span { font-size: 11.5px; color: var(--gris-2); }
.fichas { display: grid; gap: 6px; }
.ficha { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linea); font-size: 12.5px; }
.ficha i { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 600; font-size: 12px; }
.ficha small { display: block; color: var(--gris-2); font-size: 11px; }
.ficha em { font-style: normal; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--fondo); }
.ficha em.ok { color: #138a55; background: rgba(31,191,117,.1); } .ficha em.mal { color: #b0164f; background: rgba(255,46,110,.1); }

/* roles: la misma pantalla vista por tres personas */
.roles-demo__tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.roles-demo__tabs span { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); color: var(--gris); transition: all .5s var(--curva); }
.roles-demo__tabs span.on { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.roles-demo__fila { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--linea); font-size: 12.5px; transition: opacity .5s var(--curva), filter .5s var(--curva); }
.roles-demo__fila.oculta { opacity: .12; filter: blur(3px); }

/* reglas que se activan */
.reglas { display: grid; gap: 8px; }
.regla { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea); background: #fff; font-size: 13px; }
.regla__check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--linea); display: grid; place-items: center; font-size: 12px; color: transparent; transition: all .5s var(--curva); }
.regla.on .regla__check { background: var(--grad); border-color: transparent; color: #fff; }
.regla small { color: var(--gris-2); font-size: 11px; display: block; }
.regla b { font-family: var(--mono); font-size: 11px; color: var(--rosa); font-weight: 500; }

/* WhatsApp que llega */
.chat { background: #efe7de; border-radius: 16px; padding: 14px; display: grid; gap: 8px; min-height: 260px; align-content: end; }
.chat__msg { max-width: 82%; background: #fff; border-radius: 12px 12px 12px 3px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 1px 1px rgba(0,0,0,.08); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--curva), transform .6s var(--curva); }
.chat__msg.on { opacity: 1; transform: none; }
.chat__msg--yo { justify-self: end; background: #d9fdd3; border-radius: 12px 12px 3px 12px; }
.chat__msg b { display: block; color: #128c4a; font-size: 11px; }
.chat__msg small { display: block; text-align: right; color: #8696a0; font-size: 10px; margin-top: 2px; }

/* entregables */
.entregables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.entregable { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 20px; }
.entregable span { font-family: var(--mono); font-size: 11px; color: var(--rosa); letter-spacing: .12em; }
.entregable h3 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 14px 0 6px; }
.entregable p { color: var(--gris); font-size: 14px; }

/* tarjetas de la portada que llevan a cada servicio */
.enlaces-servicio { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.enlace--suave { color: var(--gris); border-bottom-color: var(--linea); }

@media (max-width: 1100px) {
  .svc-portada__grilla, .escena-fila, .escena-fila--inversa { grid-template-columns: 1fr; }
  .escena-fila--inversa .escena-fila__texto { order: 0; }
  .entregables { grid-template-columns: 1fr 1fr; }
  .app { grid-template-columns: 1fr; }
  .app__lado { flex-direction: row; overflow-x: auto; }
  .app__marca { display: none; }
}
@media (max-width: 640px) {
  .entregables { grid-template-columns: 1fr; }
  .tablero { grid-template-columns: 1fr 1fr; }
  .tablero .kpi-t { grid-column: span 1; }
  .tablero .widget, .tablero .widget--ancho { grid-column: span 2; }
}