.integrations-landing { --ig-ink:#09144a; --ig-copy:#4d6396; --ig-blue:#0071ff; font-family:Arial,Helvetica,sans-serif; color:var(--ig-ink); background:#fff; line-height:1.4; }
.integrations-landing * { box-sizing:border-box; }
.integrations-landing h1,.integrations-landing h2,.integrations-landing h3 { color:var(--ig-ink); font-weight:700; letter-spacing:-.035em; }
.integrations-landing h2 { font-size:27px; line-height:1.2; margin:0 0 7px; }
.integrations-landing h3 { font-size:19px; line-height:1.2; margin:0 0 10px; letter-spacing:-.025em; }
.integrations-landing p { color:var(--ig-copy); margin:0; }
.ig-container { width:min(1200px,94%); margin-inline:auto; }
.ig-hero { background:radial-gradient(ellipse at 72% 38%,#e4f2ff,transparent 62%),linear-gradient(110deg,#f6fbff,#f2f8ff); overflow:hidden; }
.ig-hero-grid { display:grid; grid-template-columns:46% 54%; align-items:center; min-height:470px; padding:31px 8px; }
.ig-badge { display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border-radius:25px; background:#e3f0ff; font-size:15px; }
.ig-badge i { font-size:22px; color:#0071ff; }
.ig-intro h1 { font-size:clamp(37px,4vw,51px); line-height:1.02; margin:17px 0; letter-spacing:-.045em; }
.ig-intro h1 span { color:var(--ig-blue); }
.ig-intro>p { max-width:495px; font-size:18px; line-height:1.4; padding-right:20px; }
.ig-actions { display:flex; gap:20px; flex-wrap:wrap; margin-top:25px; }
.ig-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--ig-blue); border-radius:6px; padding:13px 24px; background:var(--ig-blue); color:white; text-decoration:none; font-size:15px; font-weight:600; transition:background .15s,transform .15s; }
.ig-button:hover { background:#0058d7; color:white; transform:translateY(-2px); }
.ig-button-outline { background:#ffffffb0; color:var(--ig-blue); }
.ig-button i { font-size:23px; }
.integrations-landing a:focus-visible,.integrations-landing summary:focus-visible { outline:3px solid #8545e9; outline-offset:4px; }
.ig-trust { display:flex; gap:19px; padding:0; margin:24px 0 0; list-style:none; font-size:12px; }
.ig-trust li:before { content:'✓'; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#0071ff; color:white; margin-right:6px; }
.ig-network { position:relative; height:410px; min-width:0; }
.ig-network:before { content:''; position:absolute; inset:65px 10px 10px; background:#deefff66; border-radius:50%; transform:rotate(-20deg); }
.ig-connections { position:absolute; inset:0; width:100%; height:100%; }
.ig-connections>path { fill:none; stroke:#0071ff; stroke-width:1.3; stroke-dasharray:5 4; marker-start:url(#ig-arrow); }
.ig-node { position:absolute; width:158px; height:140px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border:1px solid #e0ebfb; background:#fff; border-radius:18px; box-shadow:0 4px 9px #2266aa07; }
.ig-node>strong { font-size:16px; margin-top:1px; }
.ig-node>small { font-size:12px; color:#516ba0; }
.ig-top-left { left:0; top:0; }
.ig-bottom-left { left:0; top:185px; }
.ig-top-right { right:0; top:0; }
.ig-bottom-right { right:0; top:185px; }
.ig-hub { position:absolute; left:50%; top:106px; transform:translateX(-50%); width:174px; height:137px; display:grid; place-items:center; border:1px solid #d9e8fb; border-radius:17px; background:#fff; box-shadow:0 8px 20px #0071ff08; }
.ig-cloudya { display:inline-flex; flex-direction:column; align-items:center; color:#0071ff; line-height:1; }
.ig-cloudya>i { font-size:65px; }
.ig-cloudya>b { font-size:32px; letter-spacing:-1.5px; }
.ig-woo { display:inline-block; background:#9d3a9d; color:#fff; border-radius:7px; padding:2px 7px 5px; font-size:33px; font-weight:700; font-style:italic; line-height:1; position:relative; letter-spacing:-2px; }
.ig-woo:after { content:''; position:absolute; bottom:-6px; right:12px; border-top:8px solid #9d3a9d; border-left:8px solid transparent; }
.ig-shopify { display:inline-block; color:#80b637; position:relative; line-height:1; }
.ig-shopify>i { font-size:54px; }
.ig-shopify>b { position:absolute; left:50%; top:53%; transform:translate(-50%,-50%) rotate(7deg); color:white; font-size:29px; font-style:italic; }
.ig-api { display:grid; place-items:center; width:55px; height:55px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#b584ff,#8450f8); font-size:35px; }
.ig-payments { display:inline-flex; align-items:center; gap:20px; color:#0071ff; font-size:32px; }
.ig-payments i:last-child { color:#004c99; font-size:28px; }
.ig-handnote { position:absolute; top:305px; left:50%; transform:translateX(-50%) rotate(-7deg); font-style:italic; font-weight:600; font-size:24px; text-align:center; line-height:1.2; border-bottom:2px solid #2484ff; padding:0 4px 12px; white-space:nowrap; }
.ig-section { padding-top:29px; }
#integraciones,#como-funciona { scroll-margin-top:25px; }
.ig-heading { text-align:center; margin-bottom:23px; }
.ig-heading p { font-size:17px; }
.ig-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:start; }
.ig-card { border:1px solid #e0eafa; border-radius:10px; padding:18px 20px 21px; box-shadow:0 4px 9px #24579a04; min-height:304px; }
.ig-card-icon { display:grid; place-items:center; width:66px; height:66px; border-radius:15px; background:#eef6ff; margin-bottom:13px; }
.ig-icon-woo { background:#f8eef7; }
.ig-icon-shopify { background:#eef7f0; }
.ig-icon-api { background:#f4edff; }
.ig-card-icon .ig-woo { font-size:27px; }
.ig-card-icon .ig-shopify i { font-size:43px; }
.ig-card-icon .ig-shopify b { font-size:25px; }
.ig-card-icon .ig-payments { gap:0; font-size:32px; }
.ig-card-icon .ig-payments i:last-child { display:none; }
.ig-card-icon .ig-api { background:transparent; color:#8650ff; font-size:38px; }
.ig-category { display:inline-flex; align-items:center; gap:6px; color:#743772; background:#f5ebf5; padding:3px 10px; font-size:12px; font-weight:600; border-radius:20px; margin-bottom:11px; }
.ig-card>p { font-size:15px; line-height:1.4; min-height:105px; }
.ig-card details { margin-top:13px; }
.ig-card summary { cursor:pointer; color:#0071ff; text-decoration:underline; font-size:14px; list-style:none; width:fit-content; }
.ig-card summary::-webkit-details-marker { display:none; }
.ig-card details[open] summary>span { display:inline-block; transform:rotate(90deg); }
.ig-details { border-top:1px solid #e2ebf8; padding-top:12px; margin-top:12px; font-size:14px; }
.ig-details a { display:inline-block; color:#0071ff; margin-top:12px; text-decoration:underline; }
.ig-flow-panel { background:linear-gradient(100deg,#f8fcff,#f5faff); border:1px solid #dfeafb; border-radius:9px; margin-top:21px; padding:20px 19px 18px; }
.ig-flow-panel .ig-heading { margin-bottom:19px; }
.ig-flow-panel h2 { font-size:26px; }
.ig-flow-panel .ig-heading p { font-size:16px; }
.ig-flow-layout { display:grid; grid-template-columns:1fr 92px; align-items:center; gap:14px; }
.ig-flow { list-style:none; display:grid; padding:0; margin:0; gap:42px; }
.ig-sales-flow { grid-template-columns:repeat(5,1fr); }
.ig-flow>li { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:120px; border:1px solid #e0eafa; border-radius:11px; background:#fff; padding:13px 10px; box-shadow:0 4px 9px #214d7703; text-align:center; }
.ig-flow>li:not(:last-child):after { content:'→'; position:absolute; right:-34px; top:35px; font-size:32px; color:#0071ff; }
.ig-flow>li>i { color:#0071ff; font-size:35px; line-height:1; }
.ig-flow>li>p { color:#0d2056; font-size:14px; line-height:1.25; }
.ig-flow .ig-cloudya>i { font-size:38px; }
.ig-flow .ig-cloudya>b { font-size:19px; letter-spacing:-1px; }
.ig-store-pair { display:flex; gap:10px; align-items:center; }
.ig-store-pair>.ig-woo { font-size:22px; }
.ig-store-pair>.ig-shopify i { font-size:36px; }
.ig-store-pair>.ig-shopify b { font-size:21px; }
.ig-store-pair>span:nth-child(2) { color:#8059c9; font-size:23px; }
.ig-flow-note { color:#0071ff; font-style:italic; font-size:15px; line-height:1.25; text-align:center; transform:rotate(-7deg); align-self:start; margin-top:-51px; }
.ig-flow-note>span { display:block; font-size:65px; font-style:normal; font-weight:300; line-height:1; margin-top:10px; }
.ig-pay-flow { grid-template-columns:1fr 1fr 2fr 1fr; }
.ig-gateways>div { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; }
.ig-azul { font-size:30px; color:#0061d8; letter-spacing:-1px; }
.ig-cardnet { font-size:16px; color:red; font-weight:700; letter-spacing:-.5px; }
.ig-stripe { color:#7552ff; font-size:23px; font-weight:700; letter-spacing:-1px; }
.ig-paypal { color:#003987; font-weight:700; font-size:17px; font-style:italic; white-space:nowrap; }
.ig-flow>li>.ig-success { color:#0db447; }
.ig-final { background:linear-gradient(100deg,#e5f4ff,#eff8ff); margin-top:22px; overflow:hidden; }
.ig-final-grid { display:grid; grid-template-columns:33% 43% 24%; align-items:center; gap:15px; padding:17px 0 0; }
.ig-final-copy h2 { font-size:23px; margin-bottom:10px; }
.ig-final-copy p { font-size:15px; line-height:1.45; }
.ig-final-copy .ig-button { margin-top:18px; }
.ig-final-benefits { list-style:none; padding:0 0 0 20px; margin:0; font-size:12px; }
.ig-final-benefits li { display:flex; align-items:center; gap:12px; margin:11px 0; }
.ig-final-benefits i { color:#0071ff; font-size:26px; }
.ig-laptop { padding:0 24px; transform:perspective(1000px) rotateY(5deg) rotateZ(2deg); align-self:end; }
.ig-laptop-screen { border:8px solid #19232b; border-bottom-width:12px; border-radius:11px 11px 3px 3px; background:#fff; box-shadow:0 5px 14px #26455a30; }
.ig-appbar { background:#0071ff; color:#fff; font-size:12px; padding:5px; }
.ig-appbar>span { float:right; font-size:8px; }
.ig-app-layout { display:flex; }
.ig-app-layout aside { width:72px; flex-shrink:0; font-size:6px; line-height:3; padding:7px 5px; background:#f3f8ff; color:#476081; }
.ig-app-layout aside strong { display:block; color:#006aff; }
.ig-app-main { flex:1; padding:10px 6px; min-width:0; }
.ig-app-main h3 { font-size:11px; letter-spacing:0; margin-bottom:9px; }
.ig-app-row { display:flex; align-items:center; gap:5px; border:1px solid #e7edf7; border-radius:5px; padding:7px 4px; margin-bottom:6px; font-size:6px; }
.ig-app-row>span:last-child { margin-left:auto; color:#158938; background:#d6f6df; border-radius:8px; padding:2px 4px; font-size:5px; white-space:nowrap; }
.ig-app-row .ig-woo { font-size:10px; padding:2px; letter-spacing:-.6px; border-radius:3px; }
.ig-app-row .ig-woo:after { display:none; }
.ig-app-row .ig-shopify>i { font-size:18px; }
.ig-app-row .ig-shopify>b { font-size:10px; }
.ig-app-row .ig-payments { font-size:15px; gap:0; }
.ig-app-row .ig-payments i:last-child { display:none; }
.ig-app-row .ig-api { width:19px; height:19px; font-size:13px; border-radius:5px; }
.ig-laptop-base { width:120%; margin-left:-10%; height:14px; border-radius:0 0 45% 45%; background:linear-gradient(#adb8c3,#e4e8eb 45%,#717e89); box-shadow:0 4px 4px #18304420; }
.ig-assurances { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:30px 8px; }
.ig-assurances>div { display:flex; align-items:center; gap:15px; }
.ig-assurances i { color:#0071ff; font-size:38px; }
.ig-assurances p { font-size:14px; }
.ig-assurances strong { display:block; font-weight:600; color:#071b50; margin-bottom:3px; }
@media(max-width:1150px) {
.ig-intro h1 { font-size:45px; }.ig-intro>p { font-size:17px; }.ig-button { font-size:14px; padding:12px 19px; }.ig-actions { gap:17px; }.ig-trust { font-size:10px; gap:14px; }.ig-node { width:145px; }.ig-hub { width:155px; }.ig-card { padding:17px 18px; }.ig-card>p { font-size:14px; min-height:120px; }.ig-category { font-size:11px; }.ig-flow { gap:37px; }.ig-flow>li { padding:12px 8px; }.ig-flow>li>p { font-size:13px; }.ig-flow>li:not(:last-child):after { right:-30px; }.ig-gateways>div { gap:9px; }.ig-azul { font-size:25px; }.ig-cardnet { font-size:13px; }.ig-stripe { font-size:21px; }.ig-paypal { font-size:14px; }.ig-flow-layout { grid-template-columns:1fr 72px; }.ig-flow-note { font-size:13px; }.ig-final-copy h2 { font-size:21px; }.ig-final-benefits { padding-left:5px; font-size:11px; }.ig-final-benefits i { font-size:23px; }.ig-laptop { padding:0 17px; }.ig-assurances p { font-size:12px; }
}
@media(max-width:900px) {
.ig-hero-grid { grid-template-columns:1fr; gap:30px; }.ig-intro { text-align:center; }.ig-intro>p { max-width:560px; padding:0; margin:auto; }.ig-actions,.ig-trust { justify-content:center; }.ig-network { width:min(620px,100%); margin:auto; }.ig-cards { grid-template-columns:repeat(2,1fr); gap:17px; }.ig-card { min-height:0; }.ig-card>p { min-height:80px; font-size:15px; }.ig-flow-layout { grid-template-columns:1fr; }.ig-flow-note { display:none; }.ig-flow { gap:27px; }.ig-flow>li:not(:last-child):after { right:-24px; font-size:26px; }.ig-gateways>div { flex-wrap:wrap; gap:7px 12px; }.ig-final-grid { grid-template-columns:42% 58%; gap:0; padding-top:23px; }.ig-final-copy { padding:0 15px 15px; }.ig-final-benefits { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,1fr); gap:0 20px; padding:10px 20px; }.ig-assurances { grid-template-columns:repeat(2,1fr); gap:22px; }.ig-assurances p { font-size:14px; }
}
@media(max-width:540px) {
.ig-container { width:92%; }.ig-hero-grid { padding:23px 0; gap:26px; }.ig-intro h1 { font-size:37px; }.ig-intro>p { font-size:16px; }.ig-button { font-size:12px; padding:12px 14px; }.ig-button i { font-size:19px; }.ig-actions { gap:10px; }.ig-trust { font-size:8px; gap:9px; }.ig-trust li:before { width:14px; height:14px; margin-right:4px; }.ig-network { height:310px; }.ig-node { width:106px; height:103px; border-radius:13px; gap:6px; }.ig-node>strong { font-size:11px; }.ig-node>small { font-size:9px; }.ig-bottom-left,.ig-bottom-right { top:158px; }.ig-hub { top:103px; width:114px; height:91px; border-radius:13px; }.ig-cloudya>i { font-size:42px; }.ig-cloudya>b { font-size:24px; }.ig-node .ig-woo { font-size:25px; }.ig-node .ig-shopify>i { font-size:37px; }.ig-node .ig-shopify>b { font-size:23px; }.ig-node .ig-api { width:40px; height:40px; font-size:27px; }.ig-node .ig-payments { font-size:23px; gap:12px; }.ig-node .ig-payments i:last-child { font-size:22px; }.ig-handnote { top:262px; font-size:17px; padding-bottom:6px; }.ig-connections { height:285px; }.ig-heading h2 { font-size:25px; }.ig-heading p { font-size:14px; }.ig-cards { grid-template-columns:1fr; gap:14px; }.ig-card { padding:21px; }.ig-card>p { min-height:0; font-size:15px; }.ig-card h3 { font-size:20px; }.ig-category { font-size:12px; }.ig-flow-panel { padding:20px 15px; }.ig-flow-panel h2 { font-size:23px; }.ig-flow-panel .ig-heading p { font-size:14px; }.ig-flow { grid-template-columns:1fr; gap:28px; }.ig-flow>li { min-height:110px; }.ig-flow>li>p { font-size:14px; }.ig-flow>li:not(:last-child):after { content:'↓'; left:50%; transform:translateX(-50%); right:auto; top:auto; bottom:-29px; font-size:25px; }.ig-gateways>div { gap:15px; }.ig-azul { font-size:30px; }.ig-cardnet { font-size:16px; }.ig-stripe { font-size:25px; }.ig-paypal { font-size:17px; }.ig-final-grid { grid-template-columns:1fr; gap:24px; }.ig-laptop { width:min(330px,94%); margin:auto; }.ig-final-copy { text-align:center; padding:0 8px; }.ig-final-copy h2 { font-size:24px; }.ig-final-copy p { font-size:15px; }.ig-final-benefits { grid-template-columns:1fr; padding:0 15px 14px; margin:0; }.ig-final-benefits li { font-size:13px; margin:7px 0; }.ig-assurances { padding:26px 0; gap:22px 12px; }.ig-assurances>div { gap:10px; }.ig-assurances i { font-size:30px; }.ig-assurances p { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .ig-button { transition:none; }.ig-button:hover { transform:none; } }