:root{
  --bg:#f4f3ef;
  --paper:#ffffff;
  --ink:#0d1220;
  --muted:#61697a;
  --line:rgba(13,18,32,.1);
  --blue:#2351ff;
  --blue-dark:#1837ad;
  --shadow:0 18px 60px rgba(13,18,32,.08);

  --radius:28px;

  --marker:'Permanent Marker', cursive;
  --display:'Archivo Black', sans-serif;
  --body:'Space Grotesk', sans-serif;
}


/* =========================================================
   BASE
========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);

  background:
    radial-gradient(
      circle at top left,
      rgba(35,81,255,.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fbfbf9 0%,
      var(--bg) 100%
    );
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}

.section{
  padding:86px 0;
}


/* =========================================================
   3D GRAFFITI BACKGROUND
========================================================= */

.graffiti-bg{
  position:fixed;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;
  overflow:hidden;

  z-index:0;

  perspective:1400px;
  perspective-origin:50% 50%;

  transform-style:preserve-3d;
}


/* ---------------------------------------------------------
   CONTENEDOR PRINCIPAL
--------------------------------------------------------- */

.graffiti-3d{
  position:absolute;

  transform-style:preserve-3d;
  transform-origin:center center;

  will-change:transform;

  pointer-events:none;

  opacity:.19;

  /*
   * Evita que las imágenes se vean demasiado pesadas.
   */
  filter:
    saturate(.95)
    contrast(1.08);
}


/* ---------------------------------------------------------
   TODAS LAS IMÁGENES
--------------------------------------------------------- */

.graffiti-3d img{
  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:auto;

  max-width:none;

  pointer-events:none;
  user-select:none;

  -webkit-user-drag:none;

  transform-style:preserve-3d;
}


/* =========================================================
   CONTENEDOR DE PROFUNDIDAD
========================================================= */

.graffiti-depth{
  position:relative;

  width:100%;

  transform-style:preserve-3d;

  transform-origin:center center;

  will-change:transform;
}


/* =========================================================
   EXTRUSIÓN 3D
========================================================= */

.graffiti-extrusion{
  position:absolute;

  inset:0;

  z-index:1;

  transform-style:preserve-3d;

  /*
   * Oscurecemos las capas traseras para simular
   * el costado del objeto.
   */
  filter:
    brightness(.30)
    saturate(.72)
    contrast(1.2);

  opacity:.95;
}


/* ---------------------------------------------------------
   CAPAS DE EXTRUSIÓN
--------------------------------------------------------- */

.graffiti-extrusion .graffiti-layer{
  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:auto;

  transform-origin:center center;

  transform-style:preserve-3d;

  will-change:transform;
}


/* =========================================================
   GRAFFITI FRONTAL
========================================================= */

.graffiti-front{
  position:relative !important;

  z-index:10;

  transform-style:preserve-3d;

  transform:
    translateZ(18px);

  filter:
    drop-shadow(
      0 18px 15px
      rgba(13,18,32,.20)
    )
    drop-shadow(
      0 3px 4px
      rgba(13,18,32,.12)
    );

  will-change:transform;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.graffiti-highlight{
  z-index:11;

  opacity:.16;

  transform-style:preserve-3d;

  transform:
    translate(
      -1.5px,
      -1.5px
    )
    translateZ(24px);

  filter:
    brightness(1.9)
    contrast(.72);

  mix-blend-mode:screen;

  pointer-events:none;
}


/* =========================================================
   SOMBRA EXTRA
========================================================= */

.graffiti-3d::after{
  content:"";

  position:absolute;

  left:8%;
  top:14%;

  width:84%;
  height:72%;

  z-index:-10;

  background:rgba(13,18,32,.20);

  filter:blur(18px);

  opacity:.45;

  transform:
    translate(
      12px,
      18px
    )
    translateZ(-20px)
    scale(.9);

  border-radius:50%;

  pointer-events:none;
}


/* =========================================================
   CONTENIDO PRINCIPAL
========================================================= */

.site-header,
main{
  position:relative;
  z-index:1;
}


/* =========================================================
   NAVBAR
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;

  background:rgba(251,251,249,.82);
  backdrop-filter:blur(14px);

  border-bottom:1px solid rgba(13,18,32,.06);

  transition:
    background .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


/* =========================================================
   NAV WRAP
========================================================= */

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  min-height:100px;

  transition:
    min-height .35s cubic-bezier(.22,1,.36,1),
    gap .35s ease;
}


/* =========================================================
   LOGO
========================================================= */

.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.brand img{
  width:100px;
  height:auto;

  transform-origin:left center;

  transition:
    width .35s cubic-bezier(.22,1,.36,1),
    transform .35s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-nav{
  display:flex;
  align-items:center;

  gap:24px;

  font-size:14px;
  font-weight:600;

  transition:
    gap .35s cubic-bezier(.22,1,.36,1),
    font-size .35s ease;
}


.site-nav a{
  position:relative;

  transition:
    color .2s ease,
    transform .2s ease;
}


/* UNDERLINE */

.site-nav a:not(.btn):after{
  content:"";

  position:absolute;

  left:0;
  bottom:-5px;

  width:0;
  height:2px;

  border-radius:999px;

  background:var(--blue);

  transition:
    width .25s ease;
}


.site-nav a:not(.btn):hover:after{
  width:100%;
}


/* =========================================================
   NAVBAR — SCROLLED
========================================================= */

.site-header.is-scrolled{
  background:rgba(251,251,249,.96);

  box-shadow:
    0 8px 25px rgba(13,18,32,.10);

  border-bottom-color:
    rgba(13,18,32,.10);
}


/* NAVBAR MÁS PEQUEÑO */

.site-header.is-scrolled .nav-wrap{
  min-height:70px;
}


/* LOGO MÁS PEQUEÑO */

.site-header.is-scrolled .brand img{
  width:80px;
}


/* MENÚ MÁS PEQUEÑO */

.site-header.is-scrolled .site-nav{
  gap:16px;
  font-size:12px;
}


/* BOTÓN CTA MÁS PEQUEÑO */

.site-header.is-scrolled .nav-cta{
  padding:8px 14px;
  font-size:12px;
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.nav-toggle{
  display:none;

  border:0;

  background:#fff;

  border-radius:12px;

  padding:9px 11px;

  font-size:21px;
  line-height:1;

  cursor:pointer;

  box-shadow:
    0 8px 22px
    rgba(13,18,32,.08);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.nav-toggle:hover{
  transform:translateY(-1px);

  box-shadow:
    0 10px 25px
    rgba(13,18,32,.12);
}


/* =========================================================
   MOBILE NAV
========================================================= */

@media (max-width:860px){

  .nav-toggle{
    display:block;
  }


  .site-nav{
    position:absolute;

    left:20px;
    right:20px;
    top:70px;

    background:
      rgba(255,255,255,.97);

    border:
      1px solid
      var(--line);

    border-radius:22px;

    box-shadow:
      0 20px 50px
      rgba(13,18,32,.12);

    padding:16px;

    display:none;

    flex-direction:column;

    align-items:flex-start;

    gap:14px;

    font-size:14px;
  }


  .site-nav.is-open{
    display:flex;
  }


  .site-nav a:not(.btn):after{
    display:none;
  }


  /* MENU CUANDO EL NAVBAR ESTÁ COMPACTO */

  .site-header.is-scrolled .site-nav{
    top:50px;

    gap:13px;

    font-size:13px;
  }


  .nav-cta{
    width:100%;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:580px){

  .nav-wrap{
    min-height:60px;
  }


  .brand img{
    width:90px;
  }


  /* NAVBAR COMPACTO */

  .site-header.is-scrolled .nav-wrap{
    min-height:48px;
  }


  .site-header.is-scrolled .brand img{
    width:58px;
  }


  .site-nav{
    top:60px;

    left:14px;
    right:14px;

    border-radius:20px;

    padding:15px;
  }


  .site-header.is-scrolled .site-nav{
    top:48px;
  }

}
/* =========================================================
   BUTTONS
========================================================= */

.nav-toggle{
  display:none;

  border:0;

  background:#fff;

  border-radius:12px;

  padding:10px 12px;

  font-size:22px;

  box-shadow:var(--shadow);
}


.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  min-height:54px;

  padding:0 26px;

  border-radius:999px;

  font-weight:700;

  border:
    1.6px solid
    transparent;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    color .25s ease;
}


.btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 12px 28px
    rgba(13,18,32,.12);
}


.btn-primary{
  background:var(--blue);
  color:#fff;
}


.btn-primary:hover{
  background:var(--blue-dark);
}


.btn-outline{
  background:#fff;

  border-color:
    rgba(13,18,32,.18);
}


.btn-dark{
  background:#0b0e18;
  color:#fff;
}


.btn-full{
  width:100%;
}

.btn-full-sub{
  width:20%;
  background-color: #898989;
  color: #ffffff;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.eyebrow{
  margin:0 0 18px;

  font-size:12px;

  letter-spacing:.22em;

  text-transform:uppercase;

  font-weight:700;

  color:var(--muted);
}


.eyebrow-light{
  color:rgba(255,255,255,.72);
}


.section-head{
  display:flex;

  justify-content:space-between;

  align-items:end;

  gap:24px;

  margin-bottom:34px;
}


.section-head h2,
.about-lite h2,
.pricing-copy h2,
.cta-copy h2{
  margin:0;

  font-size:
    clamp(2rem,4vw,3.5rem);

  line-height:.98;

  font-family:var(--display);
}


.section-head h2 span,
.about-lite h2 span,
.pricing-copy h2 span,
.cta-copy h2 span,
.hero-copy h1 span{
  color:var(--blue);
}


.section-intro,
.hero-text,
.pricing-copy p,
.about-lite p,
.cta-copy p{
  color:var(--muted);

  font-size:1.06rem;

  line-height:1.75;
}


/* =========================================================
   HERO
========================================================= */

.hero{
  padding:46px 0 72px;
}


.hero-grid{
  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items:center;

  gap:48px;
}


.hero-copy h1{
  margin:0 0 20px;

  font-family:var(--display);

  font-size:
    clamp(3rem,6vw,5.6rem);

  line-height:.93;

  max-width:9.2ch;
}


.hero-actions{
  display:flex;

  gap:16px;

  flex-wrap:wrap;

  margin-top:30px;
}


/* =========================================================
   TRUST
========================================================= */

.trust-row{
  display:flex;

  align-items:center;

  gap:18px;

  margin-top:34px;
}


.trust-avatars{
  display:flex;

  align-items:center;
}


.trust-avatars span{
  width:44px;
  height:44px;

  border-radius:50%;

  display:block;

  margin-right:-12px;

  border:3px solid #fff;

  background:
    linear-gradient(
      135deg,
      #1f2440,
      #5f6780
    );

  box-shadow:
    0 10px 16px
    rgba(13,18,32,.08);
}


.trust-avatars span:nth-child(2){
  background:
    linear-gradient(
      135deg,
      #d9b9a0,
      #835840
    );
}


.trust-avatars span:nth-child(3){
  background:
    linear-gradient(
      135deg,
      #2b355e,
      #92a3da
    );
}


.trust-avatars span:nth-child(4){
  background:
    linear-gradient(
      135deg,
      #5b423a,
      #d2b6a9
    );
}


.trust-row p{
  display:grid;

  gap:3px;

  margin:0;

  font-size:.95rem;
}


.trust-row strong{
  font-size:.98rem;
}


.trust-row span{
  color:var(--muted);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual{
  position:relative;

  min-height:620px;

  border-radius:36px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.96),
      rgba(255,255,255,.7)
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(35,81,255,.12),
      transparent 32%
    ),
    radial-gradient(
      circle at 10% 10%,
      rgba(13,18,32,.05),
      transparent 24%
    );

  box-shadow:var(--shadow);

  perspective:1200px;

  transform-style:preserve-3d;
}


.hero-visual > *{
  position:absolute;

  will-change:transform;

  transition:
    transform .18s ease-out;
}


.hero-splash{
  right:60px;
  top:88px;

  width:280px;
  height:280px;

  border-radius:
    42% 58% 43% 57% /
    45% 45% 55% 55%;

  background:
    radial-gradient(
      circle at center,
      rgba(35,81,255,.25),
      rgba(35,81,255,.08) 55%,
      transparent 70%
    );

  filter:blur(6px);
}


.hero-orbit{
  border:
    1px solid
    rgba(35,81,255,.2);

  border-radius:50%;
}


.orbit-one{
  width:520px;
  height:520px;

  right:10px;
  top:52px;
}


.orbit-two{
  width:420px;
  height:420px;

  right:64px;
  top:118px;
}


.hero-crown{
  right:108px;
  top:58px;

  font-size:118px;

  color:var(--blue);

  font-family:var(--marker);

  line-height:1;

  transform:rotate(8deg);
}


.hero-platform{
  left:56px;
  right:48px;
  bottom:72px;

  height:70px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      rgba(13,18,32,.12),
      rgba(13,18,32,.04)
    );

  filter:blur(6px);
}


.hero-note{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  text-align:center;

  border-radius:22px;

  padding:18px 22px;

  background:
    rgba(255,255,255,.94);

  box-shadow:
    0 14px 34px
    rgba(13,18,32,.1);

  font-family:var(--marker);

  line-height:1.1;

  font-size:1.35rem;

  letter-spacing:.02em;
}


.note-right{
  right:26px;
  top:235px;

  transform:rotate(-8deg);
}


.note-billboard{
  right:10px;
  bottom:130px;

  background:#181d2b;

  color:#fff;

  transform:rotate(-3deg);

  text-transform:uppercase;

  font-size:1.5rem;

  padding:22px 26px;
}


.hero-rabbit{
  width:min(88%,600px);

  right:-36px;
  bottom:-6px;

  filter:
    drop-shadow(
      0 30px 40px
      rgba(13,18,32,.18)
    );
}


/* =========================================================
   SERVICES
========================================================= */

.services-band{
  padding-top:22px;
}


.service-grid{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:16px;
}


.service-card{
  background:#fff;

  border:
    1px solid
    var(--line);

  border-radius:24px;

  padding:26px 22px;

  box-shadow:var(--shadow);
}


.service-card h3{
  margin:16px 0 10px;

  font-size:1.12rem;
}


.service-card p{
  margin:0;

  color:var(--muted);

  line-height:1.6;
}


.service-icon{
  width:52px;
  height:52px;

  border-radius:16px;

  display:grid;

  place-items:center;

  background:
    rgba(35,81,255,.08);

  color:var(--blue);

  font-weight:700;

  font-size:1.3rem;
}


/* =========================================================
   WORK
========================================================= */

.work-grid{
  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  gap:20px;
}


.work-feature{
  grid-row:span 2;

  min-height:560px;
}


.work-card{
  position:relative;

  overflow:hidden;

  border-radius:32px;

  background:#fff;

  border:
    1px solid
    var(--line);

  box-shadow:var(--shadow);

  min-height:268px;

  perspective:1200px;

  transform-style:preserve-3d;
}


.work-card .card-art,
.work-card .card-copy,
.work-card .mini-copy{
  position:absolute;

  transition:
    transform .18s ease-out;

  will-change:transform;
}


.work-feature .card-main{
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}


.work-feature .card-copy{
  left:32px;
  bottom:32px;

  max-width:360px;

  background:
    rgba(255,255,255,.96);

  padding:24px;

  border-radius:24px;

  box-shadow:
    0 18px 30px
    rgba(13,18,32,.12);
}


.card-tag{
  display:inline-flex;

  padding:8px 12px;

  border-radius:999px;

  background:
    rgba(35,81,255,.08);

  color:var(--blue);

  font-size:.84rem;

  font-weight:700;

  margin-bottom:12px;
}


.work-feature h3{
  margin:0 0 10px;

  font-size:1.6rem;

  font-family:var(--display);

  line-height:1.02;
}


.work-feature p{
  margin:0;

  color:var(--muted);

  line-height:1.7;
}


.work-small .card-art{
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}


.work-small .mini-copy{
  left:22px;
  bottom:22px;

  background:
    rgba(11,14,24,.86);

  color:#fff;

  padding:10px 16px;

  border-radius:999px;

  font-weight:700;
}


/* =========================================================
   PROCESS
========================================================= */

.process-strip{
  background:#111625;

  color:#fff;

  padding:26px 0;
}


.process-grid{
  display:grid;

  grid-template-columns:
    1.1fr repeat(4,1fr);

  gap:22px;

  align-items:start;
}


.process-title{
  padding-top:16px;
}


.process-step{
  padding:16px 0;
}


.process-step span{
  display:inline-grid;

  place-items:center;

  width:42px;
  height:42px;

  border-radius:50%;

  background:var(--blue);

  font-size:.95rem;

  font-weight:700;

  margin-bottom:14px;
}


.process-step h3{
  margin:0 0 8px;

  font-size:1.15rem;
}


.process-step p{
  margin:0;

  color:
    rgba(255,255,255,.7);

  line-height:1.65;
}


/* =========================================================
   PRICING
========================================================= */

.pricing-layout{
  display:grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap:32px;

  align-items:start;
}


.pricing-notes{
  margin:22px 0 0;

  padding:0;

  list-style:none;

  display:grid;

  gap:12px;
}


.pricing-notes li{
  display:flex;

  align-items:center;

  gap:10px;

  font-weight:600;
}


.pricing-notes li:before{
  content:"";

  width:10px;
  height:10px;

  border-radius:50%;

  background:var(--blue);

  display:block;
}


.pricing-cards{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:18px;
}


.price-card{
  position:relative;

  background:#fff;

  border:
    1px solid
    var(--line);

  border-radius:30px;

  padding:28px 24px;

  box-shadow:var(--shadow);
}


.price-card.featured{
  background:#0e1220;

  color:#fff;

  transform:translateY(-10px);
}


.price-card.featured ul li{
  color:
    rgba(255,255,255,.84);
}


.price-card.featured .package-label{
  color:
    rgba(255,255,255,.68);
}


.price-card h3{
  margin:0 0 10px;

  font-size:2rem;

  font-family:var(--display);

  line-height:1;
}


.package-label{
  text-transform:uppercase;

  letter-spacing:.16em;

  font-size:.74rem;

  color:var(--muted);

  font-weight:700;
}


.price{
  font-family:var(--display);

  font-size:2.4rem;

  line-height:1;

  margin-bottom:18px;
}

.pricesub{
  font-family:var(--display);

  font-size:0.8rem;

  line-height:1;

  margin-bottom:18px;

  color: #429bda;
}


.price span{
  font-size:1rem;

  font-family:var(--body);

  color:var(--muted);
}


.price-card.featured .price span{
  color:
    rgba(255,255,255,.66);
}


.price-card ul{
  margin:0 0 24px;

  padding:0;

  list-style:none;

  display:grid;

  gap:12px;
}


.price-card li{
  position:relative;

  padding-left:18px;

  color:var(--muted);

  line-height:1.5;
}


.price-card li:before{
  content:"✓";

  position:absolute;

  left:0;

  color:var(--blue);

  font-weight:700;
}


.price-card.featured li:before{
  color:#79a4ff;
}


.popular-tag{
  position:absolute;

  left:50%;

  top:-12px;

  transform:translateX(-50%);

  background:var(--blue);

  color:#fff;

  padding:8px 16px;

  border-radius:999px;

  font-size:.72rem;

  text-transform:uppercase;

  letter-spacing:.12em;

  font-weight:700;
}


/* =========================================================
   ABOUT
========================================================= */

.about-lite-grid{
  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:28px;

  align-items:start;
}


.about-points{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:18px;
}


.about-points > div{
  background:#fff;

  border:
    1px solid
    var(--line);

  border-radius:24px;

  padding:24px;

  box-shadow:var(--shadow);
}


.about-points strong{
  display:block;

  margin-bottom:10px;

  font-size:1rem;
}


.about-points p{
  margin:0;

  color:var(--muted);

  line-height:1.65;
}


/* =========================================================
   CTA
========================================================= */

.cta{
  padding-top:10px;

  padding-bottom:90px;
}


.cta-box{
  position:relative;

  overflow:hidden;

  border-radius:36px;

  min-height:370px;

  padding:54px;

  background:
    radial-gradient(
      circle at top right,
      rgba(35,81,255,.24),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      #0d1220,
      #11192b 70%
    );

  box-shadow:
    0 30px 70px
    rgba(13,18,32,.18);

  transform-style:preserve-3d;

  perspective:1200px;
}


.cta-box > *{
  position:relative;

  z-index:2;

  transition:
    transform .18s ease-out;

  will-change:transform;
}


.cta-box:before{
  content:"";

  position:absolute;

  inset:auto auto 0 -10%;

  width:60%;
  height:56%;

  background:
    radial-gradient(
      circle,
      rgba(35,81,255,.28),
      transparent 65%
    );

  filter:blur(10px);
}


.cta-copy{
  max-width:520px;

  color:#fff;
}


.cta-rabbit{
  position:absolute;

  right:-16px;
  bottom:-8px;

  width:min(46%,520px);

  filter:
    drop-shadow(
      0 26px 34px
      rgba(0,0,0,.25)
    );
}


/* =========================================================
   ANIMATION
========================================================= */

.fade-up{
  opacity:0;

  transform:translateY(24px);

  animation:
    fadeUp .9s ease forwards;
}


.fade-up:nth-child(2){
  animation-delay:.12s;
}


@keyframes fadeUp{

  to{
    opacity:1;

    transform:none;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1120px){

  .service-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .pricing-layout,
  .about-lite-grid,
  .hero-grid{
    grid-template-columns:1fr;
  }

  .pricing-cards{
    grid-template-columns:
      repeat(3,1fr);
  }

  .hero-visual{
    order:-1;

    min-height:560px;
  }

  .process-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .process-title{
    grid-column:1/-1;
  }

  .about-points{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:860px){

  .nav-toggle{
    display:block;
  }


  .site-nav{
    position:absolute;

    left:20px;
    right:20px;

    top:88px;

    background:
      rgba(255,255,255,.96);

    border:
      1px solid
      var(--line);

    border-radius:24px;

    box-shadow:var(--shadow);

    padding:18px;

    display:none;

    flex-direction:column;

    align-items:flex-start;
  }


  .site-nav.is-open{
    display:flex;
  }


  .site-header.is-scrolled .site-nav{
    top:68px;
  }


  .nav-cta{
    width:100%;
  }


  .hero-copy h1{
    max-width:none;
  }


  .service-grid,
  .pricing-cards,
  .work-grid{
    grid-template-columns:1fr;
  }


  .work-feature{
    grid-row:auto;

    min-height:450px;
  }


  .process-grid{
    grid-template-columns:1fr;
  }


  .section-head{
    flex-direction:column;

    align-items:flex-start;
  }


  .hero-visual{
    min-height:500px;
  }


  .hero-rabbit{
    width:min(100%,440px);

    right:-34px;
  }


  .cta-rabbit{
    position:relative;

    right:auto;
    bottom:auto;

    width:min(100%,420px);

    margin:30px auto 0;
  }


  .cta-box{
    padding-bottom:22px;
  }


  /*
   * En móvil bajamos la intensidad del graffiti.
   */
  .graffiti-3d{
    opacity:.10;
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:580px){

  .container{
    width:min(
      100% - 28px,
      1180px
    );
  }


  .section{
    padding:70px 0;
  }


  .nav-wrap{
    min-height:78px;
  }


  .brand img{
    width:160px;
  }


  .hero{
    padding-top:26px;
  }


  .hero-visual{
    min-height:420px;

    border-radius:28px;
  }


  .hero-note{
    font-size:1rem;

    padding:14px 16px;
  }


  .note-right{
    right:10px;

    top:205px;
  }


  .note-billboard{
    right:8px;

    bottom:90px;

    font-size:1rem;

    padding:12px 16px;
  }


  .hero-crown{
    font-size:82px;

    right:70px;

    top:46px;
  }


  .orbit-one{
    width:320px;
    height:320px;

    right:18px;
    top:56px;
  }


  .orbit-two{
    width:260px;
    height:260px;

    right:50px;
    top:92px;
  }


  .hero-rabbit{
    right:-22px;

    bottom:0;
  }


  .work-feature{
    min-height:390px;
  }


  .work-feature .card-copy{
    left:18px;
    right:18px;
    bottom:18px;

    max-width:none;

    padding:18px;
  }


  .price-card.featured{
    transform:none;
  }


  /*
   * Graffiti todavía más discreto
   * para no tapar contenido.
   */
  .graffiti-3d{
    opacity:.06;
  }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

}

/* =========================================================
   FOOTER
========================================================= */

.site-footer{
  position:relative;

  z-index:2;

  background:#7a7ea3;

  color:#fff;

  padding-top:34px;

  overflow:hidden;
}


/* ---------------------------------------------------------
   DECORATIVE GLOW
--------------------------------------------------------- */

.site-footer::before{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  right:-120px;
  top:-150px;

  background:
    radial-gradient(
      circle,
      rgba(35,81,255,.18),
      transparent 68%
    );

  pointer-events:none;
}


/* ---------------------------------------------------------
   MAIN FOOTER
--------------------------------------------------------- */

.footer-main{
  position:relative;

  display:grid;

  grid-template-columns:
    1.5fr
    .85fr
    .85fr
    1fr;

  gap:32px;

  padding-bottom:34px;

  border-bottom:
    1px solid
    rgba(255,255,255,.28);
}


/* ---------------------------------------------------------
   BRAND
--------------------------------------------------------- */

.footer-brand{
  max-width:280px;
}


.footer-logo{
  display:inline-flex;

  margin-bottom:12px;
}


.footer-logo img{
  width:145px;

  height:auto;
}


.footer-brand p{
  margin:0;

  color:
    rgba(255,255,255,.78);

  font-size:.84rem;

  line-height:1.5;

  max-width:260px;
}


/* ---------------------------------------------------------
   COLUMNS
--------------------------------------------------------- */

.footer-column{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:8px;
}


.footer-column h4{
  margin:0 0 6px;

  font-size:.68rem;

  text-transform:uppercase;

  letter-spacing:.15em;

  color:
    rgba(255,255,255,.70);
}


.footer-column a{
  color:
    rgba(255,255,255,.88);

  font-size:.84rem;

  transition:
    color .2s ease,
    transform .2s ease;
}


.footer-column a:hover{
  color:#fff;

  transform:translateX(2px);
}


/* ---------------------------------------------------------
   CONTACT
--------------------------------------------------------- */

.footer-contact > a:first-of-type{
  color:#fff;

  font-size:.84rem;

  word-break:break-word;
}


.footer-button{
  display:inline-flex !important;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  margin-top:6px;

  padding:8px 13px;

  border:
    1px solid
    rgba(255,255,255,.35);

  border-radius:999px;

  color:#fff !important;

  background:
    rgba(255,255,255,.10);

  transform:none !important;

  transition:
    background .2s ease,
    border-color .2s ease;
}


.footer-button span{
  color:#2351ff;

  font-size:1rem;

  transition:
    transform .2s ease;
}


.footer-button:hover{
  border-color:
    rgba(35,81,255,.55);

  background:
    rgba(255,255,255,.18);
}


.footer-button:hover span{
  transform:
    translate(2px,-2px);
}


/* ---------------------------------------------------------
   BOTTOM
--------------------------------------------------------- */

.footer-bottom{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  min-height:54px;
}


.footer-bottom p{
  margin:0;

  color:
    rgba(255,255,255,.68);

  font-size:.70rem;
}


.footer-socials{
  display:flex;

  align-items:center;

  gap:10px;
}


.footer-socials a{
  width:34px;
  height:34px;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:
    rgba(255,255,255,.85);

  background:
    rgba(255,255,255,.12);

  border:
    1px solid
    rgba(255,255,255,.18);

  font-size:.9rem;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}


.footer-socials a:hover{
  transform:translateY(-3px);

  color:#fff;

  background:
    rgba(35,81,255,.75);

  border-color:
    rgba(35,81,255,.8);

  box-shadow:
    0 8px 18px
    rgba(35,81,255,.22);
}


/* =========================================================
   FOOTER — TABLET
========================================================= */

@media (max-width:860px){

  .site-footer{
    padding-top:32px;
  }


  .footer-main{
    grid-template-columns:
      1fr 1fr;

    gap:28px;

    padding-bottom:30px;
  }


  .footer-brand{
    grid-column:1/-1;

    max-width:420px;
  }

}


/* =========================================================
   FOOTER — MOBILE
========================================================= */

@media (max-width:580px){

  .site-footer{
    padding-top:30px;
  }


  .footer-main{
    grid-template-columns:1fr;

    gap:24px;

    padding-bottom:28px;
  }


  .footer-brand{
    grid-column:auto;
  }


  .footer-logo img{
    width:135px;
  }


  .footer-brand p{
    font-size:.80rem;
  }


  .footer-bottom{
    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    gap:12px;

    min-height:82px;
  }


  .footer-socials{
    gap:15px;

    flex-wrap:wrap;
  }

}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page{
  position:relative;
  padding:90px 0 110px;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(35,81,255,.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(35,81,255,.07),
      transparent 30%
    );
}


/* =========================================================
   CONTACT LAYOUT
========================================================= */

.contact-layout{
  display:grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap:70px;

  align-items:start;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.contact-copy{
  padding-top:35px;
}


.contact-copy h1{
  margin:0 0 25px;

  max-width:8ch;

  font-family:var(--display);

  font-size:
    clamp(3rem,5.5vw,5.4rem);

  line-height:.94;
}


.contact-copy h1 span{
  color:var(--blue);
}


.contact-intro{
  max-width:520px;

  margin:0;

  color:var(--muted);

  font-size:1.08rem;

  line-height:1.75;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details{
  display:grid;

  gap:18px;

  margin-top:40px;
}


.contact-detail{
  display:flex;

  align-items:center;

  gap:15px;
}


.contact-detail-icon{
  width:46px;
  height:46px;

  flex-shrink:0;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:
    rgba(35,81,255,.09);

  color:var(--blue);

  font-size:1rem;
}


.contact-detail div:last-child{
  display:grid;

  gap:3px;
}


.contact-detail span{
  color:var(--muted);

  font-size:.76rem;

  text-transform:uppercase;

  letter-spacing:.12em;

  font-weight:700;
}


.contact-detail strong{
  font-size:.95rem;

  font-weight:600;
}


/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card{
  position:relative;

  padding:42px;

  background:#fff;

  border:
    1px solid
    var(--line);

  border-radius:32px;

  box-shadow:
    0 24px 70px
    rgba(13,18,32,.10);
}


.contact-form-card::before{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  right:-80px;
  top:-80px;

  background:
    radial-gradient(
      circle,
      rgba(35,81,255,.16),
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================================
   FORM HEADER
========================================================= */

.contact-form-header{
  position:relative;

  margin-bottom:30px;
}


.contact-form-header h2{
  margin:0 0 10px;

  font-family:var(--display);

  font-size:2.3rem;

  line-height:1;
}


.contact-form-header p:last-child{
  margin:0;

  color:var(--muted);

  line-height:1.6;
}


/* =========================================================
   FORM
========================================================= */

.contact-form{
  position:relative;

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:20px;
}


.form-group{
  display:flex;

  flex-direction:column;

  gap:8px;
}


.form-group-full{
  grid-column:1/-1;
}


.form-group label{
  font-size:.78rem;

  font-weight:700;

  color:var(--ink);
}


.form-group input,
.form-group select,
.form-group textarea{

  width:100%;

  border:
    1px solid
    rgba(13,18,32,.14);

  border-radius:14px;

  background:#fafaf8;

  color:var(--ink);

  font-family:var(--body);

  font-size:.95rem;

  outline:none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.form-group input,
.form-group select{
  height:50px;

  padding:0 15px;
}


.form-group textarea{
  min-height:145px;

  padding:14px 15px;

  resize:vertical;

  line-height:1.6;
}


.form-group input::placeholder,
.form-group textarea::placeholder{
  color:#9298a6;
}


.form-group select{
  cursor:pointer;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

  background:#fff;

  border-color:
    rgba(35,81,255,.65);

  box-shadow:
    0 0 0 4px
    rgba(35,81,255,.08);
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit{
  grid-column:1/-1;

  width:100%;

  min-height:54px;

  border:0;

  cursor:pointer;

  font-family:var(--body);

  font-size:.95rem;
}


.contact-submit span{
  transition:
    transform .2s ease;
}


.contact-submit:hover span{
  transform:
    translate(3px,-3px);
}


.form-note{
  grid-column:1/-1;

  margin:0;

  color:var(--muted);

  font-size:.72rem;

  line-height:1.5;

  text-align:center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

  .contact-layout{
    grid-template-columns:1fr;

    gap:50px;
  }


  .contact-copy{
    padding-top:0;
  }


  .contact-copy h1{
    max-width:10ch;
  }


  .contact-intro{
    max-width:650px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:580px){

  .contact-page{
    padding:60px 0 75px;
  }


  .contact-layout{
    gap:35px;
  }


  .contact-copy h1{
    font-size:
      clamp(2.8rem,14vw,4rem);
  }


  .contact-intro{
    font-size:.98rem;
  }


  .contact-form-card{
    padding:25px 20px;

    border-radius:24px;
  }


  .contact-form-header h2{
    font-size:1.9rem;
  }


  .contact-form{
    grid-template-columns:1fr;

    gap:17px;
  }


  .form-group-full{
    grid-column:auto;
  }


  .contact-submit{
    grid-column:auto;
  }


  .form-note{
    grid-column:auto;
  }

}