:root{scroll-padding-top:100px}
.functions-page{background:#06130d;color:#f1fff4}
.functions-page .nav{background:rgba(4,17,10,.72)}
.functions-page .nav-links a[href="funciones.html"],.functions-page .nav-links a[href="#mapa"]{color:#85edac}
.functions-page em{font-style:normal;color:#8eeab2}
.functions-page .label{color:#88e8aa}
.functions-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;min-height:min(960px,100svh);padding:110px clamp(24px,5.5vw,92px) 80px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 40% 65% at 77% 44%,rgba(15,122,63,.3),transparent 78%),radial-gradient(ellipse 45% 50% at 2% 95%,rgba(7,80,45,.3),transparent 78%),#06130d}
.functions-hero:before,.functions-ending:before{content:"";position:absolute;z-index:-1;right:-8%;top:-25%;width:min(65vw,900px);aspect-ratio:1;background:#70e89c;opacity:.055;mask:url("/launch/vitalsense-isotype-texture.webp") center/contain no-repeat;pointer-events:none}
.functions-hero-grid{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,transparent 0 49.95%,rgba(172,248,194,.08) 50%,transparent 50.05%) 0 0/144px 144px,linear-gradient(0deg,transparent 0 49.95%,rgba(172,248,194,.05) 50%,transparent 50.05%) 0 0/144px 144px;mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);opacity:.45}
.functions-hero-content{position:relative;z-index:3;max-width:790px;padding-bottom:22px}
.functions-eyebrow{font-size:.78rem;letter-spacing:.2em;margin-bottom:35px}
.functions-hero h1{font-size:clamp(4.2rem,7.2vw,8.2rem);line-height:1.01;letter-spacing:-.067em;font-weight:690;margin:0 0 34px;text-wrap:balance}
.functions-hero-lead{font-size:clamp(1.08rem,1.48vw,1.28rem);line-height:1.62;max-width:600px;color:#c1d9c8;margin-bottom:0}
.functions-primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;background:#74e8a1;color:#032010;border:1px solid #a2f4ba;border-radius:100px;padding:17px 22px;font-size:.96rem;font-weight:760;box-shadow:0 12px 45px rgba(44,203,105,.14);transition:transform .3s ease,background .3s ease,box-shadow .3s ease}
.functions-primary-link:hover{background:#bbffd0;transform:translateY(-3px);box-shadow:0 18px 55px rgba(44,203,105,.25)}
.functions-hero-content .functions-primary-link{margin-top:34px}
.functions-hero-count{display:block;margin-top:70px;font-size:.75rem;letter-spacing:.19em;color:#8cb99b}
.functions-hero-art{position:relative;z-index:2;min-height:650px;height:min(78svh,800px);display:grid;place-items:center}
.hero-art-halo{position:absolute;inset:5% -8%;background:radial-gradient(circle at 50% 50%,rgba(66,235,130,.26),rgba(29,112,61,.09) 38%,transparent 70%);filter:blur(18px);animation:halo-pulse 7s ease-in-out infinite}
.hero-art-number{position:absolute;top:14%;left:8%;font-size:clamp(14rem,24vw,30rem);line-height:1;font-weight:780;letter-spacing:-.13em;color:rgba(183,255,204,.045);user-select:none}
.hero-art-product{position:relative;z-index:2;max-height:100%;height:90%;width:auto;object-fit:contain;filter:drop-shadow(0 42px 42px rgba(0,0,0,.6)) drop-shadow(0 0 45px rgba(80,241,130,.15));transform:rotate(-9deg) translateY(3%);animation:product-float 8s ease-in-out infinite}
.hero-art-note{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:8px 15px 8px 8px;border:1px solid rgba(202,255,214,.28);border-radius:100px;background:rgba(7,35,20,.59);backdrop-filter:blur(22px);box-shadow:inset 0 1px rgba(255,255,255,.15),0 24px 42px rgba(0,0,0,.25);font-size:.68rem;font-weight:780;letter-spacing:.12em;color:#e2ffea}
.hero-art-note img{width:44px;height:44px;object-fit:contain}
.note-sleep{top:22%;left:0}.note-heart{top:48%;right:-1%}.note-move{bottom:16%;left:1%}
.functions-hero-bottom{position:absolute;bottom:30px;left:clamp(24px,5.5vw,92px);right:clamp(24px,5.5vw,92px);display:flex;justify-content:space-between;align-items:center;color:#a2b9a9;font-size:.7rem;letter-spacing:.18em;font-weight:730}
.functions-hero-bottom span:last-child{font-size:1.3rem;color:#9beaaf}
.functions-chapters{position:sticky;z-index:30;top:68px;display:flex;justify-content:center;gap:0;padding:0 clamp(20px,4vw,64px);border-top:1px solid rgba(213,255,225,.12);border-bottom:1px solid rgba(213,255,225,.18);background:rgba(5,22,13,.89);backdrop-filter:blur(20px);overflow-x:auto;scrollbar-width:none}
.functions-chapters::-webkit-scrollbar{display:none}
.functions-chapters a{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:22px clamp(14px,2vw,31px);border-bottom:2px solid transparent;color:#b7d0be;font-size:.86rem;font-weight:640;white-space:nowrap;transition:color .25s,border-color .25s}
.functions-chapters a span:first-child{color:#72ba8d;font-size:.69rem;font-weight:770;letter-spacing:.07em}
.functions-chapters a:hover,.functions-chapters a.is-active{color:white;border-color:#75e5a4}
.functions-atlas{position:relative;padding:clamp(112px,13vw,200px) clamp(22px,5vw,80px) 120px;background:radial-gradient(ellipse 70% 35% at 50% 60%,rgba(16,83,46,.27),transparent 80%),#091a12;overflow:hidden}
.functions-section-heading{max-width:1180px;text-align:center;margin:0 auto 75px}
.functions-section-heading .label{margin-bottom:28px}
.functions-section-heading h2{font-size:clamp(3.65rem,7.4vw,8rem);line-height:1.02;letter-spacing:-.07em;font-weight:680;margin:0 auto 31px}
.functions-section-heading>p:last-child{max-width:660px;margin:0 auto;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.62;color:#c1d9c8}
.atlas-figure{max-width:1600px;margin:0 auto;padding:clamp(10px,1.7vw,22px);border:1px solid rgba(187,248,201,.23);border-radius:32px;background:linear-gradient(130deg,rgba(196,255,212,.1),rgba(62,140,88,.045) 50%,rgba(186,255,200,.1));box-shadow:0 35px 100px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.12);backdrop-filter:blur(20px)}
.atlas-figure img{width:100%;height:auto;border-radius:19px;background:#002217}
.atlas-figure figcaption{padding:20px 8px 6px;color:#aecbb7;font-size:.9rem;text-align:center}
.atlas-mobile-hint{display:none}
.atlas-clarity{max-width:1140px;margin:32px auto 0;padding:18px 24px;border-left:2px solid #69d997;color:#a9c7b2;background:rgba(149,239,171,.045);font-size:.92rem;line-height:1.6}
.functions-detail{background:#06130d}
.signal-chapter{position:relative;display:grid;grid-template-columns:minmax(300px,.43fr) minmax(0,.57fr);gap:clamp(50px,7vw,125px);max-width:1680px;margin:auto;padding:clamp(105px,12vw,180px) clamp(22px,5vw,80px);border-bottom:1px solid rgba(202,255,213,.15);scroll-margin-top:125px}
.signal-chapter:nth-child(even){background:radial-gradient(ellipse 55% 40% at 98% 35%,rgba(44,143,74,.13),transparent 77%)}
.chapter-intro{position:sticky;top:170px;align-self:start}
.chapter-kicker{display:block;color:#9be7b4;font-size:.78rem;font-weight:760;letter-spacing:.17em;margin-bottom:12px}
.chapter-intro img{display:block;width:clamp(130px,18vw,245px);height:clamp(115px,16vw,215px);object-fit:contain;object-position:left center;filter:drop-shadow(0 18px 30px rgba(57,229,112,.13));margin:3px 0 26px -13px}
.chapter-intro h2{font-size:clamp(3.25rem,4.5vw,6.5rem);line-height:1.05;letter-spacing:-.067em;font-weight:680;margin:0 0 27px}
.chapter-intro>p{max-width:560px;font-size:clamp(1.06rem,1.4vw,1.22rem);line-height:1.62;color:#bdd4c2;margin:0}
.signal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-content:start}
.signal-card{position:relative;min-height:285px;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.5vw,38px);border:1px solid rgba(210,255,219,.2);border-radius:28px;background:linear-gradient(145deg,rgba(214,255,224,.11),rgba(133,220,157,.055) 52%,rgba(11,56,29,.28));box-shadow:inset 0 1px rgba(255,255,255,.12),0 22px 60px rgba(0,0,0,.14);backdrop-filter:blur(22px);transition:transform .45s,border-color .45s,box-shadow .45s}
.signal-card:before{content:"";position:absolute;right:0;top:0;width:55%;height:60%;border-radius:inherit;background:radial-gradient(circle at 100% 0,rgba(109,248,155,.12),transparent 75%);pointer-events:none}
.signal-card:hover{transform:translateY(-6px);border-color:rgba(165,251,187,.5);box-shadow:inset 0 1px rgba(255,255,255,.18),0 28px 68px rgba(0,0,0,.24)}
.signal-number{display:block;color:#a4f5c1;font-size:clamp(2.7rem,4vw,4.8rem);font-weight:660;line-height:1;letter-spacing:-.06em}
.signal-rule{display:block;width:42px;height:1px;background:#71d799;margin:26px 0 auto}
.signal-card h3{font-size:clamp(1.35rem,1.8vw,2.05rem);line-height:1.16;letter-spacing:-.045em;font-weight:640;color:#fff;margin:22px 0 12px}
.signal-card p{font-size:1rem;line-height:1.55;color:#bed5c4;margin:0}
.signal-grid .signal-card:last-child:nth-child(odd){grid-column:span 2;min-height:225px}
.functions-app{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(60px,9vw,150px);min-height:750px;padding:100px clamp(24px,8vw,160px);overflow:hidden;background:radial-gradient(ellipse 50% 65% at 28% 50%,rgba(48,170,92,.2),transparent 75%),#0b2115}
.functions-app-media{position:relative;width:min(100%,390px);aspect-ratio:2/3;margin:auto;filter:drop-shadow(0 32px 42px rgba(0,0,0,.55));transform:rotate(-8deg)}
.functions-app-chassis{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.functions-app-screen{position:absolute;left:17%;top:2.6%;width:66%;height:94.8%;object-fit:cover;object-position:top center;border-radius:20px}
.functions-app-lens{position:absolute;top:4.15%;left:calc(50% - 5px);width:10px;height:10px;border:2px solid #091119;border-radius:50%;background:#09111b;box-shadow:0 0 0 3px #080b10}
.functions-app-copy{max-width:770px}
.functions-app-copy .label{margin-bottom:30px}
.functions-app-copy h2{font-size:clamp(3.8rem,6vw,7.2rem);line-height:1.03;letter-spacing:-.07em;font-weight:680;margin:0 0 32px}
.functions-app-copy>p:not(.label){font-size:clamp(1.07rem,1.5vw,1.25rem);line-height:1.62;max-width:590px;color:#c3dccb;margin:0 0 35px}
.functions-ending{position:relative;isolation:isolate;min-height:690px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:130px 24px 95px;overflow:hidden;background:radial-gradient(ellipse 60% 65% at 50% 95%,rgba(44,151,81,.18),transparent 73%),#06130d}
.functions-ending:before{top:5%;right:15%;width:min(60vw,750px);opacity:.045}
.functions-ending .label{margin-bottom:32px}
.functions-ending h2{font-size:clamp(3.7rem,7vw,8rem);line-height:1.04;letter-spacing:-.07em;font-weight:680;margin:0 0 32px}
.functions-ending>p:not(.label):not(.functions-disclaimer){font-size:clamp(1.08rem,1.45vw,1.25rem);line-height:1.6;color:#c2d9c8;max-width:700px;margin:0 0 35px}
.functions-outline-link{display:inline-flex;border:1px solid rgba(179,245,195,.5);border-radius:100px;padding:16px 22px;color:#e4ffea;font-weight:690;transition:background .25s}
.functions-outline-link:hover{background:rgba(146,233,170,.15)}
.functions-disclaimer{max-width:800px;margin:84px 0 0;color:#8fae99;font-size:.83rem;line-height:1.6}
@keyframes product-float{50%{transform:rotate(-7deg) translateY(-1%)}}
@keyframes halo-pulse{50%{opacity:.65;transform:scale(1.06)}}
@media(max-width:1150px){.functions-hero h1{font-size:clamp(3.8rem,6.8vw,6.6rem)}.functions-hero-art{min-height:570px}.signal-chapter{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:40px}.signal-grid{gap:12px}.signal-card{min-height:310px}.chapter-intro h2{font-size:clamp(3rem,4.5vw,5rem)}}
@media(max-width:900px){.functions-hero{grid-template-columns:1fr;min-height:0;padding:140px 32px 60px}.functions-hero-content{max-width:760px}.functions-hero-art{height:590px;min-height:0;margin-top:20px}.hero-art-product{height:92%}.functions-hero-bottom{position:static;grid-column:1;margin-top:0}.functions-chapters{justify-content:flex-start}.signal-chapter{display:block}.chapter-intro{position:relative;top:auto;display:grid;grid-template-columns:1fr 150px;gap:0 20px;margin-bottom:48px}.chapter-kicker{grid-column:1}.chapter-intro img{grid-column:2;grid-row:1/4;width:150px;height:150px;margin:0}.chapter-intro h2{grid-column:1;font-size:clamp(3.2rem,7vw,5.5rem)}.chapter-intro>p{grid-column:1}.functions-app{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:38px;padding:95px 45px;min-height:660px}}
@media(max-width:650px){:root{scroll-padding-top:106px}.functions-hero{padding:106px 22px 40px}.functions-eyebrow{font-size:.69rem;margin-bottom:24px}.functions-hero h1{font-size:clamp(3.35rem,12.5vw,5.2rem);line-height:1.06;margin-bottom:23px}.functions-hero-lead{font-size:1.04rem}.functions-hero-content .functions-primary-link{margin-top:27px}.functions-hero-count{margin-top:38px}.functions-hero-art{height:455px;margin-top:10px}.hero-art-product{height:93%;max-width:80%}.hero-art-number{font-size:17rem;top:15%;left:10%}.hero-art-note{font-size:.55rem;padding:5px 9px 5px 4px}.hero-art-note img{width:32px;height:32px}.note-sleep{top:20%}.note-heart{top:48%;right:-1%}.note-move{bottom:13%}.functions-hero-bottom{font-size:.61rem}.functions-chapters{top:60px;padding:0 10px}.functions-chapters a{padding:15px 13px;font-size:.76rem}.functions-atlas{padding:100px 18px 85px}.functions-section-heading{margin-bottom:45px}.functions-section-heading h2{font-size:clamp(3.4rem,12vw,5.2rem)}.functions-section-heading>p:last-child{font-size:1.02rem}.atlas-figure{padding:7px;border-radius:19px;overflow-x:auto;scrollbar-width:thin}.atlas-figure img{width:1000px;max-width:none;border-radius:12px}.atlas-figure figcaption{font-size:.78rem;padding:13px 6px 4px}.atlas-mobile-hint{display:block;margin:14px 0 0;text-align:center;color:#b8d7c1;font-size:.8rem}.atlas-clarity{font-size:.83rem;padding:14px 17px}.signal-chapter{padding:90px 20px;scroll-margin-top:105px}.chapter-intro{display:block;margin-bottom:33px}.chapter-intro img{float:right;width:120px;height:110px;margin:-8px 0 0 10px}.chapter-kicker{font-size:.68rem;margin-bottom:26px}.chapter-intro h2{font-size:clamp(3.2rem,10.8vw,4.8rem);margin-bottom:20px}.chapter-intro>p{font-size:1.04rem}.signal-grid{grid-template-columns:1fr;gap:12px}.signal-card,.signal-grid .signal-card:last-child:nth-child(odd){grid-column:auto;min-height:0;padding:24px;border-radius:22px}.signal-number{font-size:2.8rem}.signal-rule{margin:17px 0 2px}.signal-card h3{font-size:1.52rem;margin:16px 0 9px}.signal-card p{font-size:.96rem}.functions-app{display:flex;flex-direction:column;min-height:0;padding:85px 25px 100px;gap:35px}.functions-app-media{order:2;width:260px}.functions-app-copy{order:1}.functions-app-copy h2{font-size:clamp(3.4rem,11vw,5.2rem)}.functions-app-copy>p:not(.label){font-size:1.05rem}.functions-ending{min-height:0;padding:120px 22px 75px}.functions-ending h2{font-size:clamp(3.4rem,11vw,5.3rem)}.functions-disclaimer{margin-top:70px}.functions-page .footer-main,.functions-page .footer-bottom{display:block}}
@media(max-width:380px){.functions-hero h1{font-size:3.15rem}.hero-art-note{font-size:.5rem}.hero-art-product{max-width:90%}.chapter-intro img{width:100px}.chapter-intro h2{font-size:3rem}}
@media(prefers-reduced-motion:reduce){.hero-art-product,.hero-art-halo{animation:none}.signal-card,.functions-primary-link{transition:none}.signal-card:hover,.functions-primary-link:hover{transform:none}}

/* Los puntos de interacción siguen exactamente los cuadros de la imagen original. */
.atlas-interactive{position:relative;max-width:1600px;margin:0 auto}
.atlas-interactive .atlas-figure{max-width:none;margin:0}
.atlas-canvas{position:relative;width:100%;aspect-ratio:1672/941}
.atlas-canvas>img{display:block;width:100%;height:100%;object-fit:contain}
.atlas-hotspots{position:absolute;inset:0;pointer-events:none}
.atlas-hotspot{position:absolute;z-index:2;width:23.1%;height:6.5%;padding:0;border:2px solid transparent;border-radius:13px;background:transparent;cursor:pointer;pointer-events:auto;transition:border-color .2s,background .2s,box-shadow .2s}
.atlas-hotspot-left{left:12.25%}
.atlas-hotspot-right{left:64.75%}
.atlas-hotspot:hover,.atlas-hotspot:focus-visible,.atlas-hotspot.is-active{border-color:#b7ffd0;background:rgba(83,236,143,.11);box-shadow:0 0 0 3px rgba(86,244,146,.17),0 0 25px rgba(63,236,142,.37);outline:none}
.atlas-detail[hidden]{display:none!important}
.atlas-detail{position:absolute;z-index:8;top:var(--detail-top,28%);left:50%;width:min(29.5%,420px);min-width:300px;transform:translate(-50%,-22%);padding:27px 29px 26px;border:1px solid rgba(198,255,219,.5);border-radius:24px;background:linear-gradient(140deg,rgba(17,58,33,.96),rgba(4,29,17,.97));box-shadow:0 25px 85px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.2),0 0 55px rgba(80,236,136,.16);backdrop-filter:blur(28px);color:#f2fff5}
.atlas-detail-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:1px solid rgba(210,255,219,.29);border-radius:50%;background:rgba(190,255,208,.08);color:#ddffe8;font-size:1.2rem;line-height:1;display:grid;place-items:center}
.atlas-detail-close:hover{background:rgba(190,255,208,.2)}
.atlas-detail-number{display:block;color:#9df0b9;font-size:.69rem;font-weight:800;letter-spacing:.16em;margin:0 34px 18px 0}
.atlas-detail h3{font-size:clamp(1.5rem,2vw,2.1rem);line-height:1.13;letter-spacing:-.045em;font-weight:670;margin:0 0 14px}
.atlas-detail p{font-size:.96rem;line-height:1.5;color:#c4ddcb;margin:0 0 22px}
.atlas-detail-link{display:inline-flex;align-items:center;gap:12px;border-bottom:1px solid #91e7ac;padding-bottom:5px;color:#adfac5;font-size:.85rem;font-weight:720}
.atlas-detail-link:hover{color:#fff;border-color:#fff}
.signal-card[id]{scroll-margin-top:130px}
@media(max-width:900px){.atlas-figure{overflow-x:auto;scrollbar-width:thin}.atlas-canvas{min-width:1000px}.atlas-detail{position:fixed;top:auto!important;left:18px;right:18px;bottom:18px;transform:none;width:auto;min-width:0;max-height:min(64vh,440px);overflow-y:auto;padding:27px 28px;border-radius:22px;z-index:80}.atlas-detail h3{font-size:1.7rem}}
@media(max-width:650px){.atlas-canvas{width:1000px;max-width:none}.atlas-canvas>img{width:100%;height:100%;max-width:none}.atlas-detail{left:12px;right:12px;bottom:12px;padding:24px}.atlas-hotspot{border-radius:9px}.signal-card[id]{scroll-margin-top:110px}}


/* ── Fixes to the design: the features page ───────────────────────────────
   Appended after funciones.css (it loads after site.css, so fixes for this
   page cannot live in design-fixes.css). Each says what it fixes and when. */

/* Chapter headlines on phones (2026-09-28, found in review). The design
   floats the chapter's icon right of the headline, so any headline whose
   second word does not fit beside a 120px icon drops it BELOW the icon,
   leaving a blank line: "Una / [gap] / perspectiva", "Lo / [gap] /
   importante", "Escucha / las / señales", on the design URL too, and worse
   in the longer languages. Above 650px the design sets the icon on its own
   row above the headline; phones now do the same. */
@media(max-width:650px){
  .chapter-intro img{float:none;width:96px;height:88px;margin:0 0 14px -8px}
}

/* The infographic, in every language and built for phones (2026-09-28:
   "these are in spanish even though im on english, also, this section isnt
   mobile first"). The image's 20 Spanish labels are erased
   (scripts/launch/erase-atlas-labels.py) and funciones.js puts each signal's
   number and name, from its translated card, inside its tap target.

   Desktop and tablet: the name sits where the image's word was, 22.3% into
   the box (86px of its 386), clear of the icon, sized in container units so
   it scales with the image exactly as the drawn word did (~20px at 1672px).
   The number stays the image's own. */
.atlas-canvas{container-type:inline-size}
.atlas-hotspot{color:#e6f4ec;text-align:left}
.atlas-hotspot-number{display:none}
.atlas-hotspot-label{position:absolute;left:22.3%;right:19.5%;top:50%;transform:translateY(-50%);font-size:1.2cqw;font-weight:400;line-height:1.15;letter-spacing:-.005em;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;pointer-events:none}

/* Phones (2026-09-28, third pass: "I would really like for that section to
   look like it does on desktop on mobile"). Shrinking the whole infographic
   to a phone's width makes its names ~4px tall, so instead the desktop
   composition is zoomed to its figure: the same label-free image, its own
   dark ground, glow and connector lines, cropped to the body by the canvas,
   with its two columns of boxes compressed to their number and icon and set
   exactly where the originals sit, so every connector line still meets its
   box. Row positions are the design's own (the inline `top` funciones.js
   gives each target, as a share of the image's height). Tapping a box shows
   its name and explanation in the panel under the figure; the chapters below
   carry the full text of all 20.

   Geometry: the figure spans image x 614-1064 and is shown at 70.6% of the
   canvas, so the image is 262.3cqw wide at -81.6cqw, 147.6cqw tall. The canvas takes that
   height as an aspect ratio, not in cqw: its own cqw would resolve against its
   parent, not itself. It clips with `overflow:clip`, not `hidden`: a hidden
   box is still a scroll container, and focusing a tapped box scrolled the
   wide image sideways inside it. */
@media(max-width:650px){
  .atlas-figure{overflow:visible;padding:8px}
  .atlas-canvas{width:auto;min-width:0;aspect-ratio:100/147.6;height:auto;overflow:clip;border-radius:14px;background:#021a10}
  .atlas-canvas>img{position:absolute;top:0;left:-81.6cqw;width:262.3cqw;max-width:none;height:auto;border-radius:0}
  .atlas-hotspot{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;width:14.2cqw;height:6.5%;padding:0;overflow:hidden;border:1.5px solid rgba(96,232,176,.7);border-radius:2.4cqw;background:linear-gradient(180deg,rgba(10,42,31,.97),rgba(5,26,18,.99));box-shadow:0 0 2.6cqw rgba(58,220,150,.2)}
  /* The design's highlight is a translucent green, which would show the
     image's own box behind this compressed one; keep it opaque, lit. */
  .atlas-hotspot:hover,.atlas-hotspot:focus-visible,.atlas-hotspot.is-active{background:linear-gradient(180deg,rgba(26,98,71,.99),rgba(9,44,31,.99))}
  .atlas-hotspot-left{left:0}
  .atlas-hotspot-right{left:auto;right:0}
  .atlas-hotspot-number{display:grid;place-items:center;background:linear-gradient(160deg,#23866a,#0f5641);color:#f2fff7;font-size:3.9cqw;font-weight:800;letter-spacing:-.02em}
  .atlas-hotspot-label{display:none}
  .atlas-hotspot::after{content:"";align-self:center;justify-self:center;width:5.6cqw;height:5.6cqw;background:url("/launch/vitalsense-20-senales-icons.webp") no-repeat;background-size:112cqw 5.6cqw}
  .atlas-hotspot[data-signal="01"]::after{background-position:0.0cqw 0}
  .atlas-hotspot[data-signal="02"]::after{background-position:-5.6cqw 0}
  .atlas-hotspot[data-signal="03"]::after{background-position:-11.2cqw 0}
  .atlas-hotspot[data-signal="04"]::after{background-position:-16.8cqw 0}
  .atlas-hotspot[data-signal="05"]::after{background-position:-22.4cqw 0}
  .atlas-hotspot[data-signal="06"]::after{background-position:-28.0cqw 0}
  .atlas-hotspot[data-signal="07"]::after{background-position:-33.6cqw 0}
  .atlas-hotspot[data-signal="08"]::after{background-position:-39.2cqw 0}
  .atlas-hotspot[data-signal="09"]::after{background-position:-44.8cqw 0}
  .atlas-hotspot[data-signal="10"]::after{background-position:-50.4cqw 0}
  .atlas-hotspot[data-signal="11"]::after{background-position:-56.0cqw 0}
  .atlas-hotspot[data-signal="12"]::after{background-position:-61.6cqw 0}
  .atlas-hotspot[data-signal="13"]::after{background-position:-67.2cqw 0}
  .atlas-hotspot[data-signal="14"]::after{background-position:-72.8cqw 0}
  .atlas-hotspot[data-signal="15"]::after{background-position:-78.4cqw 0}
  .atlas-hotspot[data-signal="16"]::after{background-position:-84.0cqw 0}
  .atlas-hotspot[data-signal="17"]::after{background-position:-89.6cqw 0}
  .atlas-hotspot[data-signal="18"]::after{background-position:-95.2cqw 0}
  .atlas-hotspot[data-signal="19"]::after{background-position:-100.8cqw 0}
  .atlas-hotspot[data-signal="20"]::after{background-position:-106.4cqw 0}
  .atlas-detail{position:relative;left:auto;right:auto;bottom:auto;transform:none;width:auto;min-width:0;max-height:none;overflow:visible;margin:12px 0 0;padding:22px 20px;z-index:1}
  .atlas-mobile-hint{display:none}
}