/* skin2.css v2: design pass from the Plink Studio template (Drive, showcase template 3): Anybody variable display type, Instrument Sans body, tight tracking, springy answers.
   Loaded by the loader at the end of content/content.js, so it comes after skin.css and wins. To undo: roll back to dpl_8YSFcTeia7Q6rBby7yNNytFRngSU or delete the loader block at the end of content.js. */
:root{--paper:#EEF0F5;--font-display:'Anybody','Arial Black',ui-sans-serif,sans-serif;--font-body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--spring:cubic-bezier(.2,1.3,.3,1)}
html{background:var(--paper)}
body{font-family:var(--font-body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}

/* nav: dark glass that still blurs what scrolls under it. The backdrop is darkened (brightness) and blurred, the tint on top stays light so the blur shows. The 1px border is gone (it let the page colour show as a bright line when the menu is open); a hairline inside the glass replaces it. */
.nav{border-bottom:0}
.nav::before{background:rgba(12,12,14,.55);-webkit-backdrop-filter:blur(26px) saturate(170%) brightness(.5);backdrop-filter:blur(26px) saturate(170%) brightness(.5);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.nav__links{gap:clamp(1.3rem,2.6vw,2.3rem)}
.nav__links a:not(.nav__pill){font-family:var(--font-display);font-weight:800;font-stretch:108%;font-size:1.05rem;letter-spacing:-.01em;color:#fff;padding:.45rem 0;background:linear-gradient(var(--green),var(--green)) left bottom/0 3px no-repeat;transition:background-size .35s var(--ease-out)}
.nav__links a:not(.nav__pill):hover,.nav__links a:not(.nav__pill):focus-visible{background-size:100% 3px}
.nav .nav__pill,.nav .nav__wa{font-family:var(--font-display);font-weight:700;font-stretch:100%;font-size:.9rem;padding:.4rem .95rem}
.menu summary{font-family:var(--font-display);font-weight:700;font-stretch:100%;font-size:.95rem;min-width:4rem}
.nav .menu[open] .menu__panel::before{background:#0B0B0D}
.menu__panel a{font-family:var(--font-display);font-weight:900;font-stretch:100%;font-size:clamp(2rem,8.8vw,3.4rem);letter-spacing:-.04em}
.menu__panel .menu__small{font-family:var(--font-body);font-weight:600;letter-spacing:0}

/* type. Sizes are chosen so the longest word (Personalizado, 13 letters) fits a 390px phone with margin. */
h1{font-family:var(--font-display);font-weight:900;font-stretch:100%;font-size:clamp(2.2rem,8.8vw,7rem);letter-spacing:-.05em;line-height:.92}
h2{font-family:var(--font-display);font-weight:800;font-stretch:115%;font-size:clamp(2rem,5.4vw,4.6rem);letter-spacing:-.04em;line-height:.98}
.services strong{font-family:var(--font-display);font-weight:900;font-stretch:100%;font-size:clamp(2.2rem,8.8vw,6.5rem);letter-spacing:-.05em;line-height:.92}
.services span,h1+p{font-family:var(--font-body);font-style:normal;font-weight:400;font-size:clamp(1rem,.95rem + .3vw,1.2rem);line-height:1.5;letter-spacing:0;color:var(--mute);max-width:46ch}
.assure{font-family:var(--font-body);font-weight:600;font-size:clamp(1.1rem,3.4vw,1.4rem);line-height:1.4;letter-spacing:-.01em}
.tier h3{font-family:var(--font-display);font-weight:900;font-stretch:108%;letter-spacing:-.04em}
.contact a{font-family:var(--font-display);font-weight:800;font-stretch:100%;letter-spacing:-.03em}
@media (hover:hover){.contact a{transition:font-stretch .5s var(--spring),letter-spacing .5s var(--spring),color .3s}.contact a:hover{font-stretch:130%;letter-spacing:-.05em}}

/* story: three chapters, each a little shorter than before so the home does not get long */
.story,.story+.story{height:190vh}
@supports(height:1svh){.story,.story+.story{height:190svh}}
.story+.story{margin-top:0}
.story__k{text-transform:none;letter-spacing:.06em;font-size:.78rem}
.story__t{font-family:var(--font-display);font-weight:700;font-stretch:100%;letter-spacing:-.025em;line-height:1.12;-webkit-user-select:none;user-select:none}
.story__t .w{display:inline-block;white-space:nowrap}
.story__bar{display:none}

/* letters that the pointer pushes (the template's headline effect, applied to the story text by ux.js) */
.ul{display:inline-block;will-change:transform;transition:color .45s}
.ul.hot{color:var(--green-deep)}

/* springy answers */
.btn{font-family:var(--font-body);font-weight:700;border-radius:999px;transition:transform .3s var(--spring),background-color .25s,color .25s}
.chip{font-family:var(--font-body);font-weight:500;transition:transform .3s var(--spring),border-color .25s,color .25s}
@media (hover:hover){.btn:hover,.chip:hover{transform:translateY(-2px)}}
.btn:active,.chip:active{transform:scale(.95)}

/* the metal cards: skin.css v1 had flattened them, this puts the metal back */
.tier--silver{background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,rgba(70,78,92,.03) 1px 2px),var(--sv,#EEF0F2)}
.tier--gold{background:repeating-linear-gradient(90deg,rgba(255,250,222,.22) 0 1px,rgba(110,72,0,.05) 1px 2px),var(--gd,#FFF6DF)}

/* verb wall: keeps moving when you tap a word, tapped word becomes a green pill */
.wall__w{font-family:var(--font-display);font-weight:900;font-stretch:100%;letter-spacing:-.04em;color:#B3B8C6;border-radius:999px;transition:color .3s,transform .45s var(--spring),background-color .35s}
.wall__w:hover,.wall__w:focus-visible{color:var(--ink);transform:scale(1.07)}
.wall__w.on{background:var(--green);color:var(--ink);transform:scale(1.05)}
.wall__row:focus-within .wall__t{animation-play-state:running}

/* blocks rise from below as they approach the screen (ux.js adds .rv and .rv-in) */
.rv-on .rv{opacity:0;transform:translate3d(0,56px,0);will-change:transform,opacity}
.rv-on .rv.rv-in{opacity:1;transform:none;transition:opacity .9s var(--ease-out) var(--rd,0s),transform 1.15s cubic-bezier(.16,1,.3,1) var(--rd,0s),box-shadow .3s}
.rv-on .rv.rv-done{will-change:auto;transition:box-shadow .3s,background-color .25s}
.rv-on .rv:not(.rv-in){animation:rvf .01s 3.5s forwards}
@keyframes rvf{to{opacity:1;transform:none}}