/* ============================================================
   Piklab · hoja de estilo v3
   Base v2 (composicion de escritorio) + pulido y mobile nuevo
   ============================================================ */

:root{
  --graphite:#0f1011;
  --surface:#151618;
  --ink:#f6f4f1;
  --muted:#b7b4b1;
  --line:rgba(230,225,220,.12);
  --purple:#b887de;
  --pink:#f01c67;
  --teal:#5fd3c6;
  --ease:cubic-bezier(.22,.61,.22,1);
  --head:105px;

  /* Tipografias. Para probar otro juego, cambiar estas variables y el <link>
     de Google Fonts del HTML. Ver piklab-tipografias.html.
     Los tamanos de titulo estan calibrados para Space Grotesk. Con una
     display mas ancha (Fraunces) conviene bajarlos ~7%. */
  --font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-text:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --display-weight:600;
  --display-track:-.034em;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  scroll-padding-top:var(--head);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--graphite);
  color:var(--ink);
  font-family:var(--font-text);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* grano fino: unifica las fotos y saca el aspecto plano */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.035;
  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'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #d9d4ce;outline-offset:5px;border-radius:4px}
p,h1,h2,h3{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%}
::selection{background:var(--purple);color:#0d0d0e}

.filter-defs{position:absolute;pointer-events:none}
.wrap{width:85%;max-width:1320px;margin-inline:auto}

.eyebrow{
  text-transform:uppercase;font-size:11px;letter-spacing:3.2px;
  font-weight:500;color:#aeaba8;font-family:var(--font-text);
}

/* todos los titulos usan la familia display */
.hero h1,.brands-intro h2,.brand .brand-claim,.story h2,.faq h2,.metrics strong{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-track);
}

/* ---------- reveal al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);will-change:opacity,transform}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .85s var(--ease) var(--d,0s),transform .85s var(--ease) var(--d,0s);
}

/* ============================ HEADER ============================ */
.header{
  position:fixed;inset:0 0 auto;z-index:50;
  background:linear-gradient(#0809097a,transparent);
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(13,14,15,.78);
  -webkit-backdrop-filter:saturate(1.3) blur(16px);
          backdrop-filter:saturate(1.3) blur(16px);
  border-bottom-color:var(--line);
}
.header-inner{height:var(--head);display:flex;align-items:center;justify-content:space-between;gap:20px;transition:height .35s var(--ease)}
.header.is-stuck .header-inner{height:76px}

.group-logo{width:154px;height:auto;display:block;filter:url(#logo-neutral) brightness(1.45);transition:opacity .25s}
.header a:hover .group-logo{opacity:.82}

.header nav{display:flex;gap:30px;font-size:13px;letter-spacing:.1px}
.header nav a{position:relative;padding-block:10px;color:#e6e3e0}
.header nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.header nav a:hover{color:#fff}
.header nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-short{display:none}

/* ============================ ESCENAS ============================ */
.scene{position:relative;isolation:isolate;overflow:hidden}
.scene-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--foco,center);z-index:-3;display:block}
.scene::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none}
.scene-inner{height:100%;display:flex;align-items:center}

/* Punto de foco de cada escena: el centro del cuadro dentro de la foto.
   object-position alinea ese punto de la imagen con el mismo punto del
   contenedor, asi el cuadro nunca se recorta, cambie como cambie la vista. */
.hero{--foco:94% 28%}
.brand-fy{--foco:71% 13%}
.brand-ix{--foco:28% 15%}
.brand-art{--foco:89% 23%}


/* ---------- HERO ---------- */
.hero{height:clamp(720px,55vw,880px);min-height:720px}
.hero::before{
  background:
    linear-gradient(90deg,rgba(6,7,8,.72) 0%,rgba(6,7,8,.42) 38%,transparent 62%),
    linear-gradient(0deg,rgba(9,9,10,.6),transparent 22%),
    radial-gradient(120% 80% at 50% 50%,transparent 45%,rgba(5,5,6,.45) 100%);
}
.hero-copy{width:45%;max-width:580px;padding-top:65px}
.hero .eyebrow{margin-bottom:22px;color:#ded8d2}
.hero h1{
  font-size:clamp(42px,4.3vw,62px);line-height:1.04;
  margin-bottom:24px;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.hero-copy>p:not(.eyebrow){font-size:18px;line-height:1.5;color:#e9e6e3;max-width:520px}

.scroll-cue{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-top:42px;opacity:.9}
.scroll-cue span{
  width:17px;height:17px;border-right:1px solid #fff;border-bottom:1px solid #fff;
  transform:rotate(45deg) translate(-3px,-3px);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%,100%{transform:rotate(45deg) translate(-3px,-3px)}50%{transform:rotate(45deg) translate(2px,2px)}}
.scroll-cue:hover{opacity:1}

/* ---------- INTRO DE MARCAS ---------- */
.brands-intro{
  text-align:center;padding:68px 0 64px;
  background:radial-gradient(ellipse 80% 120% at center,#1c1b1e,#0f1011 78%);
  position:relative;
}
.brands-intro::before,.brands-intro::after{
  content:"";position:absolute;left:7.5%;right:7.5%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(235,230,225,.17) 22%,rgba(235,230,225,.17) 78%,transparent);
}
.brands-intro::before{top:0}
.brands-intro::after{bottom:0}
.brands-intro .eyebrow{font-size:10px;margin-bottom:16px}
.brands-intro h2{font-size:clamp(31px,3.45vw,46px);line-height:1.1;margin-bottom:18px}
.brands-intro p:not(.eyebrow){font-size:16px;line-height:1.6;color:var(--muted);max-width:640px;margin-inline:auto}

/* ---------- MARCAS ---------- */
.brand{height:760px}
.brand::before{background:linear-gradient(90deg,#0e0d13f0 0%,#0e0d13c4 31%,#0e0d1352 47%,transparent 64%)}
.brand-copy{width:37%;max-width:450px;padding-block:35px}
.brand .brand-claim{font-size:clamp(26px,2.65vw,36px);line-height:1.16;margin:24px 0 20px}
.brand-name{display:block;font-size:0;line-height:0}
.brand p{font-size:16px;line-height:1.55;color:var(--muted)}

.logo-window{position:relative;overflow:hidden}
.logo-window img{position:absolute;max-width:none;height:auto;display:block}
.logo-fy{width:178px;height:122px}
.logo-fy img{width:223px;left:-27px;top:-52px;filter:url(#logo-purple)}
.logo-ix{width:195px;height:125px}
.logo-ix img{width:216px;left:-20px;top:-51px;filter:url(#logo-pink)}

.brand-link{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--purple);border-radius:30px;padding:13px 34px;min-width:186px;
  font-size:14px;font-weight:500;line-height:1.1;margin-top:30px;
  color:#fff;background:rgba(184,135,222,.07);
  box-shadow:inset 0 0 0 1px #ffffff08;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.brand-link:hover{background:rgba(184,135,222,.2);transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(184,135,222,.55)}
.brand-link:active{transform:translateY(0)}

.brand-ix .scene-inner{justify-content:flex-end}
.brand-ix::before{background:linear-gradient(270deg,#0c0d0ff7 0%,#0c0d0fe4 28%,#0c0d0f78 43%,transparent 60%)}
.brand-ix .brand-copy{width:36%}
.brand-ix .brand-link{border-color:var(--pink);background:rgba(240,28,103,.07)}
.brand-ix .brand-link:hover{background:rgba(240,28,103,.2);box-shadow:0 10px 30px -12px rgba(240,28,103,.55)}

.brand-art{height:600px}
.brand-art::before{background:linear-gradient(90deg,#131413e8,#131413ab 35%,transparent 68%)}
.brand-art .brand-copy{max-width:430px}
.art-logo{width:154px;height:auto;display:block;filter:url(#logo-teal)}
.brand-art .brand-claim{margin-top:24px}
.brand-art .coming{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.coming span{
  font-size:13px;letter-spacing:.4px;padding:12px 30px;
  border:1px solid rgba(95,211,198,.45);border-radius:30px;color:#dcf2ee;
  background:rgba(95,211,198,.06);
}
.coming small{font-size:11px;letter-spacing:1.2px;color:#cfcac2;text-transform:uppercase}

/* ---------- HISTORIA ---------- */
.story{display:grid;grid-template-columns:40% 50%;justify-content:space-between;padding-block:96px 78px}
.story .eyebrow{margin-bottom:22px}
.story h2{font-size:clamp(31px,3.35vw,44px);line-height:1.1;max-width:470px}
/* tres barras con los colores de las tres marcas */
.story-rule{
  width:102px;height:4px;border-radius:4px;margin-top:34px;
  background:linear-gradient(90deg,
    var(--purple) 0 30px,transparent 30px 36px,
    var(--pink)   36px 66px,transparent 66px 72px,
    var(--teal)   72px 102px);
}
.story-copy{max-width:620px}
.story-copy p{font-size:16px;line-height:1.8;color:#bdbab7;margin-bottom:24px}
.story-copy .lead{color:#f2f0ee;font-size:19.5px;line-height:1.62;margin-bottom:28px}
.story-copy strong{color:var(--ink);font-weight:500}
.story-copy .lead strong{font-weight:600}
.story-copy p:last-child{margin-bottom:0}

/* ---------- separador de seccion con el simbolo de Piklab ---------- */
.rule{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:1px;margin:0;
  background:linear-gradient(90deg,transparent,rgba(235,230,225,.2) 14%,rgba(235,230,225,.2) 86%,transparent);
}
.rule i{
  display:block;position:relative;width:27px;height:44px;overflow:hidden;
  background:var(--graphite);
}
.rule i img{position:absolute;width:130px;max-width:none;height:auto;left:0;top:0;filter:url(#logo-neutral);opacity:.5}

/* ---------- METRICAS ---------- */
.metrics{position:relative;isolation:isolate;padding:40px 0 64px;overflow:hidden}
.metrics h2{font-size:10px;text-transform:uppercase;letter-spacing:2.9px;font-weight:500;color:#aba7a3;margin-bottom:26px}
.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:92%}
.metrics strong{
  font-size:clamp(39px,3.95vw,56px);line-height:1.05;
  font-variant-numeric:tabular-nums;display:block;
  background:linear-gradient(180deg,#fff,#b9b5b0);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.metrics p{font-size:14px;line-height:1.5;margin-top:14px;max-width:245px;color:#c4c1be}
.metrics-grid>div+div{border-left:1px solid rgba(255,255,255,.14);padding-left:48px}
.watermark{position:absolute;right:-14px;bottom:0;width:125px;height:200px;overflow:hidden;opacity:.05;z-index:-1}
.watermark img{width:600px;max-width:none;height:auto;filter:url(#logo-neutral)}

/* ---------- PREGUNTAS FRECUENTES ---------- */
.faq{padding:62px 0 86px}
.faq-head{margin-bottom:44px}
.faq .eyebrow{margin-bottom:18px}
.faq h2{font-size:clamp(28px,2.9vw,38px);line-height:1.12}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:38px 60px}
.faq-grid h3{font-family:var(--font-text);font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--ink);margin-bottom:11px}
.faq-grid p{font-size:15px;line-height:1.72;color:var(--muted)}
.faq-grid a{color:#d9c3ef;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .25s}
.faq-grid a:hover{color:#fff}

/* ---------- FOOTER ---------- */
.footer{background:linear-gradient(125deg,#18181a,#0e0f10);border-top:1px solid var(--line);padding:48px 0 22px}
.footer-main{display:grid;grid-template-columns:2fr .7fr 1fr 1.1fr;gap:40px;padding-bottom:40px}
.footer-brand p{max-width:310px;font-size:13.5px;line-height:1.55;color:#a9a6a4;margin-top:20px}
.footer .group-logo{width:137px}
.footer .foot-title{font-size:12px;color:#e6e3e1;font-weight:500;letter-spacing:.3px;margin-bottom:18px}
.footer a,.email{display:block;font-size:13px;color:#a9a6a4;margin-bottom:11px;transition:color .25s}
.footer .email:hover{color:#fff}
.footer a:hover{color:#fff}
.footer-bottom{padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;font-size:11px;color:#7e7c7a}

/* ======================= PANTALLAS GRANDES ======================= */
@media(min-width:1650px){
  .hero{height:max(880px,31vw);min-height:0}
  .brand{height:max(840px,31vw)}
  .brand-art{height:max(660px,31vw)}
}

/* ======================= TABLET / NOTEBOOK ======================= */
@media(max-width:1100px){
  :root{--head:88px}
  .hero{height:690px;min-height:690px}
  .hero-copy{width:48%}
  .hero-copy>p:not(.eyebrow){font-size:16px}
  .brand{height:700px}
  .brand-copy{width:40%}
  .brand p{font-size:15px}
  .brand-ix .brand-copy{width:39%}
  .brand-art{height:560px}
  .brands-intro{padding:52px 0 48px}
  .story{padding-block:70px 56px}
  .metrics-grid>div+div{padding-left:28px}
  .footer-main{gap:24px}
}

/* ============================ MOBILE ============================ */
@media(max-width:760px){
  :root{--head:72px}
  .wrap{width:88%}

  .header{background:linear-gradient(#0a0b0cc9,#0a0b0c40 60%,transparent)}
  .header.is-stuck .header-inner{height:62px}
  .header .group-logo{width:112px}
  .header nav{gap:13px;font-size:11.5px}
  .header nav a{padding-block:12px}
  .nav-full{display:none}
  .nav-short{display:inline}

  /* --- HERO: foto arriba fundida, texto debajo --- */
  .hero{height:auto;min-height:0;display:block;overflow:visible;padding-bottom:8px}
  .hero::before{content:none}
  .hero .scene-photo{
    position:relative;z-index:0;inset:auto;
    width:100%;height:50svh;min-height:380px;max-height:480px;
    -webkit-mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.4) 74%,transparent 95%);
            mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.4) 74%,transparent 95%);
  }
  .hero .scene-inner{display:block;height:auto;position:relative;z-index:2;margin-top:-104px}
  .hero-copy{width:100%;max-width:none;padding-top:0}
  .hero .eyebrow{font-size:10px;letter-spacing:2.8px;margin-bottom:14px}
  .hero h1{font-size:clamp(30px,8.7vw,40px);line-height:1.1;margin-bottom:16px;text-shadow:none}
  .hero-copy>p:not(.eyebrow){font-size:15.5px;line-height:1.58;max-width:none;color:#d9d6d3}
  .scroll-cue{margin:26px auto 0}

  /* --- INTRO --- */
  .brands-intro{padding:46px 0 44px}
  .brands-intro h2{font-size:29px}
  .brands-intro p:not(.eyebrow){font-size:14.5px;line-height:1.62}
  .desktop-break{display:none}

  /* --- MARCAS: foto fundida + bloque de texto --- */
  .brand,.brand-art{height:auto;display:block;overflow:visible;padding-bottom:56px}
  .brand::before,.brand-ix::before,.brand-art::before{content:none}
  .brand .scene-photo{
    position:relative;z-index:0;inset:auto;
    width:100%;height:auto;aspect-ratio:4/5;
    -webkit-mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.35) 79%,transparent 96%);
            mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.35) 79%,transparent 96%);
  }
  .brand .scene-inner{display:block;height:auto;position:relative;z-index:2;margin-top:-96px}
  .brand-copy,.brand-ix .brand-copy{width:100%;max-width:none;padding:0}

  .brand .brand-claim{font-size:26px;margin:16px 0 14px;line-height:1.18}
  .brand p{font-size:14.5px;line-height:1.58}

  .logo-fy{width:112px;height:77px}
  .logo-fy img{width:140px;left:-17px;top:-33px}
  .logo-ix{width:123px;height:79px}
  .logo-ix img{width:136px;left:-13px;top:-32px}
  .art-logo{width:108px}
  .brand-art .brand-claim{margin-top:16px}

  .brand-link{margin-top:22px;font-size:13.5px;padding:13px 30px;min-width:172px}
  .brand-art .coming{margin-top:20px;gap:10px}
  .coming span{padding:11px 24px}

  /* --- HISTORIA --- */
  .story{grid-template-columns:1fr;padding-block:56px 40px;gap:26px}
  .story h2{font-size:30px;max-width:320px}
  .story .eyebrow{font-size:10px;margin-bottom:16px}
  .story-rule{margin-top:26px;width:90px;background:linear-gradient(90deg,
    var(--purple) 0 26px,transparent 26px 32px,
    var(--pink)   32px 58px,transparent 58px 64px,
    var(--teal)   64px 90px)}
  .story-copy{max-width:none}
  .story-copy p{font-size:15.5px;line-height:1.78;margin-bottom:21px}
  .story-copy .lead{font-size:17.5px;line-height:1.6;margin-bottom:24px}
  .rule i{width:24px;height:39px}
  .rule i img{width:115px}

  /* --- METRICAS --- */
  .metrics{padding:30px 0 46px}
  .metrics h2{margin-bottom:22px}
  .metrics-grid{grid-template-columns:1fr;max-width:100%;gap:26px}
  .metrics strong{font-size:43px}
  .metrics-grid>div+div{padding:26px 0 0;border-left:0;border-top:1px solid var(--line)}
  .metrics p{margin-top:9px;max-width:none;font-size:13.5px}
  .watermark{right:-30px;bottom:auto;top:18px;height:150px;width:95px;opacity:.04}

  /* --- PREGUNTAS FRECUENTES --- */
  .faq{padding:46px 0 58px}
  .faq-head{margin-bottom:30px}
  .faq h2{font-size:27px}
  .faq-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:26px}
  .faq-grid h3{font-size:16px;margin-bottom:9px}
  .faq-grid p{font-size:14.5px;line-height:1.7}

  /* --- FOOTER --- */
  .footer{padding:40px 0 20px}
  .footer-main{grid-template-columns:1fr 1fr;gap:34px 20px;padding-bottom:32px}
  .footer-brand{grid-column:1/-1}
  .footer-main>div:last-child{grid-column:1/-1}
  .footer-brand p{max-width:300px}
  .footer a,.email{font-size:13.5px;margin-bottom:13px}
  .footer-bottom{flex-direction:column;gap:12px;font-size:11px}
}

@media(max-width:380px){
  .wrap{width:90%}
  .header nav{gap:9px;font-size:10.5px}
  .hero h1{font-size:28px}
  .brand .brand-claim{font-size:23px}
  .metrics strong{font-size:38px}
}

/* ======================= ACCESIBILIDAD ======================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}