/* ALEGO · Influencer Marketing · Lima
   Paleta del manual: Royal #002c7c · Powder #c3deff · Pine #004c41 · Sage #a6c6b3 · Black #131113 · Linen #eeeeed
   Tipografía: Raleway (titulares, mayúsculas) + Serenata Vantages (texto corrido) */

@font-face{
  font-family:"Serenata Vantages";
  src:url("../fonts/serenata-vantages.woff2") format("woff2"),
      url("../fonts/Serenata%20Vantages%20Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --royal:#002c7c;
  --powder:#c3deff;
  --pine:#004c41;
  --sage:#a6c6b3;
  --black:#131113;
  --linen:#eeeeed;
  --white:#ffffff;
  --ink:var(--black);
  --t:"Raleway",system-ui,sans-serif;
  --b:"Serenata Vantages","Raleway",system-ui,sans-serif;
  --gut:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--b);font-size:17px;line-height:1.55;color:var(--ink);
  background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--t);font-weight:300;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Líneas de titular para animar (solo transform) */
.ln{display:block;overflow:hidden;padding:.14em 0 .08em;margin:0 0 -.08em}
.ln+.ln{margin-top:-.14em}
.ln>span{display:block;will-change:transform}

/* ---------- Header ---------- */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);mix-blend-mode:normal;transition:color .4s var(--ease);
  color:var(--white);
}
.hd.dark{color:var(--black)}
/* Sobre el hero (foto clara con zonas oscuras) el header se invierte según el fondo: legible siempre */
.hd.blend{mix-blend-mode:difference;color:#fff}
.hd.blend .lg img.n{opacity:0}
.hd.blend .cta:hover{background:#fff;color:#000;border-color:#fff}
/* Al hacer scroll, barra translúcida para que el logo y el menú se lean sobre cualquier sección */
.hd.scrolled{padding-top:14px;padding-bottom:14px;background:rgba(19,17,19,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hd.scrolled.dark{background:rgba(255,255,255,.78)}
body.menu .hd{mix-blend-mode:normal;color:var(--royal);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.menu .hd .lg img.n{opacity:1}
body.menu .hd .lg img.w{opacity:0}
.hd .lg{display:block;width:clamp(96px,9vw,132px);height:auto;position:relative}
.hd .lg img{width:100%;height:auto;transition:opacity .4s}
.hd .lg img.n{position:absolute;inset:0;opacity:0}
.hd.dark .lg img.n{opacity:1}
.hd.dark .lg img.w{opacity:0}
.hd nav{display:flex;align-items:center;gap:clamp(18px,3vw,40px);font-size:15px;letter-spacing:.02em}
.hd nav a{position:relative;padding:4px 0}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.hd nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd .cta{border:1px solid currentColor;border-radius:999px;padding:9px 18px;transition:background .4s,color .4s}
.hd .cta:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.hd.dark .cta:hover{background:var(--royal);border-color:var(--royal)}
.hd .cta::after{display:none}
.hd .ic{display:inline-grid;place-items:center;width:30px;height:30px;transition:opacity .3s,transform .4s var(--ease);padding:0}
.hd .ic::after{display:none}
.hd .ic svg{width:21px;height:21px;fill:currentColor}
.hd .ic:hover{transform:translateY(-2px);opacity:.75}
.hd nav .ic+.ic{margin-left:calc(14px - clamp(18px,3vw,40px))}
.hd nav .cta{margin-left:calc(18px - clamp(18px,3vw,40px))}
.hd .hm{display:none;align-items:center;gap:14px}
.bg{display:none;width:44px;height:44px;align-items:center;justify-content:center;position:relative}
.bg i{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.bg i:first-child{top:17px}.bg i:last-child{top:26px}
body.menu .bg i:first-child{top:21px;transform:rotate(45deg)}
body.menu .bg i:last-child{top:21px;transform:rotate(-45deg)}
@media (max-width:860px){.hd nav{display:none}.hd .hm{display:flex}.bg{display:flex}.hd .ic{width:30px;height:30px}}

/* Menú móvil */
.mn{
  position:fixed;inset:0;z-index:55;background:var(--powder);color:var(--royal);
  display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--gut) 40px;
  transform:translateY(-102%);transition:transform .8s var(--ease);
}
body.menu .mn{transform:none}
.mn a{font-family:var(--t);font-weight:300;text-transform:uppercase;font-size:clamp(40px,11vw,76px);line-height:1;padding:8px 0;border-bottom:1px solid rgba(0,44,124,.25);display:flex;justify-content:space-between;align-items:center}
.mn a small{font-family:var(--b);text-transform:none;font-size:15px}
.mn .mc{margin-top:28px;font-size:15px;display:flex;flex-wrap:wrap;gap:6px 24px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--black);color:var(--white)}
.hero .vd{position:relative;height:100svh;min-height:600px;max-height:1100px;overflow:hidden}
.hero video,.hero .vd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero .vd::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.55) 90px,rgba(255,255,255,0) 190px),
  linear-gradient(0deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.35) 32%,rgba(255,255,255,0) 55%)}

.hero .tp{position:absolute;z-index:2;top:92px;left:var(--gut);font-size:15px;letter-spacing:.03em;display:flex;gap:10px 18px;flex-wrap:wrap;color:var(--black)}
.hero .tp span+span::before{content:"/";margin-right:18px;opacity:.6}
.hero h1{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(32px,6vh,72px);font-size:clamp(40px,7.6vw,124px);max-width:12ch;color:var(--black);font-weight:400}
@media (max-width:860px){
  /* En móvil el titular baja a una banda blanca: nunca encima de la persona */
  .hero .vd{height:auto;min-height:0;display:flex;flex-direction:column;background:var(--white)}
  .hero video,.hero .vd img{position:relative;inset:auto;width:100%;height:62svh;min-height:420px;object-position:50% 40%}
  .hero .vd::after{height:62svh;min-height:420px;bottom:auto;background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.45) 110px,rgba(255,255,255,0) 200px)}
  .hero .tp{top:78px}
  .hero h1{position:static;padding:28px var(--gut) 36px;font-size:clamp(38px,11vw,56px);max-width:none}
}

/* ---------- Manifiesto ---------- */
.mf{background:var(--linen);color:var(--black);padding:clamp(80px,12vw,160px) var(--gut)}
.mf .in{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,6vw,96px);align-items:start}
.mf p.big{font-family:var(--t);font-weight:300;text-transform:uppercase;font-size:clamp(26px,3.6vw,54px);line-height:1.12;letter-spacing:.005em}
.mf p.big .w{color:#9a9a97;transition:color .35s}
.mf p.big .w.on{color:var(--black)}
.mf p.big em{font-style:normal;color:var(--royal)}
.mf .tx{margin-top:36px;max-width:60ch;font-size:18px;color:#2b2a2a}
.mf .tx p+p{margin-top:16px}
.mf .ph{position:relative;margin-top:clamp(0px,4vw,60px)}
.mf .ph .cl{aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.mf .ph .cl img{width:100%;height:120%;object-fit:cover;will-change:transform}
.mf .ph .ast{position:absolute;left:-7%;bottom:-6%;width:clamp(64px,7vw,110px)}
@media (max-width:900px){.mf .in{grid-template-columns:1fr}.mf .ph{max-width:420px}}

/* ---------- Servicios ---------- */
.sv{background:var(--white);padding:clamp(70px,10vw,140px) 0 clamp(60px,8vw,110px)}
.sv h2{font-size:clamp(44px,9vw,150px);padding:0 var(--gut);line-height:.9}
.sv .sub{padding:12px var(--gut) 0;max-width:56ch;font-size:18px;color:#444}
.sv ol{margin-top:clamp(36px,5vw,72px);border-top:1px solid #d6d6d4;position:relative}
.sv li{border-bottom:1px solid #d6d6d4;position:relative;overflow:hidden}
.sv li a{display:grid;grid-template-columns:64px 1.1fr 1fr 48px;gap:24px;align-items:center;padding:clamp(22px,3vw,40px) var(--gut);position:relative;z-index:1;transition:color .45s}
.sv li::before{content:"";position:absolute;inset:0;background:var(--royal);transform:translateY(101%);transition:transform .6s var(--ease)}
.sv li:hover::before{transform:none}
.sv li:hover a{color:var(--powder)}
.sv .n{font-size:14px;letter-spacing:.06em}
.sv h3{font-size:clamp(22px,3vw,44px);line-height:1}
.sv .d{font-size:16px;line-height:1.45;max-width:40ch;color:#555;transition:color .45s}
.sv li:hover .d{color:var(--powder)}
.sv .fa{width:26px;justify-self:end;transition:transform .5s var(--ease)}
.sv li:hover .fa{transform:translateX(8px)}
.sv .fl{position:fixed;left:0;top:0;width:min(26vw,340px);aspect-ratio:4/5;pointer-events:none;z-index:40;overflow:hidden;border-radius:2px;transform:translate(-50%,-50%) scale(.6);visibility:hidden;opacity:0;transition:opacity .35s,transform .5s var(--ease),visibility .35s}
.sv .fl.on{visibility:visible;opacity:1;transform:translate(-50%,-50%) scale(1)}
.sv .fl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.sv .fl img.on{opacity:1}
@media (max-width:860px){
  .sv li a{grid-template-columns:36px 1fr 28px;grid-template-areas:"n h fa" ". d .";row-gap:8px}
  .sv .n{grid-area:n}.sv h3{grid-area:h}.sv .d{grid-area:d}.sv .fa{grid-area:fa;width:20px}
  .sv .fl{display:none}
  .sv li .th{display:block;margin:0 var(--gut) 22px calc(var(--gut) + 60px);aspect-ratio:16/10;object-fit:cover;border-radius:2px;position:relative;z-index:1}
}
@media (min-width:861px){.sv li .th{display:none}}

/* ---------- Dual marcas / creators ---------- */
.du{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.du section{padding:clamp(60px,8vw,120px) var(--gut);display:flex;flex-direction:column;justify-content:space-between;gap:48px;position:relative;overflow:hidden}
.du .mk{background:var(--royal);color:var(--powder)}
.du .cr{background:var(--pine);color:var(--sage)}
.du h2{font-size:clamp(40px,5.2vw,84px);color:var(--white)}
.du p{max-width:46ch;font-size:18px;line-height:1.55}
.du ul{margin-top:26px;border-top:1px solid rgba(255,255,255,.22)}
.du ul li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.22);display:flex;gap:16px;align-items:baseline;font-size:17px}
.du ul li b{font-family:var(--t);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--white)}
.du .lk{display:inline-flex;align-items:center;gap:14px;font-family:var(--t);text-transform:uppercase;font-size:15px;letter-spacing:.06em;color:var(--white);width:max-content;padding:14px 22px;border:1px solid rgba(255,255,255,.55);border-radius:999px;transition:background .4s,color .4s}
.du .lk img{width:18px;transition:transform .5s var(--ease)}
.du .lk:hover{background:var(--white);color:var(--black)}
.du .lk:hover img{transform:translateX(5px)}
.du .el{position:absolute;right:-6%;bottom:-8%;width:clamp(180px,26vw,380px);opacity:.14;pointer-events:none}
@media (max-width:860px){.du{grid-template-columns:1fr;min-height:0}.du section{min-height:80svh}}

/* ---------- Galería horizontal ---------- */
.ga{background:var(--white);padding:clamp(70px,10vw,140px) 0 0;overflow:hidden}
.ga .hdl{padding:0 var(--gut);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ga h2{font-size:clamp(40px,7vw,120px);line-height:.9}
.ga .hdl p{max-width:38ch;font-size:17px;color:#444}
.ga .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,32px);padding:clamp(36px,5vw,70px) var(--gut) clamp(70px,9vw,130px);align-items:start}
.ga figure{position:relative;overflow:hidden;border-radius:2px;background:var(--linen);margin:0}
.ga figure.p{aspect-ratio:4/5}.ga figure.l{aspect-ratio:3/2}.ga figure.w{aspect-ratio:16/9}
.ga figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.ga figure:hover img{filter:grayscale(0);transform:scale(1.03)}
.ga figcaption{position:absolute;left:16px;bottom:14px;color:var(--white);font-size:14px;letter-spacing:.02em;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.ga .a1{grid-column:1/5}.ga .a2{grid-column:5/13;align-self:end}
.ga .a3{grid-column:1/6;align-self:center;padding:0 clamp(0px,2vw,24px)}.ga .a4{grid-column:6/13}
.ga .a5{grid-column:1/5}.ga .a6{grid-column:5/9;margin-top:clamp(24px,5vw,80px)}.ga .a7{grid-column:9/13;align-self:end}
.ga .quote p{font-family:var(--t);font-weight:300;text-transform:uppercase;font-size:clamp(24px,2.8vw,44px);line-height:1.1;color:var(--royal)}
@media (max-width:860px){
  .ga .grid{grid-template-columns:1fr 1fr;gap:12px}
  .ga .a1,.ga .a2,.ga .a3,.ga .a4,.ga .a7{grid-column:1/-1}
  .ga .a5{grid-column:1/2}.ga .a6{grid-column:2/3;margin-top:0}
  .ga figure img{filter:none}
  .ga .quote{padding:18px 0}
}

/* ---------- Proceso ---------- */
.pr{background:var(--black);color:var(--linen);padding:clamp(80px,12vw,160px) var(--gut)}
.pr .in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,120px)}
.pr .st{position:sticky;top:110px;align-self:start}
.pr h2{font-size:clamp(44px,6.5vw,110px);line-height:.9}
.pr .st p{margin-top:24px;max-width:38ch;color:#b9b7b5;font-size:17px}
.pr ol li{border-top:1px solid rgba(238,238,237,.18);padding:clamp(28px,3.5vw,48px) 0;display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start}
.pr ol li:last-child{border-bottom:1px solid rgba(238,238,237,.18)}
.pr ol li img{width:44px;height:44px;object-fit:contain;margin-top:6px;will-change:transform}
.pr h3{font-size:clamp(26px,3vw,46px);color:var(--white)}
.pr h3 small{display:block;font-family:var(--b);text-transform:none;font-size:14px;letter-spacing:.04em;color:var(--sage);margin-bottom:10px}
.pr ol p{margin-top:12px;max-width:50ch;color:#cfcdca;font-size:17px}
@media (max-width:900px){.pr .in{grid-template-columns:1fr}.pr .st{position:static}}

/* ---------- Contacto ---------- */
.ct{background:var(--powder);color:var(--royal);padding:clamp(80px,12vw,160px) var(--gut)}
.ct .in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,120px)}
.ct h2{font-size:clamp(56px,9vw,150px);line-height:.88}
.ct .info{margin-top:36px;font-size:17px;display:grid;gap:10px}
.ct .info a{border-bottom:1px solid rgba(0,44,124,.35)}
.ct .soc{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ct .sb{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--royal);border-radius:999px;padding:12px 20px;font-family:var(--t);text-transform:uppercase;letter-spacing:.06em;font-size:14px;transition:background .3s,color .3s,transform .4s var(--ease)}
.ct .sb svg{width:20px;height:20px;fill:currentColor}
.ct .sb:hover{background:var(--royal);color:var(--powder);transform:translateY(-2px)}
.ct .el{width:clamp(60px,6vw,88px);margin-top:48px}
.ct form{display:grid;gap:22px;align-content:start}
.ct .pills{display:flex;gap:10px;flex-wrap:wrap}
.ct .pills label{border:1px solid var(--royal);border-radius:999px;padding:10px 18px;font-size:15px;cursor:pointer;transition:background .3s,color .3s}
.ct .pills input{position:absolute;opacity:0;pointer-events:none}
.ct .pills input:checked+label{background:var(--royal);color:var(--powder)}
.ct .f{display:grid;gap:6px}
.ct .f span{font-size:14px;letter-spacing:.03em}
.ct input[type=text],.ct input[type=email],.ct textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(0,44,124,.5);padding:12px 0;font:inherit;font-size:19px;color:var(--royal);border-radius:0;outline:none;transition:border-color .3s;
}
.ct input:focus,.ct textarea:focus{border-bottom-color:var(--royal)}
.ct textarea{min-height:110px;resize:vertical}
.ct .bt{justify-self:start;display:inline-flex;align-items:center;gap:14px;background:var(--royal);color:var(--powder);border-radius:999px;padding:16px 26px;font-family:var(--t);text-transform:uppercase;letter-spacing:.06em;font-size:15px;transition:transform .4s var(--ease),background .3s}
.ct .bt img{width:18px}
.ct .bt:hover{transform:translateY(-2px);background:var(--black)}
.ct .ok{font-size:16px;display:none}
.ct form.sent .ok{display:block}
@media (max-width:900px){.ct .in{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.ft{background:var(--black);color:var(--linen);padding:clamp(56px,8vw,110px) var(--gut) 28px;overflow:hidden}
.ft .top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;font-size:15px}
.ft .top .tg{display:flex;gap:14px;flex-wrap:wrap;letter-spacing:.03em}
.ft .top .tg span+span::before{content:"/";margin-right:14px;opacity:.5}
.ft .top ul{display:flex;gap:22px;flex-wrap:wrap}
.ft .top ul a{border-bottom:1px solid transparent;transition:border-color .3s}
.ft .top ul a:hover{border-color:currentColor}
.ft .wm{margin-top:clamp(40px,6vw,90px)}
.ft .wm img{width:100%;height:auto;will-change:transform}
.ft .bt{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid rgba(238,238,237,.15);font-size:13px;color:#9b9996}
.ft .bt .fl{display:inline-flex;align-items:center;gap:8px}
.ft .bt .fl img{height:16px;width:auto;opacity:.85}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}