/* Premium floating dashboard. Scoped to the hero; real Contigo screenshot. */
#inicio .hero-copy .socials{gap:12px}
#inicio .hero-copy .socials a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:9px;border-radius:9px;transition:background .2s ease,transform .2s ease}
#inicio .hero-copy .socials a:hover{background:#152a3e;transform:translateY(-2px)}
#inicio .hero-copy .socials .hero-social-logo{display:block;width:24px;height:24px;object-fit:contain}
@media(prefers-reduced-motion:reduce){#inicio .hero-copy .socials a{transition:none}#inicio .hero-copy .socials a:hover{transform:none}}
#inicio .hero-name{margin:0 0 22px;font-size:clamp(21px,2.2vw,28px);font-weight:800;line-height:1.3;letter-spacing:-.055em}
#inicio .hero-given-name{color:#f0f2f6}
#inicio .hero-family-name{color:#168dff}
#inicio.hero {
  --hero-cyan: #44c8ef;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 0;
  padding: 66px 28px 30px;
  gap: 0;
  background: radial-gradient(ellipse at 50% 64%, #103f5738, transparent 65%), #04111b;
  border-inline: 1px solid #18344366;
  border-bottom: 1px solid #18344366;
  border-radius: 0 0 22px 22px;
}
#inicio.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 135%;
  height: 750px;
  top: 215px;
  left: -17.5%;
  border: 1px solid #65b8d515;
  border-radius: 50%;
  box-shadow: 0 0 0 85px #62bbd504, 0 0 0 170px #62bbd503;
  pointer-events: none;
}
#inicio .hero-copy { text-align: center; max-width: 880px; position: relative; z-index: 2; align-self: center; }
#inicio .eyebrow { color: #b0d8e8; background: #0a2232; border-color: #244453; letter-spacing: .09em; font-size: 10px; margin-bottom: 17px; }
#inicio .eyebrow::before { background: var(--hero-cyan); box-shadow: 0 0 10px #44c8ef55; }
#inicio .role { margin-bottom: 18px; font-size: 12px; color: #9eb4c3; }
#inicio h1 { max-width: 850px; margin-inline: auto; margin-bottom: 20px; font-size: clamp(36px, 4.8vw, 62px); line-height: 1.09; letter-spacing: -.047em; font-weight: 600; color: #dfedf3; }
#inicio h1 br:first-child { display: none; }
#inicio h1 span { color: #63c5e5; background: linear-gradient(110deg,#a2deee,#45b9df); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#inicio .hero-description { max-width: 610px; margin: 0 auto; font-size: 14px; line-height: 1.8; color: #a4b7c5; }
#inicio .actions { justify-content: center; gap: 14px; margin-top: 26px; }
#inicio .button { min-height: 47px; padding: 11px 23px; border-radius: 30px; font-size: 12px; }
#inicio .primary { background: linear-gradient(125deg,#087da9,#2fb8df); color: #fff; border: 1px solid #5dcee94d; box-shadow: inset 0 1px 0 #b1efff40, 0 8px 25px #0c9ccf16; }
#inicio .primary:hover { box-shadow: inset 0 1px 0 #b1efff60, 0 8px 30px #0c9ccf30; }
#inicio .secondary { background: #0b233580; border: 1px solid #314b5c; color: #dbe9f1; box-shadow: inset 0 1px 0 #c0edff0d; }
#inicio .socials { justify-content: center; gap: 22px; margin-top: 18px; font-size: 11px; }
#inicio .socials a { color: #96b1c2; padding: 5px 0; }
#inicio .socials a:hover { color: #b2e5f4; }
.dashboard-stage { width: min(100%, 980px); position: relative; margin-top: 65px; perspective: 1600px; isolation: isolate; padding: 0 12px 16px; }
.dashboard-halo { position: absolute; z-index: -1; top: -30px; left: 13%; width: 74%; height: 130px; border-radius: 50%; border-top: 3px solid #65dcf3; box-shadow: 0 -8px 24px #2ac8f34d, inset 0 13px 30px #128bc333; filter: blur(1px); pointer-events: none; }
.dashboard-stage::before { content: ''; position: absolute; z-index: -1; inset: -70px -25px 25%; background: radial-gradient(ellipse at center,#0873a42b,transparent 68%); pointer-events: none; }
.dashboard-browser { display: block; position: relative; overflow: hidden; border: 1px solid #56788788; border-radius: 15px; background: #07131d; padding: 6px; transform: rotateX(4deg); transform-origin: 50% 80%; box-shadow: 0 0 0 5px #203e4b50, 0 26px 55px #0008, 0 4px 12px #0007, inset 0 1px 0 #b9e8f529; transition: transform 650ms cubic-bezier(.22,1,.36,1), border-color 350ms ease, box-shadow 350ms ease; }
.dashboard-browser:hover, .dashboard-browser:focus-visible { transform: rotateX(0deg) translateY(-5px); border-color: #71bdd4; box-shadow: 0 0 0 5px #274a5955, 0 32px 65px #0008, 0 0 35px #1c9bc916; }
.dashboard-browser:focus-visible { outline: 2px solid #7cd7ee; outline-offset: 8px; }
.dashboard-chrome { min-height: 43px; display: flex; align-items: center; gap: 16px; padding: 0 14px; border-bottom: 1px solid #233844; color: #9eb9c8; }
.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 6px; height: 6px; border-radius: 50%; background: #49606e; }
.browser-dots i:first-child { background: #77939f; }
.browser-address { display: inline-flex; align-items: center; gap: 7px; margin-inline: auto; padding: 4px 23px; border: 1px solid #1d3542; border-radius: 6px; background: #0b1c27; font-size: 10px; letter-spacing: .02em; }
.browser-address svg { width: 12px; height: 12px; }
.browser-open { font-size: 18px; }
.dashboard-capture { display: block; width: 100%; height: auto; border-radius: 2px; }
.dashboard-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px 6px; color: #9ab8c7; font-size: 9px; letter-spacing: .06em; }
.caption-divider { margin-inline: 8px; color: #426475; }
.dashboard-caption>span:last-child { color: #75cde5; letter-spacing: 0; }
.dashboard-stack-label { display: flex; justify-content: center; flex-wrap: wrap; gap: 23px; margin-top: 23px; color: #7e9aab; font-size: 10px; letter-spacing: .03em; }
#inicio .hero-bottom { position: relative; z-index: 1; grid-column: auto; justify-content: center; align-self: center; max-width: 800px; width: 100%; margin-top: 25px; padding: 24px 0 0; border-top: 1px solid #233d4b77; }
#inicio .hero-bottom>div { padding-inline: 30px; border-color: #233d4b77; }
#inicio .hero-bottom>div:first-child { padding-left: 30px; }
#inicio .hero-bottom strong { color: #d3e5ef; font-size: 21px; }
#inicio .hero-bottom span { color: #8ca7b8; font-size: 10px; }
@media(max-width:760px) {
  #inicio.hero { padding: 40px 16px 25px; }
  #inicio h1 { font-size: clamp(34px,7.4vw,48px); }
  #inicio .hero-description { font-size: 13px; }
  #inicio .eyebrow { font-size: 8px; letter-spacing: .06em; }
  .dashboard-stage { margin-top: 48px; padding: 0 3px 10px; }
  .dashboard-browser { padding: 3px; border-radius: 10px; transform: none; }
  .dashboard-halo { height: 80px; top: -20px; border-top-width: 2px; }
  .dashboard-chrome { min-height: 33px; padding-inline: 8px; gap: 7px; }
  .browser-address { font-size: 8px; padding: 3px 8px; }
  .browser-dots { gap: 3px; }.browser-dots i { width: 4px; height: 4px; }
  .dashboard-caption { font-size: 7px; padding: 9px 5px 5px; letter-spacing: 0; }
  .caption-divider { margin-inline: 3px; }
  .dashboard-stack-label { gap: 14px; font-size: 9px; margin-top: 19px; }
  #inicio .hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 17px; text-align: left; }
  #inicio .hero-bottom>div, #inicio .hero-bottom>div:first-child { padding: 0 10px 0 18px; }
  #inicio .hero-bottom strong { font-size: 19px; }
}
@media(prefers-reduced-motion:no-preference) {
  #inicio .hero-copy { animation: dashboard-copy-in 650ms ease-out both; }
  .dashboard-stage { animation: dashboard-in 950ms cubic-bezier(.22,1,.36,1) 120ms both; }
  @keyframes dashboard-copy-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
  @keyframes dashboard-in { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
}
@media(prefers-reduced-motion:reduce) {
  .dashboard-browser, .dashboard-browser:hover, .dashboard-browser:focus-visible { transform: none; transition: none; }
}

/* Requested split composition with a physical laptop built in HTML/CSS. */
#inicio.hero{display:grid;grid-template-columns:1fr 1.06fr;align-items:center;column-gap:30px;min-height:690px;padding:75px 28px 42px;background:radial-gradient(ellipse at 85% 38%,#064b842e,transparent 53%),#040c14;border:0;border-radius:0}
#inicio.hero::before{width:290px;height:610px;top:-330px;left:auto;right:10%;border:0;border-right:19px solid #087ce2;border-radius:50%;transform:rotate(26deg);box-shadow:17px 0 35px #087fff2e,inset -15px 0 28px #008cff18}
#inicio .hero-copy{text-align:left;max-width:560px;align-self:center}
#inicio h1{font-size:clamp(37px,4.1vw,57px);font-weight:750;line-height:1.12;margin-inline:0;letter-spacing:-.045em}
#inicio h1 br:first-child{display:initial}
#inicio h1 span{background:none;-webkit-text-fill-color:initial;color:#168dff}
#inicio .hero-description{font-size:14px;margin-inline:0;max-width:500px;color:#b2c2d3}
#inicio .actions,#inicio .socials{justify-content:flex-start}
#inicio .button{border-radius:12px;padding-inline:24px}
#inicio .primary{background:linear-gradient(135deg,#249eff,#0966e8);border-color:#3e9efa55}
#inicio .secondary{background:#030b13;border-color:#496074;border-radius:26px}
#inicio .socials{margin-top:28px;gap:26px}
.dashboard-stage--laptop{width:100%;margin:45px 0 0;padding:0;min-height:390px;perspective:1200px;align-self:center}
.dashboard-stage--laptop::before{inset:40px -20px -25px;background:radial-gradient(ellipse,#0b65a526,transparent 67%)}
.dashboard-stage--laptop .dashboard-halo{top:auto;bottom:0;left:-4%;width:112%;height:100px;border:0;box-shadow:none;background:radial-gradient(ellipse,#223c5266,transparent 70%);filter:blur(10px)}
.dashboard-stage--laptop .dashboard-browser{position:relative;margin-top:35px;padding:12px 9px 13px;transform:rotate(-7deg) rotateY(-12deg);border:2px solid #62748f;border-bottom:7px solid #101722;border-radius:16px 16px 5px 5px;background:#03070d;box-shadow:inset 0 0 0 3px #0d1522,0 20px 45px #0009;z-index:2}
.dashboard-stage--laptop .dashboard-browser:hover,.dashboard-stage--laptop .dashboard-browser:focus-visible{transform:rotate(-7deg) rotateY(-12deg);border-color:#83adc9;box-shadow:inset 0 0 0 3px #0d1522,0 20px 45px #0009,0 0 25px #157ed21c}
.dashboard-stage--laptop .dashboard-browser:before{content:'';position:absolute;top:5px;left:50%;width:3px;height:3px;background:#465877;border-radius:50%}
.dashboard-stage--laptop .dashboard-chrome{min-height:26px;padding-inline:7px;gap:7px;background:#0e1929}.dashboard-stage--laptop .browser-address{font-size:7px;padding:2px 10px;border:0;background:none}.dashboard-stage--laptop .browser-dots i{width:4px;height:4px}.dashboard-stage--laptop .browser-open{font-size:12px}
.dashboard-stage--laptop .dashboard-caption{display:none}.dashboard-stage--laptop .dashboard-capture{border-radius:0 0 2px 2px;filter:brightness(.94)}
.hero-device-base{position:relative;margin-top:-4px;margin-inline:-10px;height:110px;transform:rotate(-7deg) rotateY(-12deg) rotateX(47deg);transform-origin:top center;background:linear-gradient(120deg,#65758e,#202e45 40%,#43546e 80%,#7a8ca7);border-radius:3px 3px 15px 15px;border-bottom:6px solid #72849c;box-shadow:inset 0 1px 0 #bed6fa55,0 5px 0 #111c2c,0 23px 30px #0007;z-index:1}
.hero-device-keys{position:absolute;inset:8px 7% 39px;border:2px solid #344359;border-radius:5px;background:repeating-linear-gradient(0deg,transparent 0 9px,#52617a 10px 12px),repeating-linear-gradient(90deg,#060c16 0 19px,#52617a 20px 22px);box-shadow:inset 0 0 8px #0008}
.hero-device-trackpad{position:absolute;bottom:5px;left:36%;width:28%;height:28px;border:1px solid #91a6c866;border-radius:4px;background:linear-gradient(130deg,#ffffff09,#00000012)}
.hero-device-note{position:absolute;top:-45px;right:0;color:#b5c8dd;font:italic 16px/1.5 Georgia,serif;transform:rotate(5deg)}.hero-device-note svg{display:block;width:55px;height:55px;margin-left:15px}
.dashboard-stage--laptop .dashboard-stack-label{margin-top:0;position:relative;z-index:2;font-size:9px;gap:15px;color:#7997af}
#inicio .hero-bottom{grid-column:1/-1;justify-content:flex-start;align-self:end;max-width:690px;margin:28px 0 0;padding-top:22px;border-top:0}
#inicio .hero-bottom>div{padding-inline:25px}#inicio .hero-bottom>div:first-child{padding-left:0}
@media(max-width:1000px) and (min-width:761px){#inicio.hero{padding-inline:5px;column-gap:25px}#inicio h1{font-size:38px}.dashboard-stage--laptop{min-height:320px}.hero-device-note{font-size:13px}#inicio .hero-description{font-size:13px}}
@media(max-width:760px){#inicio.hero{display:flex;flex-direction:column;padding:38px 8px 28px;min-height:0;gap:0}#inicio .hero-copy{max-width:none;width:100%}#inicio h1{font-size:clamp(35px,7.8vw,52px)}#inicio .hero-description{font-size:13px}#inicio .actions{gap:10px}#inicio .button{padding-inline:19px}.dashboard-stage--laptop{margin-top:55px;min-height:0;width:90%;max-width:520px;padding-bottom:5px}.dashboard-stage--laptop .dashboard-browser{margin-top:15px;padding:10px 6px 8px}.hero-device-base{height:80px;margin-inline:-5px}.hero-device-keys{bottom:30px}.hero-device-trackpad{height:21px}.hero-device-note{top:-37px;right:-2%;font-size:11px}.hero-device-note svg{width:30px;height:30px}.dashboard-stage--laptop .dashboard-stack-label{font-size:8px;gap:11px;margin-top:-8px}#inicio .hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:none;width:100%;margin-top:28px}#inicio .hero-bottom>div,#inicio .hero-bottom>div:first-child{padding:0 12px;border-left:1px solid #233d4b77}}
@media(prefers-reduced-motion:reduce){.dashboard-stage--laptop,.dashboard-stage--laptop .dashboard-browser{animation:none;transition:none}}

/* A single rotated assembly keeps the display and keyboard hinge connected. */
.dashboard-stage--laptop{min-height:440px;perspective:1500px;margin-top:40px;padding:38px 5px 0}
.hero-laptop-unit{position:relative;width:100%;transform:rotate(-8deg) rotateY(-13deg);transform-style:preserve-3d;filter:drop-shadow(0 30px 25px #0009)}
.dashboard-stage--laptop .dashboard-browser,.dashboard-stage--laptop .dashboard-browser:hover,.dashboard-stage--laptop .dashboard-browser:focus-visible{margin:0 5%;padding:12px 9px 16px;transform:none;border:2px solid #65718e;border-bottom:10px solid #080b12;border-radius:17px 17px 5px 5px;box-shadow:inset 0 0 0 3px #101624,0 0 1px #aac6f5;overflow:hidden}
.dashboard-stage--laptop .dashboard-browser:hover,.dashboard-stage--laptop .dashboard-browser:focus-visible{border-color:#879aba}
.dashboard-stage--laptop .dashboard-chrome{height:26px;min-height:26px;background:#111c2d}
.dashboard-stage--laptop .dashboard-capture{aspect-ratio:1.48;object-fit:contain;background:#0d1828;border:1px solid #263650;filter:brightness(.94)}
.hero-device-base{position:relative;z-index:3;margin:-1px 0 0;width:100%;height:132px;transform:perspective(650px) rotateX(56deg);transform-origin:center top;border:1px solid #6b7c96;border-bottom:7px solid #6d7b94;border-radius:2px 2px 16px 16px;background:linear-gradient(115deg,#7a879e 0%,#3c4b66 18%,#27354e 48%,#4e607e 85%,#7f8fa9);box-shadow:inset 0 2px 0 #cad9f855,0 4px 0 #152137,0 7px 3px #0008}
.hero-device-base:before{content:'';position:absolute;left:7%;right:7%;top:-3px;height:6px;background:linear-gradient(90deg,#080e19,#25334b 45%,#080e19);border-radius:0 0 4px 4px}
.hero-device-base:after{content:'';position:absolute;bottom:-4px;left:39%;width:22%;height:4px;background:#18273e;border-radius:0 0 7px 7px}
.hero-device-keys{inset:10px 8% 49px;border:3px solid #152139;border-radius:7px;background:repeating-linear-gradient(0deg,transparent 0 10px,#52617a 11px 13px),repeating-linear-gradient(90deg,#050a13 0 21px,#53617a 22px 25px);box-shadow:inset 0 2px 5px #000c,0 1px 0 #b0c6e533}
.hero-device-trackpad{bottom:7px;left:34%;width:32%;height:35px;border:1px solid #9babca77;border-radius:5px;background:linear-gradient(130deg,#7588a522,#11213a22);box-shadow:inset 0 1px 2px #0002}
.dashboard-stage--laptop .dashboard-stack-label{margin-top:-28px}
.dashboard-stage--laptop .dashboard-halo{bottom:-5px;height:90px;background:radial-gradient(ellipse,#28496355,transparent 66%)}
.hero-device-note{top:-12px;right:-3%;font-size:15px}.hero-device-note svg{width:65px;height:65px;margin-left:20px}
@media(min-width:1100px){.dashboard-stage--laptop{margin-right:-20px;width:calc(100% + 20px)}}
@media(max-width:1000px) and (min-width:761px){.dashboard-stage--laptop{min-height:360px;padding-top:50px}.hero-device-base{height:112px}.hero-device-keys{bottom:43px}.hero-device-trackpad{height:29px}.hero-device-note{font-size:12px}}
@media(max-width:760px){.dashboard-stage--laptop{margin:38px 0 0;width:94%;min-height:0;padding:33px 0 12px}.hero-laptop-unit{transform:rotate(-7deg) rotateY(-10deg)}.dashboard-stage--laptop .dashboard-browser{padding:10px 5px 10px;margin-inline:5%;border-bottom-width:7px;border-radius:12px 12px 3px 3px}.dashboard-stage--laptop .dashboard-chrome{min-height:21px;height:21px}.hero-device-base{height:100px}.hero-device-keys{inset:8px 8% 39px;border-width:2px;background:repeating-linear-gradient(0deg,transparent 0 7px,#52617a 8px 10px),repeating-linear-gradient(90deg,#050a13 0 13px,#53617a 14px 16px)}.hero-device-trackpad{height:27px;bottom:6px}.hero-device-note{top:-17px;right:0;font-size:11px}.hero-device-note svg{width:35px;height:35px}.dashboard-stage--laptop .dashboard-stack-label{margin-top:-22px}}

/* Fit the full device inside the hero and remove screenshot letterboxing. */
#inicio .dashboard-stage--laptop{width:100%;margin-right:0;padding:45px 22px 10px;min-height:390px;box-sizing:border-box}
.hero-laptop-unit{width:92%;margin-inline:auto;transform:rotate(-6deg) rotateY(-9deg);filter:drop-shadow(0 24px 24px #0009)}
.dashboard-stage--laptop .dashboard-browser,.dashboard-stage--laptop .dashboard-browser:hover,.dashboard-stage--laptop .dashboard-browser:focus-visible{margin-inline:4%;padding:10px 7px 10px;border-radius:13px 13px 4px 4px;border-bottom-width:8px}
.dashboard-stage--laptop .dashboard-capture{aspect-ratio:auto;object-fit:initial;height:auto;border:0;background:none;filter:none}
.dashboard-stage--laptop .dashboard-chrome{height:22px;min-height:22px;border-bottom:0}
.hero-device-base{width:100%;height:125px;margin-top:-1px;transform:perspective(700px) rotateX(45deg);border-bottom-width:5px;border-radius:2px 2px 12px 12px}
.hero-device-keys{display:flex;flex-direction:column;gap:3px;inset:9px 8% 40px;padding:4px;background:#121c2c;border:1px solid #142137;box-shadow:inset 0 2px 5px #0008,0 1px 0 #8fa9cc30;border-radius:5px}
.device-key-row{display:flex;flex:1;gap:3px;min-height:0}
.device-key-row i{display:block;flex:1;min-width:0;background:linear-gradient(#172236,#080e19);border:1px solid #4c5d764d;border-top-color:#7587a166;border-radius:2px;box-shadow:0 1px 1px #0009}
.device-key-row:nth-child(3) i:first-child,.device-key-row:nth-child(3) i:last-child{flex:1.5}
.device-key-row:nth-child(4) i:first-child,.device-key-row:nth-child(4) i:last-child{flex:2}
.device-key-row:last-child i:nth-child(4){flex:5}
.hero-device-trackpad{height:27px;bottom:6px;left:35%;width:30%;border-color:#8da0bc55}
.hero-device-note{right:0;top:-8px;font-size:13px}.hero-device-note svg{width:45px;height:45px}
.dashboard-stage--laptop .dashboard-stack-label{margin-top:-12px}
@media(min-width:1100px){#inicio .dashboard-stage--laptop{padding-top:55px;min-height:400px}}
@media(max-width:760px){#inicio .dashboard-stage--laptop{width:100%;margin-top:38px;padding:35px 13px 10px;min-height:0}.hero-laptop-unit{width:92%;transform:rotate(-5deg) rotateY(-7deg)}.hero-device-base{height:94px}.hero-device-keys{inset:7px 8% 33px;padding:3px;gap:2px}.device-key-row{gap:2px}.hero-device-trackpad{height:22px;bottom:5px}.hero-device-note{font-size:11px;top:-10px;right:3%}.hero-device-note svg{height:30px;width:30px}.dashboard-stage--laptop .dashboard-stack-label{margin-top:-13px}.dashboard-stage--laptop .dashboard-browser{padding:8px 5px;border-bottom-width:6px}.dashboard-stage--laptop .dashboard-chrome{height:20px;min-height:20px}}

/* Photorealistic scene with a separate, unmodified project screenshot. */
#inicio.hero{position:relative;overflow:clip;min-height:700px;grid-template-columns:1fr 1fr;background:#040c14;padding:70px 24px 38px}
#inicio.hero::before{display:none}
#inicio .hero-copy{z-index:3;max-width:540px}
#inicio h1{font-size:clamp(38px,4.1vw,56px)}
.hero-real-scene{position:absolute;inset:0 0 0 32%;overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 14%);z-index:1}
.hero-scene-canvas{position:absolute;width:1536px;height:1024px;left:50%;top:50%;transform:translate(-50%,-50%) scale(.69);transform-origin:center}
.hero-scene-art{position:absolute;inset:0;width:1536px;height:1024px;max-width:none}
.hero-real-screen{display:block;position:absolute;left:0;top:0;width:1920px;height:917px;transform-origin:0 0;pointer-events:auto;overflow:hidden;background:#0b192a}
.hero-real-screen img{width:1920px;height:917px;max-width:none;filter:brightness(.88)}
.hero-real-screen:focus-visible{outline:5px solid #6ed5ff;outline-offset:5px}
#inicio .hero-bottom{position:relative;z-index:3;grid-column:1/-1;margin-top:55px;max-width:660px}
@media(min-width:1200px){#inicio .hero-description{max-width:480px}}
@media(min-width:761px){.hero-scene-canvas{left:calc(50% - 45px)}}
@media(max-width:1000px) and (min-width:761px){.hero-real-scene{left:35%}.hero-scene-canvas{transform:translate(-50%,-50%) scale(.55)}#inicio .hero-copy{max-width:440px}#inicio h1{font-size:38px}}
@media(max-width:760px){#inicio.hero{display:flex;min-height:0;padding:38px 8px 24px}#inicio .hero-copy{max-width:none}.hero-real-scene{position:relative;inset:auto;width:100%;height:330px;mask-image:linear-gradient(0deg,transparent,#000 12%,#000 90%,transparent);margin-top:14px}.hero-scene-canvas{left:42%;transform:translate(-50%,-50%) scale(.4)}#inicio .hero-bottom{margin-top:10px}#inicio h1{font-size:clamp(35px,7.8vw,52px)}}
@media(max-width:420px){.hero-scene-canvas{left:36%;transform:translate(-50%,-50%) scale(.33)}.hero-real-scene{height:285px}}

.hero-real-screen{transform:matrix3d(0.243624562811,-0.0394057278969,0,-7.79898390096e-05,-0.0817326010793,0.410288300838,0,-4.76154211134e-05,0,0,1,0,709,210,0,1);}

/* Statistics belong to the text column, immediately below the social links. */
#inicio .hero-copy > .hero-bottom {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 0;
  margin: 30px 0 0;
  padding: 0;
  border: 0;
  gap: 0;
  justify-content: flex-start;
  text-align: left;
}
#inicio .hero-copy > .hero-bottom > div {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  border: 0;
  border-right: 1px solid #233d4b77;
  gap: 5px;
}
#inicio .hero-copy > .hero-bottom > div:first-child { padding-left: 0; }
#inicio .hero-copy > .hero-bottom > div:last-child { border-right: 0; }
#inicio .hero-copy > .hero-bottom strong { color: #d3e5ef; font-size: 21px; line-height: 1.3; }
#inicio .hero-copy > .hero-bottom > div:first-child { flex-shrink: 0; }
#inicio .hero-copy > .hero-bottom > div:last-child { min-width: 0; }
#inicio .hero-copy > .hero-bottom span { color: #8ca7b8; font-size: 10px; }
.hero-real-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px 100px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 15%, #247ec455, transparent 55%),
    radial-gradient(ellipse at 90% 85%, #174a9766, transparent 60%),
    linear-gradient(135deg, #07182c, #0b2d51 55%, #06152b);
  box-shadow: inset 0 0 100px #020b1c88;
}
.hero-real-screen::before {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid #77c6ff33;
  border-radius: 18px;
  pointer-events: none;
}
.hero-real-screen img {
  position: relative;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border: 2px solid #a5d4f966;
  border-radius: 22px;
  background: #f3f4f6;
  filter: none;
  box-shadow: 0 22px 65px #0007, 0 0 45px #368bd32b;
}
@media (max-width: 480px) {
  #inicio .hero-copy > .hero-bottom { margin-top: 24px; }
  #inicio .hero-copy > .hero-bottom > div { padding-inline: 14px; }
  #inicio .hero-copy > .hero-bottom strong { font-size: 18px; }
  #inicio .hero-copy > .hero-bottom span { font-size: 9px; }
}