/* Each brand carries its own visual language inside the Sky Eleven grid. */
.footer-products { gap:10px 18px; }
.footer-products a, .footer-products .footer-soon {
  display:inline-flex;align-items:center;gap:8px;min-height:42px;
  color:#aab6c9;font-size:12px;line-height:1.3;
}
.footer-products img { width:36px;height:30px;object-fit:contain;border-radius:7px;padding:3px;background:#ffffff09; }
.footer-products .footer-soon { color:#9aa8bf; }
.footer-products .footer-soon img { background:#e7edf7; }
.footer-products a:focus-visible { outline:2px solid #67e8f9;outline-offset:5px;border-radius:5px; }
#unidades { scroll-margin-top: 90px; }
#unidades .carousel-track { gap: 24px; }
#unidades .segment-card {
  --accent: #67e8f9; --surface: #0b1424; --ink: #f8fafc; --muted: #afb8ca;
  padding: 26px; border-radius: 24px; color: var(--ink);
  background: var(--surface); border: 1px solid color-mix(in srgb,var(--accent) 19%,#1a2231);
  box-shadow: 0 12px 40px #0003; isolation: isolate; backdrop-filter: none;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#unidades .segment-card > * { position: relative; z-index: 1; }
#unidades .segment-card::before { display: none; }
#unidades .segment-card::after { left: 26px; right: 26px; background: var(--accent); opacity: .5; }
#unidades .segment-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb,var(--accent) 60%,transparent); box-shadow: 0 20px 60px #0005; }
#unidades .segment-card .card-shimmer { display: none; }
#unidades .segment-role { font-size: 10px; letter-spacing: 2px; line-height: 1.6; color: var(--accent); margin: 0; }
#unidades .brand-stage { height: 198px; margin: 17px -26px 25px; overflow: hidden; position: relative; border-block: 1px solid color-mix(in srgb,var(--accent) 12%,transparent); }
#unidades .segment-logo-container { height: auto; margin: 0; position: absolute; z-index: 2; left: 26px; top: 24px; justify-content: flex-start; }
#unidades .segment-logo-container img { max-width: 175px; max-height: 66px; object-fit: contain; filter: drop-shadow(0 5px 12px #0003); }
#unidades .brand-caption { position: absolute; z-index: 2; left: 26px; bottom: 18px; right: 16px; font-size: 11px; letter-spacing: .2px; color: var(--muted); }
#unidades .brand-art { position: absolute; inset: 0; pointer-events: none; }
#unidades .segment-card h3 { font-size: 23px; letter-spacing: -.8px; line-height: 1.2; margin-bottom: 14px; color: var(--ink); }
#unidades .segment-card p { color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 24px; }
#unidades .feature-pill { padding: 14px 0; gap: 12px; border: 0; border-top: 1px solid color-mix(in srgb,var(--accent) 17%,transparent); background: none; border-radius: 0; margin-bottom: 15px; }
#unidades .feature-pill i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb,var(--accent) 12%,transparent); color: var(--accent); }
#unidades .feature-pill div { font-size: 12px; color: var(--ink); }
#unidades .feature-pill span { color: var(--muted); font-size: 10px; line-height: 1.5; margin-top: 3px; }
#unidades .btn-outline { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; font-size: 12px; text-align: left; padding: 12px 16px; border-radius: 11px; border: 1px solid color-mix(in srgb,var(--accent) 34%,transparent); background: color-mix(in srgb,var(--accent) 9%,transparent); color: var(--ink); }
#unidades .btn-outline:hover { background: var(--accent); color: #0c1015; border-color: var(--accent); }
#unidades .btn-outline:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
#unidades .brand-arrow { font-size: 20px; font-weight: 400; color: var(--accent); transition: transform .25s; }
#unidades .btn-outline:hover .brand-arrow { transform: translate(2px,-2px); color: inherit; }

/* One Percent — midnight blue, brushed gold and the discipline of a chart. */
#unidades .brand-onepercent { --accent:#ddbd60; --surface:linear-gradient(155deg,#101336,#070b23); }
.brand-onepercent .brand-stage { background: radial-gradient(ellipse at 80% 80%,#ddbd601c,transparent 65%),#080d2b; }
.brand-onepercent .brand-art { background-image: linear-gradient(#ddbd6009 1px,transparent 1px),linear-gradient(90deg,#ddbd6009 1px,transparent 1px); background-size: 32px 32px; }
.brand-onepercent svg { position: absolute; width: 78%; right: -4px; bottom: 34px; opacity: .6; }
.chart-line { fill:none;stroke:#ddbd60;stroke-width:1.4; }
.chart-area { fill:#ddbd600c; }
#unidades .brand-onepercent .segment-logo-container { top: 28px; }
#unidades .brand-onepercent .segment-logo-container img { max-width: 215px; }
#unidades .brand-onepercent .btn-outline { background:#ddbd60; color:#10132b; }
#unidades .brand-onepercent .brand-arrow { color:inherit; }

/* FEKA — warm charcoal, orange, a small menu ticket. */
#unidades .brand-feka { --accent:#ff794c; --surface:linear-gradient(145deg,#29160f,#130e0d 75%); --muted:#c6b1a7; }
.brand-feka .brand-stage { background: radial-gradient(ellipse at 20% 20%,#b3451b40,transparent 75%),#20110c; }
.feka-orbit { position:absolute; width:230px;height:230px;border:1px solid #ff794c25;border-radius:50%;left:-50px;top:-60px;box-shadow:0 0 0 30px #ff794c08,0 0 0 60px #ff794c06; }
.order-slip { position:absolute;right:25px;top:24px;width:125px;height:137px;transform:rotate(9deg);background:#f4e7d7;color:#4a2415;padding:15px;border-radius:3px;box-shadow:0 14px 22px #0004; }
.order-slip i { font-size:22px;display:block;margin-bottom:7px; }
.order-slip span { font:8px monospace;letter-spacing:2px; }
.order-slip b { display:block;font-size:14px;line-height:1.1;margin-top:7px;letter-spacing:-.5px; }
.order-slip em { position:absolute;right:13px;top:13px;font-style:normal;color:#e15b2a;font-size:22px; }
#unidades .brand-feka .segment-logo-container img { max-height:74px; border-radius:19px; }
#unidades .brand-feka .btn-outline { background:#ff794c; color:#26120b; border-color:#ff794c; border-radius:30px; }
#unidades .brand-feka .brand-arrow { color:inherit; }

/* Trader.IA — ultraviolet data and teal market signals. */
#unidades .brand-traderia { --accent:#b699ff; --surface:linear-gradient(155deg,#19152d,#0c0c15 75%); }
.brand-traderia .brand-stage { background:radial-gradient(ellipse at 80% 40%,#844aff40,transparent 72%),#100d21; }
.data-orbit { position:absolute;width:220px;height:220px;border:1px solid #b699ff30;border-radius:50%;right:-20px;top:-30px;box-shadow:0 0 0 25px #b699ff0a,0 0 0 50px #b699ff07; }
.candle-chart { position:absolute;right:30px;top:76px;display:flex;gap:12px;align-items:center;opacity:.7;transform:rotate(-5deg); }
.candle-chart i { position:relative;display:block;width:7px;height:var(--h);background:#65d9b1;border-radius:1px;transform:translateY(var(--y)); }
.candle-chart i::after { content:'';position:absolute;width:1px;top:-8px;bottom:-8px;left:3px;background:inherit; }
.candle-chart i:nth-child(3n) { background:#a083ec; }
#unidades .brand-traderia .segment-logo-container img { border-radius:6px;max-width:160px; }

/* TrainHub — red, graphite, angular movement. */
#unidades .brand-trainhub { --accent:#ff555b; --surface:linear-gradient(140deg,#211113,#101011 70%); --muted:#bcb0b3; }
.brand-trainhub .brand-stage { background:linear-gradient(110deg,#171315 52%,#6e121d44 52%,#6e121d44 70%,#1b1013 70%); }
.training-mark { position:absolute;right:26px;top:13px;font-size:100px;font-weight:900;font-style:italic;letter-spacing:-11px;line-height:1;color:transparent;-webkit-text-stroke:1px #ff555b30; }
.training-lines { position:absolute;right:0;top:0;width:45%;height:100%;background:repeating-linear-gradient(120deg,transparent 0 20px,#ff555b0c 21px 22px); }
.training-bars { position:absolute;right:28px;bottom:43px;display:flex;align-items:flex-end;gap:7px; }
.training-bars i { width:11px;height:20px;background:#ff555b60;transform:skewX(-13deg); }
.training-bars i:nth-child(2n) { height:33px; }
.training-bars i:nth-child(3n) { height:47px;background:#ff555ba0; }
#unidades .brand-trainhub .segment-logo-container img { max-height:78px;border-radius:13px; }
#unidades .brand-trainhub h3 { text-transform:uppercase;font-style:italic;font-weight:800; }
#unidades .brand-trainhub .btn-outline { border-radius:4px; }

/* AGP — architectural blueprint and a precise blue grid. */
#unidades .brand-agp { --accent:#8ba5ff; --surface:linear-gradient(145deg,#121e38,#0b111f); }
.brand-agp .brand-stage { background-color:#111c36;background-image:linear-gradient(#8ba5ff0c 1px,transparent 1px),linear-gradient(90deg,#8ba5ff0c 1px,transparent 1px);background-size:22px 22px; }
.blueprint { position:absolute;width:76%;height:100%;right:-30px;top:0;fill:none;stroke:#8ba5ff;stroke-width:1.2;opacity:.6; }
.blueprint .dimension { stroke-dasharray:3 4;stroke-width:.7; }
#unidades .brand-agp .segment-logo-container img { max-height:70px;border-radius:16px; }
#unidades .brand-agp h3 { font-size:21px;max-width:260px; }

/* CrediApp has a contact link, so its cyan logo is the visual reference. */
#unidades .brand-crediapp { --accent:#53d4f5; --surface:linear-gradient(145deg,#092637,#09151e); --muted:#a5c1d1; }
.brand-crediapp .brand-stage { background:radial-gradient(ellipse at 80% 30%,#16b8ec38,transparent 70%),#0b2533; }
.credit-orbit { position:absolute;right:-50px;top:-80px;width:260px;height:260px;border:1px solid #53d4f52b;border-radius:50%;box-shadow:0 0 0 32px #53d4f508,0 0 0 64px #53d4f506; }
.credit-card { position:absolute;right:25px;top:61px;width:150px;height:89px;border-radius:11px;transform:rotate(-13deg);background:linear-gradient(125deg,#48c6e8,#137ca5);color:#043448;padding:13px;box-shadow:0 14px 24px #0004;border:1px solid #a8eaff60; }
.credit-card span { font-size:8px;font-weight:800;letter-spacing:1px; }
.credit-card > i { position:absolute;right:12px;top:12px;font-size:12px;transform:rotate(90deg); }
.credit-chip { width:22px;height:17px;background:linear-gradient(135deg,#f5e3aa,#aa9d71);border-radius:4px;margin-top:8px;border:1px solid #4b6e7170; }
.credit-card b { display:block;font-size:9px;margin-top:5px; }
#unidades .brand-crediapp .segment-logo-container img { max-height:59px; }

/* Halcón — champagne gold, dark editorial tone and an alliance network. */
#unidades .brand-halcon { --accent:#dfbf7f; --surface:linear-gradient(145deg,#201e16,#0d1113 75%); --muted:#bbb8ad; }
.brand-halcon .brand-stage { background:radial-gradient(ellipse at 65% 50%,#c7a95f20,transparent 70%),#111412; }
.alliance-network { position:absolute;right:-28px;top:0;width:85%;height:100%;fill:#1b272b;stroke:#dfbf7f70;stroke-width:1; }
.alliance-network circle:first-of-type { fill:#dfbf7f;stroke:#ead7a8; }
#unidades .brand-halcon .segment-logo-container img { max-height:73px;border-radius:14px; }
#unidades .brand-halcon h3 { font-family:Georgia,serif;font-weight:400;font-size:31px;letter-spacing:-1px; }
#unidades .brand-halcon .btn-outline { background:linear-gradient(110deg,#b99b60,#eed49b);color:#181a18; }
#unidades .brand-halcon .brand-arrow { color:inherit; }

/* AutoPubli — olive-black, acid lime, editorial social content. */
#unidades .brand-autopubli { --accent:#d4fc76; --surface:linear-gradient(145deg,#252c1d,#12170f 80%); --ink:#f4f3e8; --muted:#bdc4b0; }
.brand-autopubli .brand-stage { background:linear-gradient(130deg,#293221,#192116); }
.post-tile { position:absolute;width:108px;height:136px;right:25px;top:24px;padding:12px;background:#dcf0b6;color:#24301d;box-shadow:0 10px 25px #0004; }
.post-tile span { font:6px monospace;letter-spacing:1px; }
.post-tile b { display:block;font-size:21px;line-height:.95;letter-spacing:-1px;margin-top:16px; }
.post-tile i { position:absolute;bottom:9px;right:10px;font-size:28px;font-style:normal; }
.post-back { right:105px;top:18px;transform:rotate(-13deg);background:#718356;color:#f2f2d8; }
.post-front { transform:rotate(9deg);background:#d6fa82; }
#unidades .brand-autopubli .segment-logo-container img { width:60px;height:60px;padding:7px;background:#fff;border-radius:15px; }
#unidades .brand-autopubli .btn-outline { background:#d4fc76;color:#17200e;border-radius:30px;border-color:#d4fc76; }
#unidades .brand-autopubli .brand-arrow { color:inherit; }

/* Studio11 — paper, restrained accounting blue and a document motif. */
#unidades .brand-studio11 { --accent:#405bb9; --surface:linear-gradient(145deg,#f0f1f5,#dde4ee); --ink:#1c2c42; --muted:#526079; border-color:#b8c7dc; }
.brand-studio11 .brand-stage { background:linear-gradient(130deg,#e2e8f2,#cbd8ec); }
.paper { position:absolute;right:28px;top:20px;width:114px;height:143px;background:#fbfcff;border:1px solid #becbe1;box-shadow:0 8px 20px #263d5b1a;padding:15px; }
.paper-back { transform:rotate(-11deg);right:51px;top:18px;background:#e8eef9; }
.paper-front { transform:rotate(7deg); }
.paper span { font:7px monospace;color:#405bb9;letter-spacing:1px; }
.paper > i { display:block;height:2px;background:#c9d4e6;margin-top:8px; }
.paper > i:nth-of-type(2) { width:65%; }
.paper-chart { display:flex;gap:7px;align-items:flex-end;height:48px;margin-top:8px;border-bottom:1px solid #d5ddeb; }
.paper-chart b { width:11px;height:17px;background:#405bb9; }
.paper-chart b:nth-child(2) { height:25px;opacity:.5; }
.paper-chart b:nth-child(3) { height:34px;opacity:.7; }
.paper-chart b:nth-child(4) { height:41px; }
.paper em { position:absolute;right:10px;bottom:8px;color:#405bb9;font:12px monospace; }
#unidades .brand-studio11 .segment-logo-container img { width:105px;max-width:144px;max-height:90px;filter:none; }
#unidades .brand-studio11 .soon-badge { position:absolute;top:24px;right:23px;margin:0;font-size:7px;padding:3px 7px;letter-spacing:1px; }
#unidades .brand-studio11 .segment-role { padding-right:105px; }
#unidades .brand-studio11 button:disabled { opacity:1!important;color:#5c6c84;background:#d6dfed;cursor:default!important;border-color:#b8c7dc; }

/* The invitation spans the grid: nine brands, then space for the next idea. */
#unidades .brand-sky { --accent:#67e8f9; grid-column:1/-1; display:grid; grid-template-columns:1fr 1.3fr auto; gap:36px; align-items:center; padding:40px; margin-top:4px; background:radial-gradient(ellipse at 95% 50%,#4c277c3d,transparent 65%),linear-gradient(110deg,#092131,#0b1024 70%); min-height:230px; }
#unidades .brand-sky .sky-invite-brand img { width:200px;max-width:100%;margin-bottom:24px; }
#unidades .brand-sky .segment-role { font-size:9px;letter-spacing:1.5px; }
#unidades .brand-sky h3 { font-size:32px;letter-spacing:-1px;margin-bottom:14px; }
#unidades .brand-sky p { margin:0;max-width:390px;font-size:13px; }
#unidades .brand-sky .btn-outline { width:auto;min-width:192px;background:#67e8f9;color:#06222d;align-self:center; }
#unidades .brand-sky .brand-arrow { color:inherit; }
#unidades .brand-sky .sky-invite-art { position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none; }
.sky-invite-art span { position:absolute;width:300px;height:300px;right:-70px;top:-35px;border:1px solid #67e8f915;border-radius:50%; }
.sky-invite-art span:nth-child(2) { width:400px;height:400px;right:-120px;top:-85px; }
.sky-invite-art span:nth-child(3) { width:500px;height:500px;right:-170px;top:-135px; }
.sky-invite-art b { position:absolute;right:95px;top:-60px;font-size:290px;line-height:1;color:#67e8f906;font-weight:300; }
@media (max-width:1100px) {
  #unidades .brand-sky { grid-template-columns:1fr 1.3fr;gap:25px; }
  #unidades .brand-sky .btn-outline { grid-column:2;justify-self:start; }
  #unidades .brand-sky .sky-invite-brand { grid-row:1/3; }
  #unidades .segment-card { padding:22px; }
  #unidades .brand-stage { margin-inline:-22px; }
  #unidades .brand-art { opacity:.8; }
}
@media (max-width:560px) {
  #unidades .carousel-track { gap:22px; }
  #unidades .segment-card { padding:24px; }
  #unidades .brand-stage { margin-inline:-24px;height:195px; }
  #unidades .segment-card h3 { font-size:24px; }
  #unidades .brand-halcon h3 { font-size:31px; }
  #unidades .segment-card p { font-size:13px; }
  #unidades .brand-sky { display:flex;gap:24px;align-items:flex-start;padding:30px 24px; }
  #unidades .brand-sky h3 { font-size:30px; }
  #unidades .brand-sky .sky-invite-brand img { width:180px;margin-bottom:18px; }
  #unidades .brand-sky .btn-outline { align-self:stretch;width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  #unidades .segment-card, #unidades .brand-arrow { transition:none; }
  #unidades .segment-card:hover { transform:none; }
}

/* Brand CTAs: a tactile arrow capsule, light sweep and individual finishes. */
#unidades a.btn-outline {
  --cta-start: color-mix(in srgb,var(--accent) 84%,#fff);
  --cta-end: var(--accent);
  --cta-ink: #111b20;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:57px;padding:9px 11px 9px 19px;
  border:1px solid color-mix(in srgb,var(--accent) 65%,#fff);
  border-radius:15px;
  background:linear-gradient(115deg,var(--cta-start),var(--cta-end) 65%,var(--cta-start));
  background-size:200% 100%;color:var(--cta-ink);
  box-shadow:inset 0 1px 0 #ffffff40,0 5px 15px #0002;
  font-size:12px;font-weight:700;letter-spacing:.05px;
  transition:transform .25s ease,box-shadow .3s ease,background-position .5s ease;
  -webkit-tap-highlight-color:transparent;
}
#unidades a.btn-outline::before {
  content:'';position:absolute;z-index:-1;inset:-80% auto -80% -65%;width:40%;
  transform:translateX(0) rotate(24deg);
  background:linear-gradient(90deg,transparent,#fff5,transparent);
  animation:brand-cta-sheen 7s ease-in-out infinite;
  pointer-events:none;
}
#unidades .segment-card:nth-child(3n+2) a.btn-outline::before { animation-delay:1.2s; }
#unidades .segment-card:nth-child(3n) a.btn-outline::before { animation-delay:2.4s; }
#unidades a.btn-outline .brand-arrow {
  display:grid;place-items:center;flex:0 0 35px;width:35px;height:35px;
  border-radius:10px;border:1px solid color-mix(in srgb,var(--cta-ink) 12%,transparent);
  background:color-mix(in srgb,var(--cta-ink) 8%,transparent);
  color:var(--cta-ink);font-size:22px;line-height:1;
  transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
#unidades a.btn-outline:hover {
  transform:translateY(-2px);background-position:100% 0;color:var(--cta-ink);
  border-color:color-mix(in srgb,var(--accent) 65%,#fff);
  box-shadow:inset 0 1px 0 #ffffff50,0 8px 25px color-mix(in srgb,var(--accent) 23%,transparent);
}
#unidades a.btn-outline:hover .brand-arrow {
  color:var(--cta-end);background:var(--cta-ink);transform:rotate(45deg);
}
#unidades a.btn-outline:active { transform:translateY(0) scale(.985); }
#unidades a.btn-outline:focus-visible { outline:3px solid var(--accent);outline-offset:4px; }
#unidades .brand-onepercent a.btn-outline { --cta-start:#f0d990;--cta-end:#d6af4b;--cta-ink:#25200e; }
#unidades .brand-feka a.btn-outline { --cta-start:#ffa16a;--cta-end:#ff7545;--cta-ink:#37180a;border-radius:30px; }
#unidades .brand-feka a.btn-outline .brand-arrow { border-radius:50%; }
#unidades .brand-traderia a.btn-outline { --cta-start:#8362d8;--cta-end:#6540b4;--cta-ink:#fff; }
#unidades .brand-trainhub a.btn-outline { --cta-start:#dc3e47;--cta-end:#b92030;--cta-ink:#fff;border-radius:7px; }
#unidades .brand-trainhub a.btn-outline .brand-arrow { border-radius:4px; }
#unidades .brand-agp a.btn-outline { --cta-start:#526fdd;--cta-end:#344fbb;--cta-ink:#fff; }
#unidades .brand-crediapp a.btn-outline { --cta-start:#8ce9fa;--cta-end:#43bfdc;--cta-ink:#073644; }
#unidades .brand-halcon a.btn-outline { --cta-start:#eed9ad;--cta-end:#c4a36a;--cta-ink:#292416; }
#unidades .brand-autopubli a.btn-outline { --cta-start:#e8ffae;--cta-end:#c8f567;--cta-ink:#253318;border-radius:30px; }
#unidades .brand-autopubli a.btn-outline .brand-arrow { border-radius:50%; }
#unidades .brand-sky a.btn-outline { --cta-start:#a3f4fc;--cta-end:#48cce6;--cta-ink:#063044;min-width:218px; }
@keyframes brand-cta-sheen {
  0%,60% { left:-65%; }
  83%,100% { left:140%; }
}
@media (prefers-reduced-motion:reduce) {
  #unidades a.btn-outline, #unidades a.btn-outline .brand-arrow { transition:none; }
  #unidades a.btn-outline::before { animation:none;display:none; }
  #unidades a.btn-outline:hover, #unidades a.btn-outline:hover .brand-arrow, #unidades a.btn-outline:active { transform:none; }
}