/* Escenas 3D animadas (solo CSS, sin imágenes). Aprobadas por Piero el 30 oct 2026.
   .t3-cab = cabecera de bloque en dos columnas (texto + escena); en el celular la escena va debajo. */

.t3-cab { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: center; margin-bottom: 54px; }
.t3-cab .bloque-cab { margin-bottom: 0; }
.t3-escena { position: relative; overflow: hidden; max-width: 100%; width: 420px; height: 440px; perspective: 1200px; display: flex; align-items: center; justify-content: center; font-family: var(--cuerpo); }
.t3-escena * { box-sizing: border-box; }
.t3-dato { font-size: 9px; font-weight: 700; background: var(--ambar); color: #3b2a05; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
@media (max-width: 960px) {
  .t3-cab { grid-template-columns: 1fr; gap: 8px; }
  .t3-cab .t3-escena { margin: 0 auto; }
}
@media (max-width: 460px) {
  .t3-cab .t3-escena { width: 100%; height: 360px; }
  .t3-cab .t3-escena > * { transform: scale(.8); }
}

/* ---------- Portada: celular (solo pantallas grandes) ---------- */
.t3-hero { overflow: visible; position: absolute; right: max(24px, calc((100% - var(--ancho)) / 2 + 40px)); top: 50%; transform: translateY(-50%); z-index: 1; width: 340px; }
.t3-hero .t3-flota-a { left: auto; right: -70px; top: 30px; }
.t3-hero .t3-flota-b { right: -90px; bottom: 40px; }
@media (min-width: 1181px) {
  .hero-in { max-width: var(--ancho); }
  .hero-in > * { max-width: 640px; }
  .hero h1 { font-size: clamp(40px, 4.7vw, 66px); }
}
@media (max-width: 1180px) { .t3-hero { display: none; } }

@keyframes t3-girar { 0%,100% { transform: rotateY(-24deg) rotateX(10deg) translateY(0); } 50% { transform: rotateY(-8deg) rotateX(6deg) translateY(-14px); } }
@keyframes t3-flotarA { 0%,100% { transform: translateZ(90px) translateY(0); } 50% { transform: translateZ(90px) translateY(-18px); } }
@keyframes t3-flotarB { 0%,100% { transform: translateZ(130px) translateY(0); } 50% { transform: translateZ(130px) translateY(16px); } }
@keyframes t3-barra { 0%,100% { height: 20%; } 50% { height: var(--h); } }
.t3-tel { position: relative; width: 230px; height: 460px; transform-style: preserve-3d; animation: t3-girar 7s ease-in-out infinite; }
.t3-tel-cuerpo { position: absolute; inset: 0; border-radius: 36px; background: #0b1320; border: 3px solid #2a3442; box-shadow: 0 40px 80px rgba(0,0,0,.55), inset 0 0 0 6px #070c16; overflow: hidden; }
.t3-tel-pantalla { margin: 13px; height: calc(100% - 26px); border-radius: 26px; background: #f3f7f6; color: #0b1320; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.t3-tel-top { display: flex; justify-content: space-between; align-items: center; }
.t3-tel-top b { font: 800 15px var(--titulo); color: var(--marca); }
.t3-tel-sub { margin: 0; font-size: 11px; color: #5b6675; }
.t3-tj { background: #fff; border-radius: 13px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 2px 6px rgba(0,0,0,.06); font-size: 10px; color: #5b6675; }
.t3-tj b { font: 800 20px var(--titulo); color: #0b1320; }
.t3-tj-verde { background: var(--marca); color: rgba(255,255,255,.85); }
.t3-tj-verde b { color: #fff; font-size: 18px; }
.t3-tj-fila { flex-direction: row; justify-content: space-between; font-size: 11px; color: #0b1320; }
.t3-tj-fila em { font-style: normal; color: var(--marca); font-weight: 700; }
.t3-barras { height: 84px; flex-direction: row; align-items: flex-end; gap: 7px; }
.t3-barras i { flex: 1; border-radius: 4px; background: var(--marca-claro); animation: t3-barra 4s ease-in-out infinite; }
.t3-barras i:nth-child(2n) { background: var(--marca); }
.t3-barras i:nth-child(1) { --h: 60%; } .t3-barras i:nth-child(2) { --h: 85%; animation-delay: .5s; }
.t3-barras i:nth-child(3) { --h: 45%; animation-delay: 1s; } .t3-barras i:nth-child(4) { --h: 95%; animation-delay: 1.5s; }
.t3-barras i:nth-child(5) { --h: 70%; animation-delay: 2s; }
.t3-flota { position: absolute; width: 160px; border-radius: 16px; padding: 12px 14px; box-shadow: 0 24px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.t3-flota b { font: 800 16px var(--titulo); }
.t3-flota-a { left: -110px; top: 70px; background: #fff; color: #0b1320; animation: t3-flotarA 5s ease-in-out infinite; }
.t3-flota-a em { font-style: normal; color: var(--marca); font-weight: 700; }
.t3-flota-b { right: -100px; bottom: 80px; background: var(--ambar); color: #2b1e03; animation: t3-flotarB 6s ease-in-out infinite; }

/* ---------- Plataforma: capas ---------- */
@keyframes t3-rotar { 0%,100% { transform: rotateX(58deg) rotateZ(-40deg); } 50% { transform: rotateX(58deg) rotateZ(-30deg); } }
@keyframes t3-c2 { 0%,15%,85%,100% { transform: translateZ(14px); } 40%,60% { transform: translateZ(60px); } }
@keyframes t3-c3 { 0%,15%,85%,100% { transform: translateZ(28px); } 40%,60% { transform: translateZ(120px); } }
@keyframes t3-c4 { 0%,15%,85%,100% { transform: translateZ(42px); } 40%,60% { transform: translateZ(180px); } }
.t3-pila { position: relative; width: 230px; height: 230px; margin-top: 110px; transform-style: preserve-3d; animation: t3-rotar 10s ease-in-out infinite; }
.t3-placa { position: absolute; inset: 0; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 800 21px var(--titulo); }
.t3-p1 { background: var(--marca); color: #fff; box-shadow: 0 0 0 2px var(--marca-claro) inset, 0 30px 50px rgba(0,0,0,.5); }
.t3-p2 { background: rgba(47,191,163,.9); color: #062a24; box-shadow: 0 0 0 2px #bff1e6 inset; animation: t3-c2 6s ease-in-out infinite; }
.t3-p3 { background: rgba(224,168,58,.93); color: #2b1e03; box-shadow: 0 0 0 2px #f6dca6 inset; animation: t3-c3 6s ease-in-out infinite; }
.t3-p4 { background: rgba(243,247,246,.96); color: var(--marca); box-shadow: 0 0 0 2px #fff inset; animation: t3-c4 6s ease-in-out infinite; }

/* ---------- Contadores: laptop y comprobantes ---------- */
@keyframes t3-caer { 0% { transform: translate3d(0,-230px,120px) rotateX(40deg) rotateZ(-8deg); opacity: 0; } 15% { opacity: 1; } 60% { transform: translate3d(0,0,0); opacity: 1; } 85%,100% { transform: translate3d(0,40px,-20px) scale(.6); opacity: 0; } }
@keyframes t3-vaiven { 0%,100% { transform: rotateX(18deg) rotateY(-22deg); } 50% { transform: rotateX(14deg) rotateY(-12deg); } }
@keyframes t3-pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(47,191,163,.55); } 50% { box-shadow: 0 0 0 10px rgba(47,191,163,0); } }
.t3-docs { position: absolute; top: 20px; left: 140px; width: 130px; height: 170px; }
.t3-doc { position: absolute; inset: 0; background: #fff; border-radius: 10px; box-shadow: 0 12px 24px rgba(0,0,0,.35); padding: 11px; display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: #0b1320; animation: t3-caer 3.6s ease-in infinite; }
.t3-doc b { font: 800 11px var(--titulo); color: var(--marca); }
.t3-doc span { height: 6px; background: #e2e9e7; border-radius: 3px; }
.t3-doc span + span { width: 70%; }
.t3-doc strong { margin-top: auto; }
.t3-doc:nth-child(2) { animation-delay: 1.2s; } .t3-doc:nth-child(2) b { color: var(--rojo); }
.t3-doc:nth-child(3) { animation-delay: 2.4s; }
.t3-lap { position: relative; width: 360px; height: 240px; margin-top: 140px; transform-style: preserve-3d; animation: t3-vaiven 8s ease-in-out infinite; }
.t3-lap-tapa { position: absolute; left: 0; right: 0; top: 0; height: 215px; background: #1a2433; border-radius: 14px 14px 4px 4px; padding: 10px; transform-origin: bottom; transform: rotateX(-8deg); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.t3-lap-pantalla { height: 100%; background: #fff; border-radius: 7px; padding: 12px; display: flex; flex-direction: column; gap: 8px; color: #0b1320; }
.t3-lap-pantalla > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.t3-lap-pantalla > div:first-child b { font: 800 13px var(--titulo); color: var(--marca); }
.t3-baja { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.t3-baja i { width: 9px; height: 9px; border-radius: 50%; background: var(--marca-claro); animation: t3-pulso 1.8s ease-out infinite; }
.t3-cifras { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; font-size: 10px; }
.t3-cifras div { background: #eaf7f3; border-radius: 7px; padding: 6px 7px; }
.t3-cifras b { display: block; font: 800 17px var(--titulo); color: var(--marca); }
.t3-cifras div:last-child { background: #fdf6e8; } .t3-cifras div:last-child b { color: #9a6a10; }
.t3-lap-pantalla > span { height: 7px; background: #e2e9e7; border-radius: 4px; }
.t3-lap-base { position: absolute; left: -26px; right: -26px; bottom: 0; height: 26px; background: linear-gradient(#cfd8d6, #a9b5b2); border-radius: 4px 4px 16px 16px; box-shadow: 0 20px 30px rgba(0,0,0,.35); }

/* ---------- Al día: rueda de vencimientos ---------- */
@keyframes t3-rueda { from { transform: rotateX(-8deg) rotateY(0); } to { transform: rotateX(-8deg) rotateY(-360deg); } }
@keyframes t3-check { 0%,30% { transform: scale(0); } 45% { transform: scale(1.25); } 55%,100% { transform: scale(1); } }
.t3-rueda { position: relative; width: 170px; height: 220px; transform-style: preserve-3d; animation: t3-rueda 16s linear infinite; }
.t3-carta { position: absolute; inset: 0; background: #fff; color: #0b1320; border-radius: 16px; box-shadow: 0 24px 40px rgba(0,0,0,.35); overflow: hidden; display: flex; flex-direction: column; backface-visibility: hidden; }
.t3-carta:nth-child(1) { transform: rotateY(0) translateZ(150px); }
.t3-carta:nth-child(2) { transform: rotateY(90deg) translateZ(150px); }
.t3-carta:nth-child(3) { transform: rotateY(180deg) translateZ(150px); }
.t3-carta:nth-child(4) { transform: rotateY(270deg) translateZ(150px); }
.t3-carta > b { font: 800 13px var(--titulo); padding: 9px 13px; background: var(--marca); color: #fff; }
.t3-carta:nth-child(2) > b { background: var(--ambar); color: #2b1e03; }
.t3-carta:nth-child(3) > b { background: #0b1320; }
.t3-carta:nth-child(4) > b { background: var(--marca-claro); color: #062a24; }
.t3-carta > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 8px; }
.t3-carta strong { font: 800 44px/1 var(--titulo); }
.t3-carta span { font-size: 12px; font-weight: 600; }
.t3-carta i { width: 30px; height: 30px; border-radius: 50%; background: var(--marca-claro); color: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; animation: t3-check 4s ease-out infinite; }
.t3-carta:nth-child(2) i { animation-delay: 1s; } .t3-carta:nth-child(3) i { animation-delay: 2s; } .t3-carta:nth-child(4) i { animation-delay: 3s; }

/* Quien pide menos movimiento en su equipo: escenas quietas */
@media (prefers-reduced-motion: reduce) {
  .t3-escena *, .t3-escena { animation: none !important; }
  .t3-doc:not(:first-child) { display: none; }
}