/* ============================================================
   YOCOYA — sistema de diseño premium
   Fraunces (display) + Space Grotesk (UI). Canvas editorial nocturno.
   ============================================================ */

@font-face{font-family:"Fraunces";src:url("/fonts/fraunces.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;font-optical-sizing:auto}
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-italic.woff2") format("woff2");
  font-weight:100 900;font-style:italic;font-display:swap;font-optical-sizing:auto}
@font-face{font-family:"Space Grotesk";src:url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --bg:#0A0A0F; --bg-2:#0d0e15; --paper:#F1ECE1; --paper-ink:#15140F;
  --bone:#EDE7DA; --muted:#9C99AB; --faint:rgba(237,231,218,.10);
  --line:rgba(237,231,218,.13);
  --gold:#E9B36A; --gold-2:#F3D6A3;
  --glow-a:#5b4fe0; --glow-b:#c8608f; --glow-c:#e9b36a;
  --serif:"Fraunces",Georgia,serif; --sans:"Space Grotesk",system-ui,sans-serif;
  --max:1340px; --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
  --r:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--bone);font-family:var(--sans);
  font-weight:400;line-height:1.6;overflow-x:hidden;
  font-feature-settings:"ss01","cv01";
}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#14100a}
img{max-width:100%;display:block}

/* ---- grain + mesh backdrop (fijos, sutiles) ---- */
.backdrop{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -5%, color-mix(in srgb,var(--glow-a) 26%,transparent), transparent 60%),
    radial-gradient(55vw 55vw at 92% 8%, color-mix(in srgb,var(--glow-b) 22%,transparent), transparent 62%),
    radial-gradient(70vw 50vw at 50% 108%, color-mix(in srgb,var(--glow-c) 16%,transparent), transparent 60%),
    var(--bg);
}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- utilidades ---- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:clamp(80px,12vw,180px) 0;position:relative}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  font-weight:500;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}
.serif{font-family:var(--serif)}
.grad-text{background:linear-gradient(100deg,var(--gold-2),var(--gold) 45%,#d98f6a);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- cursor personalizado ---- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor-dot{width:7px;height:7px;background:#fff}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.6);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
.cursor-ring.hov{width:66px;height:66px;background:rgba(255,255,255,.08);border-color:transparent}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---- barra de progreso ---- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--gold),var(--glow-b));box-shadow:0 0 12px var(--gold)}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .5s var(--ease)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.nav.scrolled{backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid var(--line)}
.nav.scrolled .wrap{height:66px}
.brand{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:-.01em}
.brand sup{font-size:.5em;color:var(--gold);vertical-align:super;font-family:var(--sans)}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a.link{position:relative;font-size:14px;color:var(--muted);transition:color .3s}
.nav-links a.link::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold);transition:width .35s var(--ease)}
.nav-links a.link:hover{color:var(--bone)}.nav-links a.link:hover::after{width:100%}
@media(max-width:820px){.nav-links a.link{display:none}}
.pill{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px;
  font-size:14px;font-weight:500;background:var(--bone);color:#111;transition:transform .3s var(--ease),box-shadow .3s}
.pill:hover{box-shadow:0 10px 40px -8px rgba(233,179,106,.5)}
.pill.ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
.pill.ghost:hover{border-color:var(--gold);box-shadow:none}

/* ---- HERO ---- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding-top:120px}
.hero-orbit{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;mix-blend-mode:screen}
.blob.b1{width:46vw;height:46vw;left:-8vw;top:6vh;background:radial-gradient(circle,var(--glow-a),transparent 70%)}
.blob.b2{width:40vw;height:40vw;right:-6vw;top:20vh;background:radial-gradient(circle,var(--glow-b),transparent 70%)}
.hero-tex{position:absolute;inset:0;z-index:-1;background:url("/img/texture-hero.jpg") center/cover;
  opacity:.09;mix-blend-mode:luminosity;filter:contrast(1.1)}
.grid-ov{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--faint) 1px,transparent 1px),linear-gradient(90deg,var(--faint) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(120vw 90vh at 50% 30%,#000 30%,transparent 78%)}
.hero h1{font-family:var(--serif);font-weight:340;letter-spacing:-.03em;line-height:.92;
  font-size:clamp(3.1rem,10.5vw,10.5rem);max-width:15ch;margin:.3em 0 0}
.hero h1 em{font-style:italic;font-weight:420}
.hero-sub{margin-top:2.2rem;max-width:46ch;font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--muted)}
.hero-cta{margin-top:2.6rem;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-funnel{margin-top:2rem;font-size:14px;color:var(--muted)}
.hero-funnel a{color:var(--bone);border-bottom:1px solid var(--gold);padding-bottom:2px}
.hero-funnel a:hover{color:var(--gold)}
.scroll-hint{position:absolute;bottom:34px;left:var(--pad);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.scroll-hint i{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);display:block;animation:sd 2s var(--ease) infinite}
@keyframes sd{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- marquee ---- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  padding:22px 0;display:flex;gap:0;white-space:nowrap;margin-top:clamp(40px,7vw,90px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;gap:0;list-style:none;animation:mq 34s linear infinite}
.marquee li{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.4rem);font-style:italic;font-weight:340;padding:0 2.2rem;color:var(--bone);opacity:.85}
.marquee li::after{content:"✦";font-style:normal;color:var(--gold);margin-left:4.4rem;font-size:.7em;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- sección paper (contraste) ---- */
.paper{background:var(--paper);color:var(--paper-ink)}
.paper .eyebrow{color:#9a6a2e}.paper .eyebrow::before{background:#9a6a2e}
.statement{font-family:var(--serif);font-weight:340;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(1.7rem,4.4vw,3.6rem);max-width:20ch}
.statement em{font-style:italic;color:#a26a2c}
.paper .lead{max-width:52ch;margin-top:1.6rem;color:#5b564c;font-size:1.05rem}

/* ---- servicios (lista editorial) ---- */
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,5vw,60px)}
.h2{font-family:var(--serif);font-weight:340;letter-spacing:-.02em;line-height:1;font-size:clamp(2.2rem,6vw,4.6rem)}
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,4vw,50px);align-items:center;
  padding:clamp(24px,3.4vw,42px) 0;border-bottom:1px solid var(--line);position:relative;transition:padding .5s var(--ease)}
.svc-row .no{font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.svc-row .ttl{font-family:var(--serif);font-weight:360;font-size:clamp(1.5rem,3.8vw,2.9rem);letter-spacing:-.01em;transition:transform .5s var(--ease),color .4s}
.svc-row .desc{color:var(--muted);max-width:34ch;font-size:.98rem;justify-self:end;text-align:right;transition:color .4s}
.svc-row .arw{position:absolute;right:0;opacity:0;transform:translateX(-10px);transition:.5s var(--ease);color:var(--gold);font-size:1.4rem}
.svc-row::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 8%,transparent),transparent 40%);opacity:0;transition:opacity .5s}
.svc-row:hover::before{opacity:1}
.svc-row:hover{padding-left:clamp(14px,2vw,30px)}
.svc-row:hover .ttl{transform:translateX(6px);color:var(--gold-2)}
@media(max-width:760px){.svc-row{grid-template-columns:auto 1fr}.svc-row .desc{display:none}}

/* ---- trabajo / case studies ---- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,60px)}
@media(max-width:880px){.work-grid{grid-template-columns:1fr}}
.case{position:relative}
.case-vis{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;transition:transform .6s var(--ease),box-shadow .6s var(--ease);will-change:transform;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.case:hover .case-vis{transform:translateY(-8px);box-shadow:0 50px 120px -40px rgba(0,0,0,.9)}
.case-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;gap:16px}
.case-meta h3{font-family:var(--serif);font-weight:380;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.01em}
.case-meta .cat{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.case-meta .yr{font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums}
.tag{display:inline-block;margin-top:10px;margin-right:8px;font-size:12px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px}

/* mockup de navegador (render CSS) */
.browser{position:absolute;inset:0;display:flex;flex-direction:column;background:#0f1117}
.browser .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#161923;border-bottom:1px solid rgba(255,255,255,.06)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#2c3040}
.browser .url{margin-left:12px;height:18px;flex:1;border-radius:6px;background:#0f1117;max-width:60%}
.browser .view{flex:1;position:relative;overflow:hidden}
/* móvil flotante */
.phone{position:absolute;right:6%;bottom:-4%;width:24%;aspect-ratio:9/19;border-radius:20px;
  background:#0c0d12;border:2px solid rgba(255,255,255,.12);box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
  overflow:hidden;z-index:2}
.phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:30%;height:5px;border-radius:9px;background:rgba(255,255,255,.18);z-index:3}

/* “sitios ficticios” dentro de los mockups */
.ui{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;gap:12px}
.ui .row{display:flex;gap:8px;align-items:center}
.ui .dot{width:22px;height:22px;border-radius:50%}
.ui .bar1{height:9px;border-radius:6px;flex:1}
.ui .big{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.02em}
.ui .pillx{align-self:flex-start;padding:7px 14px;border-radius:999px;font-size:11px;font-weight:600}
.ui .cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.ui .card{border-radius:10px;aspect-ratio:1.5;}
/* Aurora — case 1 */
.ui-aurora{background:radial-gradient(120% 90% at 10% 0,#243b8f,#0b1030)}
.ui-aurora .big{color:#eaf0ff;font-size:26px}.ui-aurora .accent{color:#7ea2ff}
.ui-aurora .pillx{background:#7ea2ff;color:#0b1030}
.ui-aurora .card{background:linear-gradient(135deg,rgba(126,162,255,.3),rgba(126,162,255,.05));border:1px solid rgba(126,162,255,.2)}
/* Terracotta — case 2 */
.ui-clay{background:#F3E8DD}
.ui-clay .big{color:#3a2418;font-size:24px}.ui-clay .accent{color:#c65b34}
.ui-clay .pillx{background:#c65b34;color:#fff}
.ui-clay .card{background:#e7d3c2;border:1px solid #d8bda6}
.ui-clay .bar1{background:#dcc7b3}
/* Neo-mint fintech — case 3 */
.ui-mint{background:#07120e}
.ui-mint .big{color:#eafff4;font-size:26px}.ui-mint .accent{color:#3ff0a8}
.ui-mint .pillx{background:#3ff0a8;color:#07120e}
.ui-mint .card{background:linear-gradient(135deg,rgba(63,240,168,.22),transparent);border:1px solid rgba(63,240,168,.2)}
.ui-mint .bar1{background:rgba(63,240,168,.16)}
/* Mono editorial — case 4 */
.ui-mono{background:#0c0c0c}
.ui-mono .big{color:#fff;font-size:28px}.ui-mono .accent{color:#e9b36a}
.ui-mono .pillx{background:#e9b36a;color:#111}
.ui-mono .card{background:#161616;border:1px solid #242424}
.ui-mono .bar1{background:#1e1e1e}

/* ---- proceso ---- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:860px){.proc{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.proc{grid-template-columns:1fr}}
.step{border-top:1px solid var(--gold);padding-top:20px}
.step .n{font-family:var(--serif);font-size:2.4rem;font-weight:340;color:var(--gold);line-height:1}
.step h4{margin:14px 0 8px;font-size:1.15rem;font-weight:500}
.step p{color:var(--muted);font-size:.95rem}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,50px);text-align:center}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr}}
.stat .num{font-family:var(--serif);font-weight:340;font-size:clamp(2.6rem,7vw,5rem);line-height:1;letter-spacing:-.02em}
.stat .lbl{margin-top:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- funnel CALLI ---- */
.funnel{border:1px solid var(--line);border-radius:calc(var(--r) + 6px);padding:clamp(28px,4vw,52px);
  background:linear-gradient(120deg,color-mix(in srgb,var(--glow-a) 14%,transparent),color-mix(in srgb,var(--glow-c) 10%,transparent)),var(--bg-2);
  backdrop-filter:blur(6px);display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.funnel h3{font-family:var(--serif);font-weight:360;font-size:clamp(1.5rem,3.2vw,2.4rem);letter-spacing:-.01em;max-width:22ch}
.funnel p{color:var(--muted);margin-top:8px}

/* ---- contacto ---- */
.contact h2{font-family:var(--serif);font-weight:330;font-size:clamp(2.6rem,9vw,7rem);line-height:.95;letter-spacing:-.03em}
.contact h2 em{font-style:italic;color:var(--gold)}
.form{margin-top:clamp(36px,5vw,64px);max-width:760px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:600px){.form .row{grid-template-columns:1fr}}
.field{position:relative;margin-bottom:30px}
.field label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.field input,.field textarea,.field select{width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--line);color:var(--bone);font:inherit;font-size:1.15rem;padding:8px 0;transition:border-color .4s}
.field select{color:var(--bone)}.field select option{background:var(--bg-2)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:90px}
.hp{position:absolute;left:-9999px}
.submit{display:inline-flex;align-items:center;gap:14px;background:var(--gold);color:#14100a;
  border:none;font:inherit;font-weight:600;font-size:1.05rem;padding:16px 30px;border-radius:999px;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s}
.submit:hover{box-shadow:0 16px 50px -12px rgba(233,179,106,.6)}

/* ---- footer ---- */
.footer{border-top:1px solid var(--line);padding-top:clamp(50px,7vw,90px);padding-bottom:44px}
.foot-word{font-family:var(--serif);font-weight:330;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(4rem,22vw,20rem);color:var(--bone);opacity:.96;margin-bottom:.1em}
.foot-word span{color:var(--gold)}
.foot-cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;color:var(--muted);font-size:14px;border-top:1px solid var(--line);padding-top:30px}
.foot-cols a:hover{color:var(--gold)}
.foot-cols .col p{margin-bottom:8px}
.foot-cols .col b{color:var(--bone);font-weight:500;display:block;margin-bottom:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ---- reveals ---- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}
.clip{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.clip.in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}.clip{clip-path:none}
  .cursor-dot,.cursor-ring{display:none}
}