/* Data first: la postura de la marca. Tres capas que se encienden de abajo hacia arriba
   (el dato, el criterio, la IA) y la lista de lo que se cuadra contra la fuente. */
.datafirst { padding-block: clamp(64px, 10vh, 120px); }
.datafirst__grilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.datafirst .titulo em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cuadre { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.cuadre__titulo { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6) !important; margin-bottom: 14px; }
.cuadre__lista { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.cuadre__lista li { display: flex; gap: 10px; align-items: center; color: rgba(255,255,255,.85); font-size: 15px; }
.cuadre__lista i { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.3); display: grid; place-items: center; font-style: normal; font-size: 11px; flex-shrink: 0; transition: background .5s var(--curva), border-color .5s var(--curva); }
.cuadre__lista li.ok i { background: var(--grad); border-color: transparent; }
.cuadre__lista li.ok i::after { content: "✓"; color: #fff; }

.capas { list-style: none; display: grid; gap: 12px; position: relative; }
.capa { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: center; padding: 22px 24px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); opacity: .38; transform: translateY(8px);
  transition: opacity .6s var(--curva), transform .6s var(--curva), border-color .6s var(--curva), background .6s var(--curva); }
.capa.encendida { opacity: 1; transform: none; border-color: rgba(255,46,110,.5); background: rgba(255,255,255,.06); }
.capa__n { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; background: rgba(255,255,255,.08); color: #fff; transition: background .6s var(--curva); }
.capa.encendida .capa__n { background: var(--grad); }
.capa h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.capa .capa__txt p { font-size: 14.5px; margin-top: 6px; line-height: 1.45; }
.capa__puntos { width: 100%; height: 64px; display: block; }
.capa__puntos circle { fill: rgba(255,255,255,.45); transition: transform 1.4s var(--curva), fill 1s var(--curva); }
.capa__puntos.orden circle { transform: none !important; fill: #FF2E6E; }
.capa__puntos.orden circle:nth-child(3n) { fill: #FF00B8; }
.capa__puntos.orden circle:nth-child(5n) { fill: #FF3B00; }
.capa__vis--dic code { display: block; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.8); padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.capa__vis--dic b { color: #fff; font-weight: 500; }
.capa__vis--ia { display: grid; gap: 6px; }
.burbuja { justify-self: start; font-size: 12.5px; line-height: 1.35; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.burbuja--r { justify-self: end; border-radius: 12px 12px 4px 12px; background: var(--grad); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--curva) .5s, transform .5s var(--curva) .5s; }
.capa.encendida .burbuja--r { opacity: 1; transform: none; }

@media (max-width: 1000px) { .datafirst__grilla { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .capa { grid-template-columns: 44px minmax(0, 1fr); padding: 18px; }
  .capa__vis { grid-column: 1 / -1; }
  .cuadre__lista { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .capa { opacity: 1; transform: none; } .burbuja--r { opacity: 1; transform: none; } }

/* portada: credenciales en texto, sin cápsulas */
.portada__credencial { margin-top: 40px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
.portada__para-txt { margin-top: 8px; font-size: 14.5px; color: var(--gris); }
.flota__ejemplo { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); }
.rubros-txt { margin-top: 36px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); text-align: center; }
.firma { margin-top: 26px; font-size: 14px; color: rgba(255,255,255,.6); }
.firma a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); }

/* servicios en pestañas: una demo a la vez */
.svc-indice--pestanas a { cursor: pointer; }
.svc-indice--pestanas a[aria-selected="true"] { border-color: var(--svc); box-shadow: 0 24px 50px -32px var(--svc); background: var(--svc-suave); }
.svc-indice--pestanas a[aria-selected="true"] .svc-indice__flecha { transform: rotate(90deg); color: var(--svc); }
.svc-indice__flecha { margin-left: auto; transition: transform .5s var(--curva); }
.fila-servicio[hidden] { display: none !important; }
.fila-servicio:not([hidden]) { animation: pestana .6s var(--curva); }
@keyframes pestana { from { opacity: 0; transform: translateY(10px); } }
.datafirst h2 { font-size: clamp(40px, 5vw, 70px); margin: 22px 0 24px; max-width: 12ch; }
.portada__para-txt { margin-top: 28px; }