@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Baloo 2';
  src:url('/assets/fonts/Baloo2-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Baloo 2';
  src:url('/assets/fonts/Baloo2-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
/* Inter: textos de cuerpo (no títulos ni números) */
html,body{margin:0;padding:0;background:#F7F6F0;font-family:'Inter',sans-serif;font-weight:400;color:#0B1F16;-webkit-font-smoothing:antialiased}
html,body{overflow-x:hidden;max-width:100%}
[data-screen-label="Devio Site"]{overflow-x:hidden;max-width:100%}
a{color:#157A47;text-decoration:none}a:hover{color:#0B1F16}
*{box-sizing:border-box}
img,svg,video{max-width:100%}
/* Títulos y títulos de cards (Baloo 2) */
.display,h1,h2{font-family:'Baloo 2',sans-serif;font-weight:700;letter-spacing:-.02em}
/* Service cards hover → estilo AI card */
.svc-card{transition:background .2s,border-color .2s,transform .2s}
.svc-card:hover{background:#0B1F16!important;border-color:#0B1F16!important;transform:translateY(-3px)}
.svc-card:hover .svc-icon{background:#C5F04C!important}
.svc-card:hover .svc-title{color:#C5F04C!important}
.svc-card:hover .svc-desc{color:#A9B5AD!important}
.tech-carousel{max-width:100%;-webkit-overflow-scrolling:touch}
.tech-carousel::-webkit-scrollbar{display:none}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ========== Responsive system (mobile → 2xl) ========== */
/* Breakpoints: sm 640 | md 768 | lg 1024 | xl 1280 | 2xl 1536 */

.site-wrap{
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
}
@media (min-width:640px){
  .site-wrap{padding-left:24px;padding-right:24px}
}
@media (min-width:1536px){
  .site-wrap{max-width:1400px}
}

/* Nav */
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 16px;height:64px;
  display:flex;align-items:center;gap:16px;
}
@media (min-width:640px){
  .nav-inner{padding:0 24px;height:68px;gap:28px}
}
@media (min-width:1536px){
  .nav-inner{max-width:1400px}
}
.nav-brand-tag{display:none}
@media (min-width:480px){
  .nav-brand-tag{display:block}
}
.nav-desktop,.nav-cta-desktop{display:none}
@media (min-width:1024px){
  .nav-desktop{
    display:flex;align-items:center;gap:22px;margin-left:12px;
    font-size:15px;font-weight:500;color:#3D4A42;
  }
  .nav-cta-desktop{display:flex;align-items:center;gap:18px;margin-left:auto}
  .nav-burger{display:none!important}
}
.nav-burger{
  margin-left:auto;width:44px;height:44px;border:0;border-radius:10px;
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#0B1F16;
}
.nav-burger:hover{background:#EAF7D6}
.nav-mobile{
  display:flex;flex-direction:column;gap:4px;
  padding:8px 16px 20px;border-top:1px solid #E4E2D8;background:#F7F6F0;
}
@media (min-width:640px){
  .nav-mobile{padding-left:24px;padding-right:24px}
}
@media (min-width:1024px){
  .nav-mobile{display:none!important}
}
.nav-mobile a{
  display:block;padding:12px 14px;border-radius:10px;color:#0B1F16;font:500 15px 'Inter';
}
.nav-mobile a:hover{background:#EAF7D6;color:#0B1F16}
.nav-mobile-cta{
  margin-top:8px;text-align:center;background:#0B1F16!important;color:#F7F6F0!important;
  font:600 15px 'Inter'!important;padding:14px!important;border-radius:999px!important;
}
.nav-mobile-cta:hover{background:#157A47!important;color:#fff!important}

/* Footer */
.site-footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
@media (min-width:640px){
  .site-footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (min-width:1024px){
  .site-footer-grid{grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px}
}

/* CTA band */
.site-cta-inner{padding:36px 24px!important;border-radius:22px!important}
@media (min-width:768px){
  .site-cta-inner{padding:48px 36px!important;border-radius:28px!important}
}
@media (min-width:1024px){
  .site-cta-inner{padding:64px 48px!important}
}

/* Nearshore panel */
.nearshore-panel{padding:36px 20px!important;border-radius:24px!important}
@media (min-width:768px){
  .nearshore-panel{padding:48px 36px!important;border-radius:28px!important}
}
@media (min-width:1024px){
  .nearshore-panel{padding:60px 52px!important;border-radius:32px!important}
}
.nearshore-grid{
  grid-template-columns:1fr!important;
}
@media (min-width:768px){
  .nearshore-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media (min-width:1024px){
  .nearshore-grid{grid-template-columns:repeat(3,1fr)!important}
}

/* Brand collage */
.brand-collage-wrap{min-height:320px!important;overflow:hidden;width:100%;max-width:100%}
@media (min-width:640px){
  .brand-collage-wrap{min-height:400px!important}
}
@media (min-width:1024px){
  .brand-collage-wrap{min-height:460px!important}
}
.brand-collage{height:340px!important;max-width:100%!important;width:100%!important;overflow:hidden}
@media (min-width:640px){
  .brand-collage{height:400px!important;max-width:440px!important}
}
@media (min-width:1024px){
  .brand-collage{height:460px!important}
}
.brand-collage .bc-1,
.brand-collage .bc-2,
.brand-collage .bc-3,
.brand-collage .bc-4{max-width:none}
.brand-collage .bc-1{top:6%!important;left:2%!important;width:44%!important}
.brand-collage .bc-2{top:2%!important;left:48%!important;width:46%!important}
.brand-collage .bc-3{top:42%!important;left:10%!important;width:42%!important}
.brand-collage .bc-4{top:46%!important;left:48%!important;width:40%!important}

/* LSA / ads mock */
.lsa-mock{border-radius:32px!important;aspect-ratio:1;max-width:100%!important}
@media (min-width:640px){
  .lsa-mock{border-radius:48px!important}
}
.lsa-mock article .lsa-img{height:160px!important}
@media (min-width:640px){
  .lsa-mock article .lsa-img{height:200px!important}
}
@media (min-width:1024px){
  .lsa-mock article .lsa-img{height:220px!important}
}

/* Tech carousel cards */
.tech-carousel > *{flex:0 0 min(320px,82vw)!important}
.tech-band{padding:64px 16px 72px!important}
@media (min-width:768px){
  .tech-band{padding:80px 24px 90px!important}
}
@media (min-width:1024px){
  .tech-band{padding:100px 24px 110px!important}
}
@media (max-width:639.98px){
  .hero-mosaic img{margin-top:0!important}
}

/* Feature checklist 2-col → 1-col on mobile */
.feat-checks{grid-template-columns:1fr!important}
@media (min-width:640px){
  .feat-checks{grid-template-columns:1fr 1fr!important}
}

/* Hero photo mosaic */
.hero-mosaic img{height:140px!important}
@media (min-width:640px){
  .hero-mosaic img{height:170px!important}
}
@media (min-width:1024px){
  .hero-mosaic img{height:190px!important}
}

/* Split feature rows (copy + media) — stack on mobile, copy first */
.split-row{flex-direction:column!important;align-items:stretch!important;gap:28px!important}
.split-row > *{width:100%!important;max-width:100%!important;flex:none!important;min-width:0!important}
.split-row .split-copy{order:1}
.split-row .split-media{order:2}
@media (min-width:768px){
  .split-row{flex-direction:row!important;align-items:center!important;gap:56px!important}
  .split-row > *{flex:1!important;width:auto!important;min-width:0!important}
  .split-row .split-media{max-width:520px!important}
  .split-row--media-left .split-media{order:1}
  .split-row--media-left .split-copy{order:2}
  .split-row--media-right .split-copy{order:1}
  .split-row--media-right .split-media{order:2}
}

/* Inside Devio — stack on mobile */
.inside-devio{flex-direction:column;align-items:stretch!important;gap:28px!important}
.inside-devio-copy,
.inside-devio-photos{min-width:0!important;width:100%!important;flex:none!important}
.inside-devio-photos img{height:200px!important}
@media (min-width:768px){
  .inside-devio{flex-direction:row;align-items:center!important;gap:48px!important}
  .inside-devio-copy{flex:1.2!important;width:auto!important;min-width:280px!important}
  .inside-devio-photos{flex:1!important;width:auto!important;min-width:280px!important}
  .inside-devio-photos img{height:230px!important}
}

/* Lead form card */
.lead-form-card{padding:24px!important}
@media (min-width:640px){
  .lead-form-card{padding:36px!important}
}

/* Global mobile fixes for inline-styled layouts */
@media (max-width:767.98px){
  [style*="min-width:340px"],
  [style*="min-width:320px"],
  [style*="min-width:300px"],
  [style*="min-width:280px"],
  [style*="min-width:260px"],
  [style*="min-width:240px"],
  [style*="min-width:140px"]{
    min-width:0!important;
  }
  [style*="max-width:1180px"]{
    padding-left:16px!important;
    padding-right:16px!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  [style*="minmax(255px"],
  [style*="minmax(260px"],
  [style*="minmax(280px"],
  [style*="minmax(300px"],
  [style*="minmax(320px"],
  [style*="minmax(340px"]{
    grid-template-columns:1fr!important;
  }
  [style*="padding:96px 24px"],
  [style*="padding:88px 24px"],
  [style*="padding:80px 24px"]{
    padding-top:56px!important;
    padding-bottom:48px!important;
  }
  [style*="gap:56px"]{gap:32px!important}
  [style*="gap:48px"]{gap:28px!important}
  [style*="gap:64px"]{gap:32px!important}

  /* Clip sections that use absolute/rotated art */
  .nearshore-panel,
  .tech-band,
  .brand-collage-wrap,
  .lsa-mock,
  .hero-mosaic{
    overflow:hidden!important;
    max-width:100%!important;
  }
  .tech-carousel{
    margin-left:0!important;
    margin-right:0!important;
  }
  .tech-carousel > *{
    flex:0 0 min(280px,78vw)!important;
  }
  /* Avoid 100vw scrollbar gutters expanding layout */
  .nav-inner,.site-wrap{
    max-width:100%!important;
  }
}

@media (min-width:768px) and (max-width:1023.98px){
  [style*="minmax(255px"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="minmax(280px"]{grid-template-columns:repeat(2,1fr)!important}
}

/* 2xl container stretch for inline max-width wraps */
@media (min-width:1536px){
  [style*="max-width:1180px"]{max-width:1400px!important}
  [style*="max-width:880px"]{max-width:960px!important}
}