/* ==========================================================
   Marca de la agencia (provisional hasta tener nombre)
   Cambia aquí colores y tipografías y se actualizan
   la web de la agencia y todas las ofertas.
   ========================================================== */
:root{
  --ink:#0c0c10;
  --ink-2:#3d3d47;
  --mut:#7c7c87;
  --paper:#f4f1ea;
  --paper-2:#ebe7dd;
  --card:#ffffff;
  --line:#dcd7cb;
  --lime:#d4ff3a;
  --lime-2:#c2f01f;
  --violet:#6b4dff;
  --violet-2:#5537f0;
  --pink:#ff5fa2;
  --dark:#0c0c10;
  --dark-2:#16161d;
  --dark-line:#2a2a34;
  --r:22px;
  --font:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0}
p{margin:0}
::selection{background:var(--lime);color:var(--ink)}
.m-w{max-width:1180px;margin:0 auto;padding:0 20px}

/* Grano sutil para que el papel no parezca plano */
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Barra de progreso de lectura */
.m-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--lime);z-index:120;box-shadow:0 0 12px var(--lime)}

/* Logo */
.m-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:800;font-size:19px;letter-spacing:-.03em;white-space:nowrap}
.m-mark{width:34px;height:34px;border-radius:11px;background:var(--lime);color:var(--ink);display:grid;place-items:center;flex:none;transition:transform .6s var(--ease)}
.m-mark svg{width:18px;height:18px}
.m-logo:hover .m-mark{transform:rotate(90deg) scale(1.05)}
.m-logo-sub{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-left:-3px;align-self:center;padding-top:3px}

/* Navegación */
.m-nav{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,color .3s}
.m-nav.on{background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.m-nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.m-links{display:flex;gap:26px;font-size:15px;font-weight:600}
.m-links a{text-decoration:none;opacity:.75;transition:opacity .2s}
.m-links a:hover{opacity:1}
.m-nav-cta{display:flex;gap:8px;align-items:center}
.m-nav.dark{color:#fff}
.m-nav.dark.on{background:color-mix(in srgb,var(--dark) 78%,transparent);box-shadow:0 1px 0 var(--dark-line)}

/* Botones */
.m-btn{--bg:var(--ink);--fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;border-radius:999px;border:0;background:var(--bg);color:var(--fg);font:700 16px/1 var(--font);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease),box-shadow .25s}
.m-btn:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hov,var(--violet));transform:translateY(101%);transition:transform .35s var(--ease)}
.m-btn:hover{transform:translateY(-2px)}
.m-btn:hover:before{transform:none}
.m-btn:active{transform:translateY(0) scale(.98)}
.m-btn .ar{transition:transform .3s var(--ease)}
.m-btn:hover .ar{transform:translateX(4px)}
.m-btn.lime{--bg:var(--lime);--fg:var(--ink);--hov:#fff}
.m-btn.violet{--bg:var(--violet);--fg:#fff;--hov:var(--ink)}
.m-btn.ghost{--bg:transparent;--fg:currentColor;--hov:color-mix(in srgb,currentColor 10%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 30%,transparent)}
.m-btn.white{--bg:#fff;--fg:var(--ink);--hov:var(--lime)}
.m-btn.sm{padding:11px 17px;font-size:14.5px}
.m-btn.lg{padding:20px 30px;font-size:18px}
.m-btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

/* Etiquetas */
.m-tag{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.m-tag i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 var(--lime);animation:m-ping 2s infinite}
.m-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
@keyframes m-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lime) 70%,transparent)}80%,100%{box-shadow:0 0 0 10px transparent}}

/* Títulos de sección */
.m-h2{font-size:clamp(40px,6.4vw,84px)}
.m-h2 em{font-style:normal;color:var(--violet)}
.m-hl{position:relative;white-space:nowrap;z-index:0}
.m-hl:after{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.06em;height:.38em;background:var(--lime);z-index:-1;transform:scaleX(0);transform-origin:0 50%;transition:transform .9s .25s var(--ease)}
.in .m-hl:after,.m-hl.in:after{transform:scaleX(1)}
.m-lead{font-size:clamp(18px,2vw,21px);color:var(--ink-2);max-width:620px}

/* Cinta en movimiento */
.m-marquee-wrap{overflow-x:clip;overflow-y:visible}
.m-marquee{overflow:hidden;background:var(--lime);color:var(--ink);padding:18px 0;transform:rotate(-1.6deg);margin:0 -20px;box-shadow:0 0 0 2px var(--ink)}
.m-marquee-in{display:flex;width:max-content;animation:m-slide 32s linear infinite}
.m-marquee span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-weight:800;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;white-space:nowrap}
.m-marquee span b{font-size:.7em}
@keyframes m-slide{to{transform:translateX(-50%)}}

/* Aparición al hacer scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.rv.in{opacity:1;transform:none}

/* Pie */
.m-foot{background:var(--dark);color:#fff;padding:80px 0 34px;overflow:hidden}
.m-foot-big{font-weight:800;letter-spacing:-.06em;line-height:.85;font-size:min(clamp(56px,13vw,190px),calc((min(100vw,1180px) - 40px) / (var(--len,8) * .47)));margin:30px 0 40px;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);white-space:nowrap;transition:color .5s}
.m-foot-big:hover{color:var(--lime);-webkit-text-stroke-color:var(--lime)}
.m-foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.6)}
.m-foot-row a{text-decoration:none;color:#fff}
.m-foot-row a:hover{color:var(--lime)}

@media (max-width:860px){
  .m-links{display:none}
  .m-nav-in{height:62px}
  body{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .m-hl:after{transform:scaleX(1)}
}