/* OS IT Solutions - Osdany Arias digital card */

/* Self-hosted fonts (SIL Open Font License), shared with the main site */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/inter-var-latin.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{
  --text-1:#ffffff;
  --text-2:#c3d3f5;
  --text-3:#9db0d4;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
/* Phones must not enlarge "small" text on their own (Android font boosting, iOS text inflation):
   every size here is tied to the artwork. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text-1);
  background:#050912;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}

.page{
  display:flex;
  justify-content:center;
  padding:36px 16px 56px;
}

a{color:inherit;text-decoration:none;}
button{background:none;border:0;color:inherit;font-family:inherit;cursor:pointer;}
a:focus-visible,button:focus-visible{outline:2px solid #4cc3ff;outline-offset:3px;border-radius:12px;}

/* ---------- Card: fondo.png IS the background ---------- */
.card{
  position:relative;
  width:100%;
  max-width:430px;
  aspect-ratio:938/1677;
  background-image:url(card-bg.webp);
  background-size:100% 100%;
  background-repeat:no-repeat;
  border-radius:6% / 3.4%;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  container-type:inline-size;
  container-name:card;
  /* One design pixel: the card was laid out at 430px wide. Every size inside the card is
     a multiple of it, so text and artwork shrink together on narrow phones. */
  --u:calc(100cqw / 430);
}

.ov{position:absolute;}

/* ---------- Header: logo + name block (freeform area over the art) ---------- */
.ov-logo{
  left:5.7%;
  top:1.8%;
  width:20%;
  height:auto;
  object-fit:contain;
  object-position:left top;
  filter:drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(47,107,255,.35));
}

.ov-header-text{left:5.7%;top:9.6%;width:46.5%;}
.ov-header-text .name{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:calc(22 * var(--u));
  letter-spacing:-.01em;
  color:var(--text-1);
}
.ov-header-text .role{
  color:#5aa9ff;
  font-weight:600;
  font-size:calc(13.5 * var(--u));
  margin-top:calc(2 * var(--u));
}
.ov-header-text .org{
  font-weight:700;
  font-size:calc(12 * var(--u));
  letter-spacing:.05em;
  margin-top:calc(2 * var(--u));
  color:#e7edff;
}
.ov-header-text .tagline{
  font-family:'Poppins',sans-serif;
  font-size:calc(15.5 * var(--u));
  font-weight:700;
  line-height:1.26;
  margin-top:calc(8 * var(--u));
}
.ov-header-text .tagline span{
  background:linear-gradient(90deg,#5aa9ff,#8ec2ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ov-header-text .desc{
  font-size:calc(12.5 * var(--u));
  color:var(--text-2);
  line-height:1.42;
  margin-top:calc(11 * var(--u));
}

.ov-trust-pill{
  left:70.04%;
  top:1.67%;
  width:26.97%;
  height:3.82%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(3 * var(--u));
  color:#bcd6ff;
  font-size:calc(11 * var(--u));
  font-weight:600;
  white-space:nowrap;
  letter-spacing:-.01em;
}
.ov-trust-pill svg{width:calc(12 * var(--u));height:calc(12 * var(--u));flex-shrink:0;}

.ov-photo{
  left:53.52%;
  top:6.98%;
  width:42.0%;
  height:22.12%;
  border-radius:50%;
  object-fit:cover;
  object-position:center 30%;
}
/* ---------- We Help Your Business Thrive: titles only (no room for a
   description in this template revision -- icons sit close to the panel
   floor with no line placeholders below them) ---------- */
.ov-thrive-col{
  top:48.3%;
  height:5.3%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.ov-thrive-1{left:5.33%;width:29.32%;}
.ov-thrive-2{left:34.65%;width:29.32%;}
.ov-thrive-3{left:63.97%;width:30.92%;}
.ov-thrive-col h3{
  font-size:calc(11.5 * var(--u));
  font-weight:700;
  line-height:1.2;
  color:var(--text-1);
}

/* ---------- Save Contact ---------- */
.ov-savecontact{
  left:5.33%;
  top:56.35%;
  width:89.44%;
  height:7.22%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-left:15.4%;
  padding-right:13.6%;
  text-align:left;
}
.ov-savecontact strong{font-size:calc(14 * var(--u));font-weight:700;color:#fff;}
.ov-savecontact small{font-size:calc(11 * var(--u));color:#dbe8ff;font-weight:500;margin-top:calc(2 * var(--u));}

/* ---------- CTA row ---------- */
.ov-cta{
  top:65.24%;
  height:6.56%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.ov-cta strong{font-size:calc(11 * var(--u));color:#fff;font-weight:700;line-height:1.2;}
.ov-cta small{font-size:calc(9.5 * var(--u));color:rgba(255,255,255,.9);font-weight:500;}
.ov-cta-call{left:5.33%;width:28.04%;padding-left:10.2%;padding-right:1%;}
.ov-cta-website{left:35.39%;width:29.0%;padding-left:10.2%;padding-right:1%;}

/* WhatsApp: the baked-in pill was Instagram art, so this one is drawn fully
   in CSS (background + icon) to completely cover that artwork underneath. */
.ov-cta-whatsapp{
  left:65.9%;
  width:29.3%;
  top:64.9%;
  height:7.2%;
  flex-direction:row;
  gap:calc(6 * var(--u));
  padding:0 calc(10 * var(--u));
  background:linear-gradient(135deg,#25d366,#128c7e);
  border-radius:calc(16 * var(--u));
  box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-8 * var(--u)) rgba(0,0,0,.5), 0 0 0 calc(2 * var(--u)) #0e6b5e;
}
.ov-cta-whatsapp svg{flex-shrink:0;width:calc(17 * var(--u));height:calc(17 * var(--u));}
.ov-cta-whatsapp .cta-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0;}
.ov-cta-whatsapp strong,.ov-cta-whatsapp small{white-space:nowrap;}

/* ---------- Our Core Services: titles only (boxes are shorter now, no
   room for a description) ---------- */
.ov-service-col{
  top:81.1%;
  height:4.6%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.ov-service-1{left:5.33%;width:26.65%;}
.ov-service-2{left:36.25%;width:27.72%;}
.ov-service-3{left:68.23%;width:26.65%;}
.ov-service-col h3{
  font-size:calc(11.5 * var(--u));
  font-weight:700;
  line-height:1.2;
  color:var(--text-1);
}

/* ---------- Website bar ---------- */
.ov-webbar{
  left:20.79%;
  top:87.36%;
  width:57.04%;
  height:4.77%;
  display:flex;
  align-items:center;
  padding-left:11.2%;
  padding-right:8.5%;
}
.ov-webbar span{
  font-size:calc(12.5 * var(--u));
  font-weight:600;
  color:#dce6ff;
}

/* ---------- Footer taglines ---------- */
.ov-footer-col{
  top:93.9%;
  height:4.2%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:calc(8.3 * var(--u));
  font-weight:600;
  color:var(--text-3);
  line-height:1.2;
}
.ov-footer-1{left:14.93%;width:13.86%;}
.ov-footer-2{left:50.11%;width:12.79%;}
.ov-footer-3{left:85.29%;width:13.86%;}