/* V4 — Landing SaaS corporativa en azul. Estilo aireado: curvas, tarjetas flotantes, mockups y órbita. */
:root {
  --navy: #0a2559; --blue: #1f6bff; --blue2: #3d8bff; --blue-d: #1651c9; --sky: #eaf1ff; --soft: #f3f7ff;
  --ink: #0f2352; --muted: #5d6c92; --line: #e2e9f6;
  --coral: #ff6b6b; --green: #22c9a0; --amber: #ffb020;
  --f-head: "Outfit", system-ui, sans-serif; --f-body: "Poppins", system-ui, sans-serif;
  --shadow: 0 18px 50px -20px rgba(31,79,208,.28);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; }
a { color: inherit; } svg { display: block; }
:focus-visible { outline: 3px solid var(--blue2); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 40px, 1180px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 10px 16px; background: var(--blue); color: #fff; font-weight: 600; border-radius: 6px; } .skip:focus { left: 8px; }
.muted { color: var(--muted); } .small { font-size: 13.5px; }
h2 { font: 400 clamp(1.9rem, 1.2rem + 2vw, 2.8rem)/1.2 var(--f-head); letter-spacing: -0.01em; color: var(--ink); }
h3 { font: 500 1.2rem/1.3 var(--f-head); color: var(--ink); }
.lead { margin-top: 16px; font-weight: 300; font-size: 1.04rem; color: var(--muted); max-width: 52ch; }
.kicker { font: 500 13.5px var(--f-body); color: var(--blue); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 26px; border-radius: 8px; font: 500 15px/1 var(--f-body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s, box-shadow .2s, background-color .2s; }
.btn:hover { transform: translateY(-2px); } .btn:active { transform: scale(.97); }
.btn--lg { min-height: 54px; padding: 0 32px; font-size: 15.5px; } .btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn--blue { background: linear-gradient(135deg, var(--blue), var(--blue2)); color: #fff; box-shadow: 0 12px 26px -12px rgba(31,107,255,.8); } .btn--blue:hover { box-shadow: 0 16px 32px -10px rgba(31,107,255,.9); }
.btn--wa, .top__cta.btn--wa { background: linear-gradient(135deg, #0f8247, #0a6f3a); color: #fff; box-shadow: 0 12px 26px -12px rgba(10,111,58,.9); } .btn--wa:hover { box-shadow: 0 16px 32px -10px rgba(10,111,58,1); filter: brightness(1.07); }
.btn--wa svg { flex: none; }
.wa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 0; height: 60px; min-width: 60px; padding: 0; border-radius: 99px; background: #25d366; color: #fff; text-decoration: none; box-shadow: 0 14px 30px -10px rgba(10,111,58,.8); overflow: hidden; transition: padding .3s, gap .3s, background-color .2s; }
.wa-fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: wapulse 2.6s infinite; pointer-events: none; }
.wa-fab span { max-width: 0; overflow: hidden; white-space: nowrap; font: 500 14.5px var(--f-body); transition: max-width .35s; }
.wa-fab:hover, .wa-fab:focus-visible { padding: 0 22px 0 16px; gap: 10px; background: #1fb855; } .wa-fab:hover span, .wa-fab:focus-visible span { max-width: 240px; }
@keyframes wapulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }
.btn--white { background: #fff; color: var(--blue-d); box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
.btn--ghostw { border-color: rgba(255,255,255,.7); color: #fff; } .btn--ghostw:hover { background: rgba(255,255,255,.14); }

/* Cabecera */
.top { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); box-shadow: 0 6px 30px rgba(15,40,100,.07); }
.top__in { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 22px var(--f-head); letter-spacing: -.3px; text-decoration: none; color: var(--ink); } .brand b { font-weight: 300; color: var(--blue); letter-spacing: 0; } .brand--w b { color: #cfe2ff; } .brand svg { color: var(--blue); } .brand--w { color: #fff; } .brand--w svg { color: #fff; }
.top__nav { display: flex; align-items: center; gap: 30px; font-size: 16px; font-weight: 500; }
.top__nav a:not(.btn) { position: relative; text-decoration: none; color: var(--ink); padding: 6px 0; transition: color .2s; }
.top__nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.top__nav a:not(.btn):hover, .top__nav a.is-active { color: var(--blue); } .top__nav a:not(.btn):hover::after, .top__nav a.is-active::after { transform: scaleX(1); }
@media (min-width: 1001px) and (max-width: 1100px) { .top__nav { gap: 22px; } }
.top__cta { background: var(--blue); color: #fff; box-shadow: none; }
.top__toggle { display: none; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 500 15px var(--f-body); cursor: pointer; }

/* ===== Héroe ===== */
.hero { position: relative; padding: 96px 0 150px; color: #fff; overflow-x: clip; }
.hero__bg { position: absolute; inset: 0; overflow: hidden; clip-path: ellipse(112% 97% at 50% 0%); background: linear-gradient(135deg, #0a2559 0%, #1744b8 55%, #3d8bff 100%); }
.arc { position: absolute; border-radius: 50%; }
.arc--1 { width: 90vw; height: 90vw; right: -28vw; top: -44vw; background: rgba(255,255,255,.07); }
.arc--2 { width: 60vw; height: 60vw; left: -22vw; bottom: -36vw; background: rgba(255,255,255,.06); }
.dots { position: absolute; left: 8%; top: 70px; width: 130px; height: 130px; background-image: radial-gradient(rgba(255,255,255,.5) 2px, transparent 2.5px); background-size: 18px 18px; opacity: .6; }
.social { position: absolute; left: 30px; top: 30%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; transition: background-color .2s, transform .2s; } .social a:hover { background: rgba(255,255,255,.32); transform: translateY(-2px); }
.social span { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 13px var(--f-body); letter-spacing: .08em; color: rgba(255,255,255,.85); margin-top: 8px; }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: .95fr 1.05fr; gap: 30px; align-items: center; }
.pill { display: inline-block; padding: 6px 16px; border-radius: 99px; background: rgba(255,255,255,.16); font-size: 13.5px; margin-bottom: 20px; }
h1 { font: 400 clamp(2.3rem, 1.2rem + 3vw, 3.9rem)/1.1 var(--f-head); letter-spacing: -0.015em; color: #fff; }
.hero__lead { margin-top: 20px; max-width: 48ch; font-weight: 300; font-size: 1.06rem; color: rgba(255,255,255,.88); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__device { position: relative; margin-bottom: -110px; }
.hero__word { position: absolute; right: -6%; top: 36%; font: 600 clamp(80px, 12vw, 200px)/1 var(--f-head); color: rgba(255,255,255,.11); letter-spacing: .02em; white-space: nowrap; z-index: 0; user-select: none; }
.art { position: relative; z-index: 1; }
.art .draw { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 34px 36px rgba(5,20,60,.35)); }
.hero__stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; font: 400 13px var(--f-body); color: rgba(255,255,255,.6); } .hero__stage i { width: 40px; height: 2px; background: rgba(255,255,255,.3); }
.hero__device[data-stage="1"] [data-rail="1"], .hero__device[data-stage="2"] [data-rail="2"], .hero__device[data-stage="3"] [data-rail="3"] { color: #fff; font-weight: 600; }

/* Dibujo animado (colores corporativos fijos) */
.art { --s1: 1; --s2: 1; --s3: 1; --sk: #dbe7ff; --note: #ffcf5c; }
.art--af { --sk: #1f4fd0; --note: #d97200; }
.layer--sketch use { fill: none; stroke: var(--sk); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, max(0, var(--s1) * 2.2 - var(--d)))); opacity: calc(1 - var(--s2)); }
.layer--fill .f { opacity: min(1, max(0, var(--s2) * 2.4 - var(--d))); }
.f-bez { fill: #eef2fa; } .f-base { fill: #d5ddee; } .f-win { fill: #fff; } .f-side { fill: #143a8f; } .f-sline { fill: #fff; }
.f-k1 { fill: #dbe7ff; } .f-k2 { fill: #d6f5ea; } .f-k3 { fill: #ffefbd; } .f-chart { fill: #eef3ff; } .f-bar { fill: #2f63e0; } .f-ring { stroke: #22c9a0; }
.f-table { fill: #f4f7fd; } .f-row { fill: #9db4ea; } .f-phone { fill: #0b1f4d; } .f-prow { fill: #23458f; } .f-btn { fill: #ffb020; } .f-ai { fill: #22c9a0; } .f-dot { fill: #04281f; }
.d-ok { fill: #17803d; } .d-dmg { fill: #c46a00; } .d-mis { fill: #2158c9; } .d-miss { fill: #d32626; } .f-kt rect { fill: #0b1f4d; }
.f-tag { fill: #fff; stroke: #0b1f4d; stroke-width: 2.5; } .f-bc rect { fill: #0b1f4d; } .f-code { fill: #0b1f4d; font-family: var(--f-head); }
.layer--live { opacity: var(--s3); } .live-line { stroke: #ffb020; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--s3)); }
.notes { fill: var(--note); stroke: var(--note); font-family: var(--f-body); opacity: calc((1 - var(--s2) * 1.6) * min(1, max(0, var(--s1) * 3 - 1.6))); } .notes text { stroke: none; }

/* ===== Secciones ===== */
.sec { position: relative; padding: 110px 0; overflow: hidden; } #servicios { padding-top: 190px; }
.sec--soft { background: var(--soft); }
.sec--wave::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 70px; background: #fff; clip-path: ellipse(60% 100% at 50% 0%); }
.blob { position: absolute; border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%; background: var(--sky); z-index: 0; }
.blob--a { width: 620px; height: 620px; right: -140px; top: 130px; } .blob--b { width: 560px; height: 560px; left: -160px; top: 40px; background: #e3edff; }
.two { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.head { max-width: 640px; margin: 0 auto 54px; text-align: center; position: relative; z-index: 1; } .head p { margin-top: 12px; font-weight: 300; color: var(--muted); }
.plats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.plats span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: #fff; border: 1px solid #cfdcf5; color: var(--blue-d); font: 500 13.5px var(--f-body); box-shadow: 0 8px 20px -14px rgba(31,79,208,.5); }
.checks2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; margin: 28px 0 34px; font-size: 14.5px; color: #4a5a80; }
.checks2 li { display: flex; align-items: center; gap: 10px; } .checks2 svg { color: #7aa5ff; flex: none; }

.float3 { position: relative; height: 540px; }
.fcard { position: absolute; width: min(350px, 88%); display: flex; gap: 18px; align-items: center; padding: 22px 24px; background: #fff; border-radius: 6px; box-shadow: var(--shadow); animation: floaty 7s ease-in-out infinite alternate; }
.fcard p { margin-top: 4px; font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--muted); }
.fcard--1 { top: 10px; left: 4%; } .fcard--2 { top: 190px; left: 26%; animation-delay: -2s; } .fcard--3 { top: 372px; left: 4%; animation-delay: -4s; }
@keyframes floaty { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.bubble { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; }
.bubble--blue { background: #e4edff; color: var(--blue); } .bubble--coral { background: #ffe5e5; color: var(--coral); } .bubble--green { background: #d9f6ee; color: #12a37d; }
.arrow { position: absolute; z-index: 0; } .arrow--a { left: 2%; top: 150px; } .arrow--b { right: 6%; top: 330px; }

.tilt { position: relative; padding: 30px 0 40px; }
.tilt__card { transform: perspective(1500px) rotateY(18deg) rotateX(6deg) rotate(-7deg); transform-origin: center; }
.tilt .art .draw { filter: drop-shadow(0 30px 34px rgba(20,50,130,.28)); }
.dotgrid { position: absolute; left: -10px; bottom: 0; width: 120px; height: 120px; background-image: radial-gradient(#1f6bff 2.2px, transparent 2.7px); background-size: 16px 16px; opacity: .5; }
.tilt__ico { position: absolute; z-index: 2; right: 14%; top: 0; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue2)); color: #fff; box-shadow: 0 12px 28px -8px rgba(31,107,255,.7); animation: floaty 6s ease-in-out infinite alternate; }
.statcard { position: absolute; z-index: 2; right: 0; bottom: 6%; padding: 14px 22px; background: #fff; border-radius: 10px; box-shadow: var(--shadow); transform: rotate(-4deg); animation: floaty 7s ease-in-out infinite alternate -3s; }
.statcard small { display: block; font-size: 12px; color: var(--muted); } .statcard b { display: block; font: 500 1.5rem var(--f-head); } .statcard .ok { display: inline-block; margin-top: 2px; padding: 1px 12px; border-radius: 99px; background: #e0f4e8; color: #0b4a27; font-size: 12.5px; font-weight: 500; }

/* Paneles tipo configurador */
.panel2 { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 4px; position: relative; z-index: 1; }
.panel2__l { padding: 44px; } .panel2__r { padding: 44px; border-left: 1px solid var(--line); }
.mini { font: 500 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.rules { display: grid; gap: 14px; margin-bottom: 22px; } .rules li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #4a5a80; }
.rd { flex: none; width: 14px; height: 14px; margin-top: 7px; border-radius: 50%; } .rd--ok { background: #3ec16b; } .rd--rev { background: var(--amber); } .rd--rep { background: #ff5a5a; }
.calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
label { display: grid; gap: 6px; font-weight: 500; font-size: 13.5px; color: #4a5a80; }
input[type="number"], input:not([type]), input[type="email"], textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #d4def0; border-radius: 6px; font: 400 15px var(--f-body); color: var(--ink); background: #fff; }
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue2); outline-offset: 1px; }
.calc__out { padding: 18px; border-radius: 8px; background: #fff3d1; color: #5a3d00; transition: background-color .25s, color .25s; }
.calc[data-state="keep"] .calc__out { background: #dff3e6; color: #0b4a27; } .calc[data-state="replace"] .calc__out { background: #fde2e2; color: #7a1717; }
.calc__verdict { font: 500 1.8rem/1.1 var(--f-head); } .calc__why { margin: 6px 0 14px; font-size: 14px; line-height: 1.5; }
.bar { height: 9px; border-radius: 5px; background: rgba(0,0,0,.12); overflow: hidden; } .bar span { display: block; height: 100%; width: var(--w); max-width: 100%; background: currentColor; transition: width .5s cubic-bezier(.16,1,.3,1); }
.bar__label { display: flex; justify-content: space-between; margin: 6px 0 12px; font-size: 13px; }

/* Órbita */
.orbit__txt { margin-top: 24px; min-height: 130px; } .orbit__step { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.orbit__step b { font: 500 1.7rem var(--f-head); } .orbit__step span { font-size: 13px; color: var(--blue); background: var(--sky); padding: 2px 12px; border-radius: 99px; }
.orbit__desc { margin-top: 10px; font-weight: 300; color: var(--muted); max-width: 46ch; }
.orbit__dots { display: flex; gap: 8px; margin-top: 18px; }
.orbit__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: #c9d7f2; cursor: pointer; transition: width .3s, background-color .3s; } .orbit__dots button[aria-selected="true"] { width: 30px; background: var(--blue); }
.orbit { position: relative; width: min(470px, 100%); aspect-ratio: 1; margin-inline: auto; }
.orbit__ring { position: absolute; inset: 7%; border-radius: 50%; border: 1px dashed #bccdee; } .orbit__ring--2 { inset: 27%; border-style: solid; border-color: #dbe5f8; }
.orbit__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; color: #fff; background: linear-gradient(135deg, #1744b8, #3d8bff); box-shadow: 0 0 0 10px rgba(255,107,107,.12), 0 0 0 11px rgba(255,107,107,.5), 0 24px 50px -16px rgba(31,107,255,.7); }
.orbit__core svg { color: #fff; --mark-ink: #1744b8; }
.brand--w svg { --mark-ink: #1744b8; } .orbit__core b { font: 500 13px var(--f-head); }
.onode { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #d7e2f7; color: var(--blue); font: 500 1.2rem var(--f-head); cursor: pointer; box-shadow: 0 10px 26px -10px rgba(31,79,208,.4); transition: transform .35s cubic-bezier(.16,1,.3,1), background-color .3s, color .3s, border-color .3s; padding: 0; }
.onode:hover { transform: scale(1.1); }
.onode[aria-selected="true"] { transform: scale(1.28); background: linear-gradient(135deg, var(--blue), var(--blue2)); color: #fff; border-color: #fff; }

/* Configurador */
.tabs2 { display: inline-flex; gap: 6px; padding: 6px; background: #f3f6fd; margin-bottom: 26px; border-radius: 4px; }
.tabs2 button { min-height: 42px; padding: 0 22px; border: 0; border-radius: 4px; background: transparent; color: #4a5a80; font: 500 14px var(--f-body); cursor: pointer; transition: background-color .2s, color .2s; } .tabs2 button[aria-selected="true"] { background: var(--blue); color: #fff; }
.opts2 { display: grid; gap: 14px; } .opts2[hidden] { display: none; }
.opts2 label { position: relative; display: flex; align-items: center; gap: 12px; font-weight: 400; font-size: 15px; cursor: pointer; }
.opts2 input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.opt-box { flex: none; width: 20px; height: 20px; border: 2px solid #b8c8ea; border-radius: 50%; display: grid; place-items: center; transition: background-color .15s, border-color .15s; }
.opts2 input:checked + .opt-box { background: var(--blue); border-color: var(--blue); } .opts2 input:checked + .opt-box::after { content: ""; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.opts2 input:focus-visible + .opt-box { outline: 3px solid var(--blue2); outline-offset: 2px; }
.conf__form { display: grid; gap: 20px; align-content: start; }
.note2 { font-size: 13.5px; font-weight: 300; color: var(--muted); }
.range { font-size: 14px; grid-template-columns: 1fr auto; align-items: center; } .range output { color: var(--blue); font-weight: 600; } .range input { grid-column: 1 / -1; }
input[type="range"] { width: 100%; accent-color: var(--blue); height: 24px; }
.conf__sum { padding: 14px 16px; border-radius: 6px; background: var(--soft); font-size: 14px; color: #4a5a80; line-height: 1.5; }

/* Casos */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; z-index: 1; }
.case__img--4 { background: linear-gradient(135deg, #6b5bff, #8f7bff); }
.case__name { font-size: 1.2rem; }
.case { padding: 14px 14px 26px; background: #fff; border: 1px solid var(--line); border-radius: 4px; transition: transform .25s, box-shadow .25s; } .case:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.case__img { position: relative; height: 170px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 2px; } .case__img svg { width: 62%; }
.case__img span { position: absolute; left: 10px; top: 10px; padding: 2px 12px; background: rgba(10,37,89,.65); color: #fff; font-size: 12px; }
.case__img svg { margin-top: -14px; }
.case__name { position: absolute; left: 14px; bottom: 10px; right: 14px; font: 500 1.35rem/1.2 var(--f-head); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.case__stat { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 12.5px; color: #fff; background: rgba(10,37,89,.65); padding: 3px 12px; border-radius: 99px; } .case__stat b { font: 600 1.1rem var(--f-head); margin-right: 3px; }
.case__img--1 { background: linear-gradient(135deg, #1f6bff, #3d8bff); } .case__img--2 { background: linear-gradient(135deg, #ff7e7e, #ffa07a); } .case__img--3 { background: linear-gradient(135deg, #12a37d, #22c9a0); }
.case h3, .case p, .case .link { padding: 0 12px; } .case p { margin-top: 8px; font-weight: 300; font-size: 14.5px; color: var(--muted); }
.link { display: inline-block; margin-top: 12px; color: var(--blue); font-weight: 500; text-decoration: none; } .link:hover { text-decoration: underline; }

/* Agenda incrustada */
.agenda { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
.agenda .calendly-inline-widget { width: 100%; }
.agenda__fallback { padding: 12px 20px 16px; text-align: center; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); } .agenda__fallback a { color: var(--blue); }

/* Contacto */
.two--contact { align-items: start; }
.cinfo { padding: 10px 0; } .cinfo .brand { margin-bottom: 26px; }
.cinfo__line { display: grid; gap: 0; margin-bottom: 18px; font-size: 15px; } .cinfo__line b { font: 500 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .cinfo__line a { font: 400 1.2rem var(--f-head); text-decoration: none; color: var(--ink); } .cinfo__line a:hover { color: var(--blue); }
.cinfo__soc { display: flex; gap: 12px; margin-top: 8px; } .cinfo__soc a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; background: var(--sky); color: var(--blue); transition: background-color .2s, color .2s; } .cinfo__soc a:hover { background: var(--blue); color: #fff; }
.cform { display: grid; gap: 16px; } .cform h3 { font-size: 1.5rem; } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.btn:disabled, .btn.is-sending { cursor: progress; opacity: .85; transform: none; box-shadow: none; filter: none; }
.mob { position: relative; z-index: 1; margin-top: 90px; }
.mob__head { max-width: 640px; margin: 0 auto 34px; text-align: center; } .mob__head h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); } .mob__head p:last-child { margin-top: 12px; font-weight: 300; color: var(--muted); }
.mob__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mob__card { padding: 26px 24px 28px; background: #fff; border: 1px solid var(--line); border-radius: 6px; transition: transform .25s, box-shadow .25s; } .mob__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.mob__card .bubble { width: 56px; height: 56px; margin-bottom: 16px; } .mob__card h4 { font: 500 1.1rem/1.3 var(--f-head); color: var(--ink); } .mob__card p { margin-top: 8px; font-weight: 300; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.mob__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.mob__facts li { padding: 7px 14px; border-radius: 99px; background: #fff; border: 1px solid #cfdcf5; color: var(--blue-d); font: 500 13px var(--f-body); }
.mob__dl { margin-top: 28px; text-align: center; } .mob__dl[hidden] { display: none; }
@media (max-width: 900px) { .mob { margin-top: 64px; } .mob__grid { grid-template-columns: 1fr; } }
.form-captcha:empty { display: none; } .form-captcha { margin: 0; flex-basis: 100%; }
.foot__form .form-captcha { order: 5; } .foot__form .form-status { order: 6; }
.btn__spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: btnspin .7s linear infinite; flex: none; }
@keyframes btnspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn__spin { animation-duration: 2s; } }
.form-status { min-height: 1.2em; font-size: 14px; font-weight: 500; color: var(--muted); } .form-status.is-ok { color: #0b6b36; } .form-status.is-err { color: #b3261e; }
.foot__form { flex-wrap: wrap; } .foot__form .form-status { flex-basis: 100%; min-height: 0; }

/* Pie */
.foot { position: relative; margin-top: 90px; padding: 150px 0 40px; color: rgba(255,255,255,.85); }
.foot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #1744b8, #3d8bff); clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%); z-index: 0; }
.foot > * { position: relative; z-index: 1; }
.foot__cta { position: absolute; left: 0; right: 0; margin: 0 auto; top: -60px; width: min(940px, 100% - 40px); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 34px; background: #fff; color: var(--ink); border-radius: 6px; box-shadow: 0 30px 70px -26px rgba(10,37,89,.55); }
.foot__cta h3 { font-size: 1.5rem; } .foot__cta p { font-weight: 300; font-size: 14.5px; color: var(--muted); }
.foot__form { display: flex; gap: 10px; flex: 1; max-width: 430px; } .foot__form input { flex: 1; min-width: 0; }
.foot__grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.3fr; gap: 40px; align-items: start; }
.foot__grid p { font-weight: 300; font-size: 14.5px; margin-top: 14px; } .foot__grid .copy { margin-top: 28px; font-size: 13px; }
.foot h4 { font: 500 1.15rem var(--f-head); color: #fff; margin-bottom: 16px; } .foot ul { display: grid; gap: 10px; font-size: 14.5px; } .foot a { text-decoration: none; } .foot a:hover { text-decoration: underline; }
.foot__q { position: relative; padding: 20px 22px; border-radius: 6px; background: rgba(255,255,255,.16); font-weight: 300; font-size: 14px; line-height: 1.6; }
.foot__q::after { content: ""; position: absolute; left: 26px; bottom: -10px; border: 10px solid transparent; border-top-color: rgba(255,255,255,.16); border-bottom: 0; }
.foot__q p { margin: 0; } .foot__q cite { display: block; margin-top: 30px; font-style: normal; } .foot__q cite b { display: block; font: 500 1.05rem var(--f-head); color: #fff; } .foot__q cite span { font-size: 12.5px; opacity: .8; }

.js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); }
.js-reveal [data-reveal].in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (max-width: 1000px) {
  .top__toggle { display: inline-flex; align-items: center; }
  .top__nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 22px; background: #fff; box-shadow: 0 20px 30px rgba(15,40,100,.1); display: none; }
  .top__nav.is-open { display: flex; } .top__nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); } .top__nav a:not(.btn)::after { display: none; } .top__cta { margin-top: 14px; }
  .hero { padding: 64px 0 110px; } .hero__grid, .two { grid-template-columns: 1fr; gap: 44px; } .social, .hero__stage, .hero__word { display: none; } .hero__device { margin-bottom: -80px; }
  .tilt { order: 2; } #servicios { padding-top: 150px; }
  .float3 { height: auto; display: grid; gap: 18px; } .fcard { position: static; width: 100%; animation: none; } .arrow { display: none; }
  .panel2 { grid-template-columns: 1fr; } .panel2__r { border-left: 0; border-top: 1px solid var(--line); } .panel2__l, .panel2__r { padding: 30px 24px; }
  .cases { grid-template-columns: 1fr 1fr; } .foot__grid { grid-template-columns: 1fr 1fr; } .foot__cta { flex-direction: column; align-items: stretch; top: -90px; } .foot { padding-top: 180px; }
}
@media (max-width: 600px) {
  .wa-fab { right: 14px; bottom: 14px; height: 56px; min-width: 56px; }
  .sec { padding: 72px 0; } .checks2 { grid-template-columns: 1fr; } .calc__grid, .cform__row { grid-template-columns: 1fr; }
  .cases { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1 1 100%; } .hero__word { display: none; } .foot__grid { grid-template-columns: 1fr; } .foot__form { max-width: none; } .tilt__card { transform: perspective(1500px) rotateY(10deg) rotate(-4deg); }
  .orbit { width: min(360px, 100%); } .onode { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 1rem; } .orbit__core b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .fcard, .tilt__ico, .statcard, .wa-fab::before { animation: none; } .btn, .case, .onode, .bar span { transition: none; }
}

/* Pie sencillo (páginas de producto y legales) */
.lfoot { padding: 44px 0; background: linear-gradient(135deg, #0a2559, #1744b8); color: rgba(255,255,255,.85); }
.lfoot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; }
.lfoot p { max-width: 60ch; font-size: 14px; } .lfoot a:not(.brand) { color: #fff; }

/* Texto legal (política de privacidad) */
.legal { max-width: 760px; margin: 0 auto; padding: 70px 0 90px; }
.legal h1 { font: 400 clamp(2rem, 1.3rem + 2vw, 2.8rem)/1.15 var(--f-head); color: var(--ink); }
.legal .upd { margin-top: 10px; color: var(--muted); font-size: 14px; }
.legal h2 { margin-top: 40px; font: 500 1.35rem/1.3 var(--f-head); color: var(--ink); }
.legal p, .legal li { margin-top: 12px; font-weight: 300; color: #3c4b72; }
.legal ul { margin-top: 8px; padding-left: 20px; list-style: disc; } .legal li { margin-top: 6px; }
.legal a { color: var(--blue-d); }
.form-legal { margin-top: 6px; font-size: 12.5px; color: var(--muted); } .form-legal a { color: var(--blue-d); }