/* ══════════════════════════════════════════════════════════════════════
   GstarCAD 365 — COLOR Y MOVIMIENTO (se carga después de 365.css)

   Paleta de acento: azul real + violeta + cian + turquesa + ámbar + rosa.
   Efectos al estilo del sitio de GstarCAD: titular palabra por palabra,
   palabra rotativa, contadores, apariciones al hacer scroll, brillos y
   flotación. El JS que los activa está en partials/fx365.html.
   Todo el movimiento se apaga con prefers-reduced-motion (al final).
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --violet: #7c3aed;
    --cyan-2: #06b6d4;
    --teal:   #14b8a6;
    --amber:  #f59e0b;
    --pink:   #ec4899;
}

/* Barra de progreso de lectura */
#progress365 { position: fixed; top: 0; left: 0; z-index: 60; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #1557ff, #7c3aed, #06b6d4); pointer-events: none; }

/* Texto con degradado */
.h2-365 .hl { background: linear-gradient(90deg, #1557ff, #7c3aed 60%, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Botón con destello */
.b365-shine { position: relative; overflow: hidden; background: linear-gradient(135deg, #1557ff, #4f46e5 55%, #7c3aed); }
.b365-shine::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: shine 3.6s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* ───────── HERO ───────── */
.hero365 { background: linear-gradient(180deg, #e8f0ff 0%, #f1edff 55%, #ffffff 100%); }
.aurora365 { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aurora365 i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; will-change: transform; }
.aurora365 .a1 { width: 560px; height: 560px; left: -140px; top: -180px; background: radial-gradient(circle, #7aa2ff, transparent 65%); animation: drift-a 18s ease-in-out infinite; }
.aurora365 .a2 { width: 620px; height: 620px; right: -160px; top: -120px; background: radial-gradient(circle, #c4b5fd, transparent 65%); animation: drift-b 22s ease-in-out infinite; }
.aurora365 .a3 { width: 480px; height: 480px; left: 35%; bottom: -260px; background: radial-gradient(circle, #a5f3fc, transparent 65%); animation: drift-c 20s ease-in-out infinite; }
@keyframes drift-a { 50% { transform: translate(80px, 60px) scale(1.1); } }
@keyframes drift-b { 50% { transform: translate(-90px, 70px) scale(1.05); } }
@keyframes drift-c { 50% { transform: translate(60px, -80px) scale(1.12); } }
.bp-draw path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: bp-draw 4s .2s ease-out forwards; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }

.kicker-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 9999px; background: rgba(255,255,255,.75); border: 1px solid #c7d7ff; box-shadow: 0 6px 18px -12px rgba(21,87,255,.6); backdrop-filter: blur(6px); }
.live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #10b981; animation: live 2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 100% { box-shadow: 0 0 0 9px rgba(16,185,129,0); } }

/* Titular palabra por palabra (las palabras las arma fx365.html) */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
[data-split] .w > span { display: inline-block; transform: translateY(115%); animation: w-up .9s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s); }
@keyframes w-up { to { transform: translateY(0); } }

/* Palabra rotativa del titular (5 elementos: el último repite el primero) */
.rot365 { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; opacity: 0; animation: rise .7s .95s forwards; }
.rot365-track { display: flex; flex-direction: column; animation: rot365 14s 2s cubic-bezier(.83,0,.17,1) infinite; }
.rot365-track > span { display: block; height: 1.2em; line-height: 1.2em; white-space: nowrap; background: linear-gradient(90deg, #1557ff, #7c3aed 55%, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes rot365 { 0%, 18% { transform: translateY(0); } 25%, 43% { transform: translateY(-1.2em); } 50%, 68% { transform: translateY(-2.4em); } 75%, 93% { transform: translateY(-3.6em); } 100% { transform: translateY(-4.8em); } }

.hero-copy > * { opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.22,1,.36,1) forwards; }
.hero-copy > :nth-child(1) { animation-delay: .1s; }
.hero-copy > :nth-child(2) { opacity: 1; transform: none; animation: none; }
.hero-copy > :nth-child(3) { animation-delay: 1.1s; }
.hero-copy > :nth-child(4) { animation-delay: 1.3s; }
.hero-copy > :nth-child(5) { animation-delay: 1.5s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Dispositivos: entran, flotan y siguen al mouse (parallax en fx365.html) */
.devices { transition: transform .3s ease-out; }
.laptop { animation: dev-in 1s .4s cubic-bezier(.22,1,.36,1) both, float 7s 1.4s ease-in-out infinite; }
.tablet { animation: dev-in 1s .7s cubic-bezier(.22,1,.36,1) both, float 6s 1.7s ease-in-out infinite; }
.phone  { animation: dev-in 1s .95s cubic-bezier(.22,1,.36,1) both, float 5s 1.95s ease-in-out infinite; }
@keyframes dev-in { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes float { 50% { transform: translateY(-10px); } }
.laptop-screen::after { content: ""; position: absolute; inset: 4%; z-index: -1; border-radius: 1rem; background: linear-gradient(135deg, #1557ff, #7c3aed, #06b6d4); filter: blur(40px); opacity: .55; }
.tagc { opacity: 0; transform: translateY(6px) scale(.9); animation: tag-pop .5s var(--d, 1.5s) cubic-bezier(.2,.8,.2,1.4) forwards; }
@keyframes tag-pop { to { opacity: 1; transform: none; } }
.cur { position: absolute; z-index: 3; width: 13px; height: 13px; top: 0; left: 0; }
.cur svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.cur-1 { animation: cur-1 9s ease-in-out infinite; }
.cur-2 { animation: cur-2 11s ease-in-out infinite; }
@keyframes cur-1 { 0% { transform: translate(40px, 40px); } 30% { transform: translate(150px, 30px); } 60% { transform: translate(170px, 120px); } 100% { transform: translate(40px, 40px); } }
@keyframes cur-2 { 0% { transform: translate(220px, 140px); } 35% { transform: translate(90px, 120px); } 70% { transform: translate(120px, 60px); } 100% { transform: translate(220px, 140px); } }
.cadui-com .c { animation: tag-pop .5s cubic-bezier(.2,.8,.2,1.2) both; }
.cadui-com .c:nth-of-type(1) { animation-delay: 1.8s; }
.cadui-com .c:nth-of-type(2) { animation-delay: 2.4s; }
.cadui-com .c:nth-of-type(3) { animation-delay: 3.1s; }
.cadui-com .c:nth-of-type(4) { animation-delay: 3.6s; }
.dots3 { display: inline-flex; gap: 3px; align-items: center; padding: 3px 2px; }
.dots3 b { width: 4px; height: 4px; border-radius: 50%; background: #94a3b8; animation: dot 1.2s ease-in-out infinite; }
.dots3 b:nth-child(2) { animation-delay: .15s; }
.dots3 b:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { transform: translateY(-3px); background: #1557ff; } }
.handnote365 { animation: fade-in 1s 3.4s both; }   /* sólo opacidad: la nota va rotada */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ───────── CIFRAS ───────── */
.stats365 { position: relative; z-index: 2; padding: 0 1.25rem; margin-top: -1rem; }
.stats365-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border-radius: 1.1rem; overflow: hidden; background: linear-gradient(135deg, #c7d7ff, #ddd6fe, #a5f3fc); box-shadow: 0 30px 60px -36px rgba(21,87,255,.55); }
@media (min-width: 900px) { .stats365-grid { grid-template-columns: repeat(4, 1fr); } }
.stat365 { padding: 1.6rem 1.25rem; background: rgba(255,255,255,.97); text-align: center; }
.stat365 b { display: block; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat365 > span { display: block; margin-top: .5rem; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.grad-a { background-image: linear-gradient(135deg, #1557ff, #3b82f6); }
.grad-b { background-image: linear-gradient(135deg, #7c3aed, #a855f7); }
.grad-c { background-image: linear-gradient(135deg, #0891b2, #06b6d4); }
.grad-d { background-image: linear-gradient(135deg, #db2777, #f59e0b); }

/* ───────── FUNCIONES: íconos de color, foco que sigue al mouse ───────── */
#funciones { background: radial-gradient(600px 300px at 100% 0%, rgba(124,58,237,.07), transparent 70%), radial-gradient(600px 300px at 0% 100%, rgba(6,182,212,.07), transparent 70%), #fff; }
.feat { position: relative; overflow: hidden; isolation: isolate; }
.feat::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(124,58,237,.11), transparent 60%); }
.feat:hover::before { opacity: 1; }
.feat::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.22,1,.36,1); background: var(--fc, linear-gradient(90deg, #1557ff, #7c3aed)); }
.feat:hover::after { transform: scaleX(1); }
.feat .ic { color: #fff; transition: transform .4s cubic-bezier(.2,.8,.2,1.4); }
.feat:hover .ic { transform: rotate(-8deg) scale(1.1); }
.feat .go { transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease; }
.feat:hover .go { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateX(3px); }
.feat-grid .feat:nth-child(1) { --fc: linear-gradient(90deg, #1557ff, #3b82f6); }
.feat-grid .feat:nth-child(1) .ic { background: linear-gradient(135deg, #1557ff, #3b82f6); box-shadow: 0 10px 22px -10px rgba(21,87,255,.8); }
.feat-grid .feat:nth-child(2) { --fc: linear-gradient(90deg, #7c3aed, #a855f7); }
.feat-grid .feat:nth-child(2) .ic { background: linear-gradient(135deg, #7c3aed, #a855f7); box-shadow: 0 10px 22px -10px rgba(124,58,237,.8); }
.feat-grid .feat:nth-child(3) { --fc: linear-gradient(90deg, #0891b2, #06b6d4); }
.feat-grid .feat:nth-child(3) .ic { background: linear-gradient(135deg, #0891b2, #22d3ee); box-shadow: 0 10px 22px -10px rgba(6,182,212,.8); }
.feat-grid .feat:nth-child(4) { --fc: linear-gradient(90deg, #0d9488, #14b8a6); }
.feat-grid .feat:nth-child(4) .ic { background: linear-gradient(135deg, #0d9488, #2dd4bf); box-shadow: 0 10px 22px -10px rgba(20,184,166,.8); }
.feat-grid .feat:nth-child(5) { --fc: linear-gradient(90deg, #d97706, #f59e0b); }
.feat-grid .feat:nth-child(5) .ic { background: linear-gradient(135deg, #d97706, #fbbf24); box-shadow: 0 10px 22px -10px rgba(245,158,11,.8); }
.feat-grid .feat:nth-child(6) { --fc: linear-gradient(90deg, #db2777, #ec4899); }
.feat-grid .feat:nth-child(6) .ic { background: linear-gradient(135deg, #db2777, #f472b6); box-shadow: 0 10px 22px -10px rgba(236,72,153,.8); }

/* ───────── PLATAFORMAS: sección oscura con tarjetas de vidrio ───────── */
.s365-dark { overflow: hidden; color: #cbd5e1; background: radial-gradient(900px 500px at 10% 0%, rgba(21,87,255,.35), transparent 60%), radial-gradient(800px 500px at 100% 100%, rgba(124,58,237,.35), transparent 60%), linear-gradient(180deg, #071233, #0b1a4a); }
.s365-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.s365-dark .kicker { color: #8fb0ff; }
.s365-dark .h2-365 { color: #fff; }
.s365-dark .sec-head p { color: #a9b6d3; }
.glow-blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; animation: drift-a 16s ease-in-out infinite; }
.glow-blob.g1 { width: 380px; height: 380px; left: 8%; top: 30%; background: rgba(6,182,212,.25); }
.glow-blob.g2 { width: 420px; height: 420px; right: 5%; top: 10%; background: rgba(124,58,237,.25); animation-name: drift-b; }
.s365-dark .wrap { position: relative; }
.s365-dark .plat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); backdrop-filter: blur(8px); transition: transform .2s ease-out, box-shadow .3s ease, border-color .3s ease; }
.s365-dark .plat:hover { border-color: rgba(143,176,255,.5); box-shadow: 0 30px 60px -30px rgba(21,87,255,.8); }
.s365-dark .plat .shot { background: radial-gradient(circle at 50% 100%, rgba(59,130,246,.35), transparent 70%); }
.s365-dark .plat h3 { color: #fff; }
.s365-dark .plat p { color: #a9b6d3; }
.s365-dark .plat .req { color: #7d8db0; }
.s365-dark .plat a.more { color: #8fb0ff; }
.s365-dark .plat .pic { background: linear-gradient(135deg, #1557ff, #7c3aed); color: #fff; box-shadow: 0 8px 20px -6px rgba(124,58,237,.8); }

/* ───────── FLUJO: línea que se llena y pasos que se encienden ───────── */
.flow { position: relative; }
.flow-step::before, .flow-step::after { display: none !important; }
.flow-line365 { display: none; }
@media (min-width: 900px) {
    .flow-line365 { display: block; position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; background: repeating-linear-gradient(90deg, #c7d7ff 0 6px, transparent 6px 12px); }
    .flow-line365 i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #1557ff, #7c3aed, #06b6d4); transition: transform 2.4s cubic-bezier(.65,0,.35,1); }
    .flow.on .flow-line365 i { transform: scaleX(1); }
}
.flow-step .ic { position: relative; z-index: 1; transition: background .5s ease, color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2,.8,.2,1.4); }
.flow-step.lit .ic { color: #fff; background: linear-gradient(135deg, #1557ff, #7c3aed); box-shadow: 0 0 0 6px #fff, 0 14px 30px -10px rgba(124,58,237,.8); transform: scale(1.08); }
.flow-step.lit .ic::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(124,58,237,.45); animation: ring 2s ease-out infinite; }
@keyframes ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ───────── SEGURIDAD ───────── */
.s365-violet { background: radial-gradient(700px 400px at 90% 50%, rgba(124,58,237,.13), transparent 70%), linear-gradient(180deg, #f5f1ff 0%, #f2f7ff 100%); }
.deploy { transition: transform .25s ease, box-shadow .25s ease; }
.deploy:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(124,58,237,.5); }
.sec-grid .deploy:nth-child(2) .ic { background: #f1e9ff; color: var(--violet); }
.shield-art svg { position: relative; z-index: 1; animation: float 6s ease-in-out infinite; }
.shield-art .ring { position: absolute; left: 50%; top: 46%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 2px solid rgba(21,87,255,.35); animation: ring-big 3.6s ease-out infinite; }
.shield-art .r2 { animation-delay: 1.2s; }
.shield-art .r3 { animation-delay: 2.4s; }
@keyframes ring-big { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.shield-art .badges { z-index: 2; }

/* ───────── CLIENTES ───────── */
#clientes { background: linear-gradient(180deg, #ffffff, #f4f8ff); }

/* ───────── CTA: degradado en movimiento y partículas ───────── */
.cta365 { background: linear-gradient(110deg, #071233, #0d2f86, #1557ff, #7c3aed, #0d2f86); background-size: 300% 100%; animation: cta-move 14s ease-in-out infinite alternate; }
@keyframes cta-move { to { background-position: 100% 0; } }
.particles { position: absolute; inset: 0; pointer-events: none; }
.particles i { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); animation: up 9s linear infinite; }
.particles i:nth-child(1)  { left: 6%;  animation-delay: 0s; }
.particles i:nth-child(2)  { left: 18%; animation-delay: 2s; width: 4px; height: 4px; }
.particles i:nth-child(3)  { left: 30%; animation-delay: 4s; }
.particles i:nth-child(4)  { left: 42%; animation-delay: 1s; width: 3px; height: 3px; }
.particles i:nth-child(5)  { left: 54%; animation-delay: 6s; }
.particles i:nth-child(6)  { left: 63%; animation-delay: 3s; width: 4px; height: 4px; }
.particles i:nth-child(7)  { left: 72%; animation-delay: 5s; }
.particles i:nth-child(8)  { left: 81%; animation-delay: 7s; width: 3px; height: 3px; }
.particles i:nth-child(9)  { left: 90%; animation-delay: 2.5s; }
.particles i:nth-child(10) { left: 96%; animation-delay: 8s; width: 4px; height: 4px; }
@keyframes up { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(-340px); opacity: 0; } }

/* ───────── Movimiento reducido: todo quieto y visible ───────── */
@media (prefers-reduced-motion: reduce) {
    .aurora365 i, .glow-blob, .b365-shine::after, .live, .rot365-track, .laptop, .tablet, .phone, .cur, .dots3 b, .shield-art svg, .shield-art .ring, .cta365, .particles i, .flow-step.lit .ic::after { animation: none !important; }
    .bp-draw path { stroke-dashoffset: 0; animation: none; }
    [data-split] .w > span, .hero-copy > *, .rot365, .tagc, .cadui-com .c, .handnote365 { animation: none !important; opacity: 1 !important; transform: none !important; }
    .cur-1 { transform: translate(150px, 30px); }
    .cur-2 { transform: translate(90px, 120px); }
    .flow-line365 i { transform: scaleX(1); transition: none; }
    .particles { display: none; }
}

/* En la sección oscura el degradado del título va en tonos claros */
.s365-dark .h2-365 .hl { background-image: linear-gradient(90deg, #8fb0ff, #c4b5fd 55%, #67e8f9); }

/* ───────── PARTNERS ─────────
   Misma interfaz que el sitio de GstarCAD (partials/partners.php copiado de
   gstarcad-landing-full). Dentro de la sección se restauran la fuente y los
   colores de la base, para que se vea igual que allá. */
#partners { font-family: 'MiSans', system-ui, -apple-system, 'Segoe UI', sans-serif; --brand: #4f46e5; --gold: #f59e0b; --gold-2: #f97316; --ink: #060b24; --muted: #475569; --line: #cbd5e1; }

/* ───────── PREGUNTAS FRECUENTES ───────── */
.faq365 { background: #fff; }
.faq365-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .faq365-grid { grid-template-columns: .85fr 1.3fr; gap: 3.5rem; align-items: start; } .faq365-grid > :first-child { position: sticky; top: 6rem; } }
.faq365-help { display: flex; gap: .9rem; margin-top: 1.75rem; padding: 1.25rem; border-radius: 1rem; background: linear-gradient(135deg, #eef4ff, #f3edff); border: 1px solid #d6e2ff; }
.faq365-help .ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #1557ff, #7c3aed); }
.faq365-help b { display: block; color: var(--ink); }
.faq365-help span { font-size: .875rem; color: var(--muted); }
.faq365-list { display: grid; gap: .7rem; }
.fq { border-radius: .9rem; background: #fff; border: 1px solid var(--line); transition: border-color .25s ease, box-shadow .25s ease; }
.fq.on { border-color: #bcd2ff; box-shadow: 0 18px 40px -28px rgba(21,87,255,.6); }
.fq-q { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1.05rem 1.2rem; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.fq-n { flex: none; font-size: .78rem; font-weight: 800; color: #9aaecf; transition: color .25s ease; }
.fq.on .fq-n { color: var(--brand); }
.fq-t { flex: 1; font-size: .975rem; font-weight: 700; color: var(--ink); }
.fq-i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #eef4ff; transition: background .25s ease, transform .35s ease; }
.fq-i::before, .fq-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px; background: var(--brand); transition: transform .35s ease, background .25s ease; }
.fq-i::after { transform: rotate(90deg); }
.fq.on .fq-i { background: linear-gradient(135deg, #1557ff, #7c3aed); transform: rotate(180deg); }
.fq.on .fq-i::before, .fq.on .fq-i::after { background: #fff; }
.fq.on .fq-i::after { transform: rotate(0deg); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1); }
.fq.on .fq-a { grid-template-rows: 1fr; }
.fq-a > div { overflow: hidden; }
.fq-a p { padding: 0 1.2rem 1.15rem 3.1rem; font-size: .9rem; line-height: 1.65; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .fq-a, .fq-i, .fq-i::before, .fq-i::after { transition: none; } }

/* ───────── CONTACTO ─────────
   Igual que en el sitio de GstarCAD: dentro de la sección se usan la fuente y
   los colores de la base (ícono de correo azul→cian, teléfonos ámbar, horario oscuro). */
#contacto { font-family: 'MiSans', system-ui, -apple-system, 'Segoe UI', sans-serif; --brand: #4f46e5; --brand-2: #6366f1; --cyan: #06b6d4; --gold: #f59e0b; --gold-2: #f97316; --ink: #060b24; --muted: #475569; --line: #cbd5e1; --surface: #eef2f7; --surface-cool: #dbe7ff; }

/* ───────── IMÁGENES DE DISEÑO ───────── */
/* Hero: imagen con bordes desvanecidos, flota y sigue al mouse */
.hero-art { position: relative; animation: dev-in 1s .4s cubic-bezier(.22,1,.36,1) backwards; transition: transform .3s ease-out; }
.hero-art img { display: block; width: 100%; height: auto; border-radius: 1.5rem; animation: float 7s 1.4s ease-in-out infinite; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.hero-badge365 { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 9999px; background: rgba(255,255,255,.92); box-shadow: 0 14px 30px -14px rgba(11,21,51,.45); font-size: .78rem; font-weight: 700; color: var(--ink); backdrop-filter: blur(6px); opacity: 0; animation: tag-pop .5s cubic-bezier(.2,.8,.2,1.4) forwards, float 6s ease-in-out infinite; }
.hero-badge365 i { width: 8px; height: 8px; border-radius: 50%; }
.hero-badge365.b1 { left: 4%; top: 14%; animation-delay: 1.6s, 2.2s; }
.hero-badge365.b2 { right: 6%; top: 4%; animation-delay: 2.3s, 2.9s; }
.hero-art .handnote365 { right: 0; bottom: -2%; }
@media (max-width: 640px) { .hero-badge365 { font-size: .68rem; } }

/* Plataformas: foto en la cabecera de cada tarjeta */
.plat .shot { height: 170px; padding: 0; overflow: hidden; }
.plat .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.plat:hover .shot img { transform: scale(1.06); }
.plat .pic { top: 148px; }
.s365-dark .plat .shot { background: none; }

/* Galería: filas 2 + 3 + 1 como el diseño de referencia */
.galeria365 { background: linear-gradient(180deg, #ffffff, #f4f8ff); }
.gal-rows { display: grid; gap: .9rem; }
.gal-row { display: flex; gap: .9rem; }
.gal { position: relative; flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); margin: 0; overflow: hidden; border-radius: 1rem; background: #0b1533; box-shadow: 0 20px 44px -30px rgba(11,21,51,.6); }
.gal img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.gal:hover img { transform: scale(1.05); }
.gal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); pointer-events: none; }
.gal figcaption { position: absolute; left: .9rem; bottom: .9rem; padding: .4rem .8rem; border-radius: 9999px; background: rgba(11,21,51,.72); color: #fff; font-size: .8rem; font-weight: 700; backdrop-filter: blur(6px); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.gal:hover figcaption { opacity: 1; transform: none; }
@media (max-width: 760px) {
    .gal-row { flex-direction: column; }
    .gal { flex: none; aspect-ratio: auto; }
    .gal img { height: auto; }
    .gal figcaption { opacity: 1; transform: none; font-size: .72rem; }
}

/* Seguridad: foto del escudo */
.shield-art img { position: relative; z-index: 1; display: block; width: 100%; max-width: 360px; border-radius: 1.25rem; animation: float 6s ease-in-out infinite; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%); }

/* CTA: foto de obra a la derecha, fundida con el degradado */
.cta365-art { min-height: 220px; align-self: stretch; margin: -2.5rem -1.75rem -2.5rem 0; }
.cta365-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%); }
.cta365-art .handnote365 { z-index: 2; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
@media (min-width: 900px) { .cta365-art { margin: -3rem -3.25rem -3rem 0; } }
@media (max-width: 899px) { .cta365-art { margin: 0 -1.75rem -2.5rem; } .cta365-art img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); } }

@media (prefers-reduced-motion: reduce) {
    .hero-art, .hero-art img, .hero-badge365, .shield-art img { animation: none !important; opacity: 1 !important; }
}

/* ───────── HERO CON FOTO DE FONDO Y DISPOSITIVOS EN CAPAS ───────── */
.hero365-photo { background: #f4f8ff; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }   /* fondo fijo: no se mueve ni hace zoom */
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 30%; }
/* velo claro a la izquierda para que el texto se lea sobre la foto */
.hero365-photo::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(244,248,255,.96) 0%, rgba(244,248,255,.82) 38%, rgba(244,248,255,.15) 65%, rgba(244,248,255,0) 100%), linear-gradient(0deg, #ffffff 0%, rgba(255,255,255,0) 22%); }
.hero365-photo .aurora365 { z-index: 0; opacity: .55; }
.hero365-photo .hero365-grid { z-index: 1; }

.hero-stack { position: relative; aspect-ratio: 1.3; }
.dev { position: absolute; display: block; height: auto; transition: transform .35s ease-out; will-change: transform; }
.dev-laptop { width: 86%; right: 0; top: 4%; filter: drop-shadow(0 40px 50px rgba(11,21,51,.35)); animation: dev-in 1s .35s cubic-bezier(.22,1,.36,1) backwards, float 8s 1.4s ease-in-out infinite; }
.dev-tablet { width: 48%; left: 0; bottom: 4%; filter: drop-shadow(0 30px 40px rgba(11,21,51,.35)); animation: dev-in-left 1s .7s cubic-bezier(.22,1,.36,1) backwards, float 6.5s 1.7s ease-in-out infinite; }
.dev-phone  { width: 19%; left: 42%; bottom: 0; filter: drop-shadow(0 30px 34px rgba(11,21,51,.45)); animation: dev-in-up 1s 1s cubic-bezier(.22,1,.36,1) backwards, float 5.5s 2s ease-in-out infinite; }
@keyframes dev-in-left { from { opacity: 0; transform: translateX(-60px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes dev-in-up   { from { opacity: 0; transform: translateY(80px) rotate(6deg); } to { opacity: 1; transform: none; } }
/* el parallax mueve una capa interna: el contenedor .dev flota, la variable --px/--py la desplaza */
.dev { translate: var(--px, 0) var(--py, 0); transition: translate .35s ease-out; }
.hero-stack .hero-badge365.b1 { left: 2%; top: 6%; }
.hero-stack .hero-badge365.b2 { right: 2%; top: -2%; }
.hero-stack .hero-badge365.b3 { left: 30%; bottom: 46%; animation-delay: 3s, 3.6s; }
.hero-stack .handnote365 { right: -6px; bottom: -4%; }
@media (max-width: 640px) { .hero-stack .hero-badge365.b3 { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-bg img, .dev { animation: none !important; } }
/* En pantallas angostas el texto va encima de los dispositivos: velo claro de arriba hacia abajo */
@media (max-width: 1023px) {
    .hero365-photo::before { background: linear-gradient(180deg, rgba(244,248,255,.95) 0%, rgba(244,248,255,.9) 55%, rgba(244,248,255,.35) 75%, #ffffff 100%); }
    .hero-bg img { object-position: 70% 100%; }
}
/* Orden de capas del hero: foto (0) → velo (1) → aurora (1) → contenido (2) */
.hero365-photo .hero-bg { z-index: 0; }
.hero365-photo::before { z-index: 1; }
.hero365-photo .aurora365 { z-index: 1; }
.hero365-photo .hero365-grid { z-index: 2; }
@media (max-width: 760px) { .gal-row:last-child .gal { aspect-ratio: 3; } .gal-row:last-child .gal img { height: 100%; object-position: 40% 50%; } }

/* ───────── SEGURIDAD: imagen recortada (PNG transparente) ─────────
   Columna más ancha, la imagen ocupa todo el ancho sin máscara, sobre un
   resplandor suave; las insignias van en fila debajo, sin tapar el dibujo. */
@media (min-width: 1024px) { .sec-grid { grid-template-columns: 1fr 1fr 1.25fr; align-items: center; } }
.shield-art { flex-direction: column; justify-content: center; gap: 1rem; min-height: 0; }
.shield-art img { width: 108%; max-width: none; margin: 0 -4%; border-radius: 0; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 30px 40px rgba(21,87,255,.25)); }
.shield-glow { position: absolute; left: 50%; top: 45%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.30), rgba(124,58,237,.12) 45%, transparent 70%); filter: blur(10px); pointer-events: none; animation: glow-pulse365 5s ease-in-out infinite; }
@keyframes glow-pulse365 { 50% { opacity: .65; transform: translate(-50%, -50%) scale(1.08); } }
.shield-art .badges { position: relative; right: auto; top: auto; transform: none; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
@media (max-width: 1023px) { .shield-art img { width: 100%; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .shield-glow { animation: none; } }

/* Contacto: horizonte de la ciudad como fondo (abajo, detrás del formulario),
   con un velo claro arriba para que el texto se lea. Las manchas de color
   decorativas de la base se ocultan. */
#contacto { background: linear-gradient(180deg, rgba(240,246,255,.92) 0%, rgba(240,246,255,.55) 40%, rgba(240,246,255,0) 75%), url('../images/365/contacto-fondo.jpg') center bottom / cover no-repeat, #eef5ff !important; }
#contacto .contacto-deco { display: none; }
@media (max-width: 1023px) { #contacto { background-size: auto, 220% auto, auto !important; background-position: 0 0, 70% 100%, 0 0 !important; } }

/* Formulario: el ancho incluye relleno y borde, así campos, área de texto y
   botón quedan alineados con el mismo borde y Email/Teléfono no se tocan. */
#contacto form, #contacto form *, #contacto form *::before, #contacto form *::after { box-sizing: border-box; }
#contacto form .field input:not([type="radio"]):not([type="checkbox"]), #contacto form .field textarea { display: block; max-width: 100%; }
#contacto form .field textarea { resize: vertical; }

/* Contacto más compacto: menos aire arriba/abajo, en la tarjeta y entre campos
   (el HTML sigue igual al de GstarCAD; se ajusta sólo desde acá). */
#contacto.section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
@media (min-width: 768px) { #contacto.section { padding-top: 5rem; padding-bottom: 5rem; } }
#contacto form { padding: 1.75rem 2rem !important; gap: .9rem !important; }
#contacto .field label.lbl { margin-bottom: .3rem; }
#contacto form .field input:not([type="radio"]):not([type="checkbox"]) { padding: .7rem .9rem; }
#contacto form .field textarea { padding: .7rem .9rem; height: 6rem; }
#contacto form .field > div[style*="column"] { gap: .35rem !important; }
#contacto form button[type="submit"] { padding: .85rem !important; }
#contacto form > p:last-child, #contacto form > :last-child { margin-top: 0; }
#contacto .wrap > div > div > div[style*="margin-top:2.5rem"] { margin-top: 1.75rem !important; gap: 1.1rem !important; }

/* ───────── Botón principal (Solicitar prueba gratis): efecto al pasar el mouse ─────────
   Antes el hover cambiaba el fondo a azul plano de golpe. Ahora: el degradado se
   desliza de azul a violeta, el botón sube, el resplandor crece, la flecha avanza
   y el destello cruza el botón en el momento. Al hacer clic se "presiona". */
.b365-solid.b365-shine { background-image: linear-gradient(110deg, #1557ff 0%, #4f46e5 35%, #7c3aed 65%, #a855f7 100%); background-size: 220% 100%; background-position: 0% 0; transition: background-position .6s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.2,.8,.2,1.4), box-shadow .3s ease; }
.b365-solid.b365-shine:hover { background-color: transparent; background-position: 100% 0; transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 34px -12px rgba(124,58,237,.65), 0 0 0 4px rgba(124,58,237,.14); }
.b365-solid.b365-shine:active { transform: translateY(0) scale(.97); box-shadow: 0 8px 16px -10px rgba(124,58,237,.6); transition-duration: .1s; }
.b365-shine svg { transition: transform .35s cubic-bezier(.2,.8,.2,1.4); }
.b365-shine:hover svg { transform: translateX(5px); }
.b365-shine:hover::after { animation: shine-now .7s ease-out; }
@keyframes shine-now { from { left: -60%; } to { left: 130%; } }
.b365-shine:focus-visible { outline: 3px solid rgba(124,58,237,.45); outline-offset: 3px; }
/* En el banner final el botón es blanco: mismo movimiento, sin cambiar a degradado */
.cta365 .b365-solid.b365-shine { background-image: none; background-color: #fff; }
.cta365 .b365-solid.b365-shine:hover { background-color: #fff; color: #4f46e5; box-shadow: 0 18px 34px -12px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.25); }
@media (prefers-reduced-motion: reduce) { .b365-solid.b365-shine, .b365-shine svg { transition: none; } .b365-shine:hover::after { animation: none; } }

/* Nota manuscrita del banner final: sobre la foto clara no se leía. Va dentro de
   una etiqueta oscura translúcida, más grande, apartada de la barra de redes. */
.cta365-art .handnote365 { right: 4.5rem; top: 1.4rem; padding: .55rem .95rem .65rem; border-radius: .9rem; background: rgba(7,18,51,.72); backdrop-filter: blur(6px); box-shadow: 0 12px 28px -12px rgba(0,0,0,.6); color: #fff; font-size: 1.65rem; line-height: 1.05; text-shadow: none; transform: rotate(-5deg); }
@media (max-width: 899px) { .cta365-art .handnote365 { right: 1rem; top: auto; bottom: 1rem; font-size: 1.35rem; } }

/* Variante elegida: nota sin etiqueta; una franja oscura en degradado arriba de la
   foto le da contraste (se reemplaza la etiqueta del bloque anterior). */
.cta365-art::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(7,18,51,.78) 0%, rgba(7,18,51,.45) 55%, rgba(7,18,51,0) 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%); }
.cta365-art .handnote365 { padding: 0; background: none; backdrop-filter: none; box-shadow: none; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
@media (max-width: 899px) { .cta365-art::before { top: auto; bottom: 0; background: linear-gradient(0deg, rgba(7,18,51,.78) 0%, rgba(7,18,51,0) 100%); -webkit-mask-image: none; mask-image: none; } }

/* Logo de GstarCAD 365 por país (config/paises.php → logo_365) */
.logo365 { display: block; height: 44px; width: auto; }
.foot365 .logo365 { height: 40px; }
@media (max-width: 640px) { .logo365 { height: 36px; } }

/* ───────── PLATAFORMAS: acciones como en la página oficial ───────── */
.plat { position: relative; }
.plat .req { display: block; margin-top: .25rem; }
.plat .ptype { margin-top: .9rem; font-weight: 700; color: var(--ink); font-size: .9rem; }
.s365-dark .plat .ptype { color: #fff; }
.pchecks { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .4rem; font-size: .84rem; color: var(--muted); }
.s365-dark .pchecks { color: #c3cde3; }
.pchecks li { position: relative; padding-left: 1.4rem; }
.pchecks li::before { content: ""; position: absolute; left: .1rem; top: .28rem; width: .75rem; height: .4rem; border-left: 2px solid #38bdf8; border-bottom: 2px solid #38bdf8; transform: rotate(-45deg); }
.pact { display: flex; gap: .5rem; margin-top: auto; padding-top: 1.2rem; }
.pbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1rem; border-radius: .6rem; border: 1.5px solid #3b82f6; background: transparent; color: #8fb0ff; font: inherit; font-size: .875rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.pbtn:hover { background: linear-gradient(135deg, #1557ff, #7c3aed); border-color: transparent; color: #fff; transform: translateY(-2px); }
.plang { flex: 1; min-width: 0; padding: .65rem .7rem; border-radius: .6rem; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.plang option { color: #0b1533; }
.pqr { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; border-radius: inherit; background: rgba(7,18,51,.94); backdrop-filter: blur(8px); color: #fff; text-align: center; }
.pqr p { font-weight: 700; }
.pqr img { width: 160px; height: 160px; padding: .5rem; border-radius: .75rem; background: #fff; }
.pqr span { font-size: .8rem; color: #a9b6d3; }
.pqr-close { position: absolute; top: .6rem; right: .8rem; border: 0; background: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* ───────── ¿QUÉ ES GSTARCAD 365? — esquema ───────── */
.quees365 { background: radial-gradient(800px 420px at 50% 60%, rgba(56,189,248,.14), transparent 70%), #fff; }
.qmap { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "l c r" "b b b"; align-items: center; gap: 1.5rem 2.5rem; margin-top: 3rem; }
.qleft { grid-area: l; } .qright { grid-area: r; } .qcore { grid-area: c; } .qbase { grid-area: b; }
.qcol { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.qcol li { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem .35rem 1.1rem; border-radius: 9999px; background: #fff; border: 1.5px solid #bae6fd; box-shadow: 0 10px 24px -16px rgba(2,132,199,.6); font-size: .9rem; font-weight: 700; color: var(--ink); transition: transform .3s ease, box-shadow .3s ease; }
.qcol li:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(2,132,199,.8); }
.qleft li { justify-content: flex-end; text-align: right; }
.qright li { padding: .35rem 1.1rem .35rem .4rem; }
.qleft li:nth-child(1), .qleft li:nth-child(4) { margin-right: 2.2rem; }
.qright li:nth-child(1), .qright li:nth-child(4) { margin-left: 2.2rem; }
.qcol i, .qcross i { flex: none; width: 40px; height: 40px; border-radius: .7rem; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #0ea5e9, #1557ff); }
.qcol i svg, .qcross i svg { width: 21px; height: 21px; }
.qcore { position: relative; width: 230px; height: 230px; display: flex; align-items: center; justify-content: center; }
.qcore b { position: relative; z-index: 2; width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 1.3rem; font-weight: 800; background: radial-gradient(circle at 35% 30%, #38bdf8, #1557ff 70%); box-shadow: 0 20px 40px -14px rgba(21,87,255,.7), inset 0 0 0 6px rgba(255,255,255,.18); }
.qring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(56,189,248,.35); }
.qring.r1 { border-style: dashed; animation: spin 26s linear infinite; }
.qring.r2 { inset: 22px; border-color: rgba(21,87,255,.25); border-right-color: #38bdf8; border-width: 3px; animation: spin 9s linear infinite reverse; }
.qdot { position: absolute; inset: 0; animation: spin 9s linear infinite; }
.qdot::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 12px #38bdf8; }
@keyframes spin { to { transform: rotate(360deg); } }
.qbase { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.qcross { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .35rem 1.1rem .35rem .4rem; border-radius: 9999px; background: #fff; border: 1.5px solid #bae6fd; font-weight: 800; color: var(--ink); box-shadow: 0 10px 24px -16px rgba(2,132,199,.6); }
.qcross::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 1.1rem; background: #7dd3fc; }
.qapps { margin: 0; padding: .9rem 0 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; border-top: 2px dashed #bae6fd; }
.qapps li { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: .7rem; background: linear-gradient(135deg, #eff6ff, #e0f2fe); border: 1px solid #bae6fd; font-size: .82rem; font-weight: 700; color: #0c4a6e; }
.qapps svg { width: 18px; height: 18px; color: #1557ff; }
@media (max-width: 900px) {
    .qmap { grid-template-columns: 1fr; grid-template-areas: "c" "l" "r" "b"; justify-items: center; }
    .qcol { width: 100%; max-width: 26rem; }
    .qleft li { flex-direction: row-reverse; justify-content: flex-end; text-align: left; padding: .35rem 1.1rem .35rem .4rem; }
    .qleft li, .qright li { margin: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .qring, .qdot { animation: none; } }

/* ───────── ESCENARIOS: pestañas sobre foto azul en diagonal ───────── */
.esc-stage { position: relative; display: grid; grid-template-columns: .9fr 2fr; align-items: center; gap: 2rem; margin-top: 2.5rem; padding: 3.5rem 3rem; min-height: 420px; }
.esc-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 1.25rem; clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); background: #0b1a4a; }
.esc-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.esc-bg img.on { opacity: 1; }
.esc-tabs { position: relative; z-index: 1; display: flex; flex-direction: column; border-left: 2px solid rgba(255,255,255,.35); }
.esc-tabs button { position: relative; padding: 1.1rem 1.4rem; border: 0; background: none; text-align: left; font: inherit; font-size: .95rem; font-weight: 700; color: rgba(255,255,255,.8); cursor: pointer; transition: background .3s ease, color .3s ease; }
.esc-tabs button:hover { color: #fff; }
.esc-tabs button.on { color: #fff; background: rgba(255,255,255,.18); }
.esc-tabs button.on::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 3px; background: #fff; }
.esc-panel { position: relative; z-index: 1; padding: 1.75rem 2rem; border-radius: 1rem; background: rgba(255,255,255,.96); box-shadow: 0 30px 60px -30px rgba(7,18,51,.6); min-height: 300px; }
.esc-panel ul, .esc-panel ol { margin: 0; padding: 0; list-style: none; }
.esc-panel ul li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.esc-panel ul li:first-child { padding-top: 0; }
.esc-panel ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.esc-panel b { display: block; font-size: 1.05rem; color: var(--ink); }
.esc-panel p { margin-top: .35rem; font-size: .875rem; line-height: 1.6; color: var(--muted); }
.esc-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.75rem; }
.esc-steps em { font-style: normal; margin-right: .35rem; background: linear-gradient(90deg, #1557ff, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
@media (max-width: 900px) {
    .esc-stage { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; }
    .esc-bg { clip-path: none; }
    .esc-tabs { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 2px solid rgba(255,255,255,.35); }
    .esc-tabs button { flex: none; padding: .8rem 1rem; font-size: .85rem; }
    .esc-tabs button.on::before { left: 0; right: 0; top: auto; bottom: -2px; width: auto; height: 3px; }
    .esc-panel { padding: 1.25rem; }
    .esc-steps { grid-template-columns: 1fr; }
}