/* ====== Paleta Black Studio ====== */
:root{
  --negro:#121111;
  --carbon-2:#1c1b1b;
  --carbon:#2f2e2e;
  --gris:#8d8b8b;
  --gris-claro:#c9c7c7;
  --papel:#f1f0ef;
  --linea:rgba(241,240,239,.12);
  --r:14px;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:80px }
body{ font-family:'Montserrat',sans-serif; background:var(--negro); color:var(--papel); line-height:1.6; overflow-x:hidden }
img,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }

/* ---- botones ---- */
.btn{ display:inline-block; background:var(--papel); color:var(--negro); font-weight:700; font-size:.9rem; letter-spacing:.04em;
  padding:.95rem 1.7rem; border:2px solid var(--papel); border-radius:999px; cursor:pointer; transition:.25s; font-family:inherit }
.btn:hover{ background:transparent; color:var(--papel) }
.btn-ghost{ background:transparent; color:var(--papel); border-color:var(--linea) }
.btn-ghost:hover{ border-color:var(--papel) }
.btn-sm{ padding:.55rem 1.2rem; font-size:.8rem }

.eyebrow{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gris); font-weight:600; margin-bottom:1rem }
.lead{ color:var(--gris-claro); font-weight:300; font-size:1.08rem; max-width:34rem }

/* ---- menú ---- */
.nav{ position:fixed; inset:0 0 auto; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(16px,5vw,64px); transition:background .3s, padding .3s }
.nav.solid{ background:rgba(18,17,17,.88); backdrop-filter:blur(10px); padding-block:.75rem; border-bottom:1px solid var(--linea) }
.nav-logo img{ height:34px; width:auto; display:block }
.nav-links{ display:flex; gap:2rem; align-items:center; font-size:.85rem; font-weight:500 }
.nav-links a:not(.btn){ color:var(--gris-claro) }
.nav-links a:not(.btn):hover{ color:var(--papel) }
.nav-toggle{ display:none; background:none; border:0; width:32px; height:24px; position:relative; cursor:pointer }
.nav-toggle span{ position:absolute; left:0; right:0; height:2px; background:var(--papel); transition:.3s }
.nav-toggle span:first-child{ top:6px } .nav-toggle span:last-child{ bottom:6px }
.nav.open .nav-toggle span:first-child{ top:11px; transform:rotate(45deg) }
.nav.open .nav-toggle span:last-child{ bottom:11px; transform:rotate(-45deg) }

/* ---- portada ---- */
.hero{ position:relative; min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:3rem;
  padding:7rem clamp(16px,5vw,64px) 4rem; overflow:hidden }
.hero-mark{ position:absolute; width:min(70vw,900px); right:-12%; top:50%; transform:translateY(-50%) rotate(-8deg); opacity:.04; pointer-events:none }
.hero-text{ position:relative; z-index:2 }
.hero h1{ font-size:clamp(2.6rem,6.4vw,5.6rem); font-weight:900; line-height:.98; letter-spacing:-.03em; margin-bottom:1.5rem }
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em }
.hero h1 .ln > span{ display:inline-block }
.hero h1 .gris{ color:var(--gris) }

/* ---- animación de entrada de la portada ---- */
@keyframes subir{ from{ transform:translateY(110%) } to{ transform:none } }
@keyframes aparecer{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
@keyframes marca{ from{ opacity:0; transform:translateY(-50%) rotate(-30deg) scale(.7) } to{ opacity:.04; transform:translateY(-50%) rotate(-8deg) } }
@keyframes tel1{ from{ opacity:0; transform:translateY(80px) rotate(-14deg) } to{ opacity:1; transform:rotate(-5deg) } }
@keyframes tel2{ from{ opacity:0; transform:translateY(120px) rotate(14deg) } to{ opacity:1; transform:rotate(4deg) } }
@keyframes bajar{ from{ opacity:0; transform:translateY(-100%) } to{ opacity:1; transform:none } }
.hero h1 .ln > span{ animation:subir 1s cubic-bezier(.2,.8,.2,1) both }
.hero h1 .ln:nth-child(1) > span{ animation-delay:.3s }
.hero h1 .ln:nth-child(2) > span{ animation-delay:.48s }
.hero h1 .ln:nth-child(3) > span{ animation-delay:.66s }
.hero .eyebrow{ animation:aparecer .8s ease-out .1s both }
.hero .lead{ animation:aparecer .9s ease-out 1s both }
.hero-cta{ animation:aparecer .9s ease-out 1.2s both }
.hero-mark{ animation:marca 1.8s cubic-bezier(.2,.8,.2,1) both }
.p1{ animation:tel1 1.3s cubic-bezier(.2,.8,.2,1) .8s both }
.p2{ animation:tel2 1.3s cubic-bezier(.2,.8,.2,1) 1.05s both }
.nav-toggle{ animation:aparecer .8s ease-out .9s both }
@media (min-width:721px){ .nav-links{ animation:bajar .8s ease-out .9s both } }

/* ---- intro: logo al centro y la X vuela al menú ---- */
.intro{ display:none; position:fixed; inset:0; z-index:100; place-items:center; background:var(--negro); cursor:pointer }
.intro-on .intro, .intro.activa{ display:grid }
.intro-logo{ position:relative; width:min(55vw,400px); aspect-ratio:87.5/28.68 }
.intro-palabra{ position:absolute; inset:0; width:100%; height:100%;
  animation:intro-entra 1s cubic-bezier(.2,.8,.2,1) .15s both }
.intro-x{ position:absolute; left:36.47%; top:0; width:23.39%; height:74.69%; transform-origin:0 0;
  animation:intro-x 1.1s cubic-bezier(.2,.8,.2,1) both }
@keyframes intro-entra{ from{ opacity:0; filter:blur(10px); letter-spacing:.2em; transform:scale(.94) } to{ opacity:1; filter:none; transform:none } }
@keyframes intro-x{ from{ opacity:0; transform:translateY(-40%) scale(1.15) rotate(-90deg); transform-origin:50% 50% } to{ opacity:1; transform:none; transform-origin:50% 50% } }
/* mientras está la intro: la página espera quieta y no se puede hacer scroll */
.intro-on{ overflow:hidden }
.intro-on .nav-logo img{ visibility:hidden }
.intro-on .hero *, .intro-on .hero-mark, .intro-on .nav *{ animation-play-state:paused !important }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem }
.hero-phones{ position:relative; height:min(620px,72vh) }
/* marco de vidrio líquido: cristal claro con canto fino brillante */
.phone{ position:absolute; width:min(260px,44%); aspect-ratio:9/16; border-radius:36px; overflow:hidden; padding:8px;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 50%, rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(6px) saturate(140%) brightness(1.08); backdrop-filter:blur(6px) saturate(140%) brightness(1.08);
  box-shadow:inset 0 0 18px rgba(255,255,255,.06), 0 30px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35) }
.phone::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; padding:1.4px;
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 12%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.02) 50%, rgba(255,255,255,.06) 70%, rgba(255,255,255,.35) 88%, rgba(255,255,255,.85) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) }
.phone video{ width:100%; height:100%; object-fit:cover; border-radius:29px; display:block; background:var(--carbon-2);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) }
.p1{ left:8%; top:0; transform:rotate(-5deg) }
.p2{ right:6%; bottom:0; transform:rotate(4deg) }

/* ---- clientes ---- */
.clientes{ border-block:1px solid var(--linea); overflow:hidden; padding:1.4rem 0 }
.clientes-track{ display:flex; gap:4rem; width:max-content; animation:cinta 30s linear infinite }
.clientes span{ font-weight:800; font-size:1.05rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); white-space:nowrap }
@keyframes cinta{ to{ transform:translateX(-50%) } }

/* ---- secciones ---- */
.section{ padding:6rem clamp(16px,5vw,64px) }
.section-head{ margin-bottom:3rem }
.section h2{ font-size:clamp(1.9rem,4vw,3rem); font-weight:800; letter-spacing:-.02em; line-height:1.1 }

/* ---- servicios (liquid glass) ---- */
#servicios{ position:relative; overflow:hidden; isolation:isolate }
.fondo-serv{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%) }
/* luces neutras (sin color) */
.luces{ position:absolute; inset:0 }
.luces span{ position:absolute; border-radius:50%; filter:blur(50px); will-change:transform }
.luces span:nth-child(1){ width:44vw; height:44vw; max-width:640px; max-height:640px; left:-6%; top:22%; opacity:.22;
  background:radial-gradient(circle, #f1f0ef 0%, rgba(241,240,239,0) 62%); animation:flotar1 16s ease-in-out infinite alternate }
.luces span:nth-child(2){ width:42vw; height:42vw; max-width:600px; max-height:600px; right:-8%; top:38%; opacity:.18;
  background:radial-gradient(circle, #f1f0ef 0%, rgba(241,240,239,0) 62%); animation:flotar2 20s ease-in-out infinite alternate }
.luces span:nth-child(3){ width:30vw; height:30vw; max-width:420px; max-height:420px; left:36%; bottom:-6%; opacity:.2;
  background:radial-gradient(circle, #f1f0ef 0%, rgba(241,240,239,0) 62%); animation:flotar3 24s ease-in-out infinite alternate }
@keyframes flotar1{ to{ transform:translate(26vw,8vh) scale(1.15) } }
@keyframes flotar2{ to{ transform:translate(-28vw,-12vh) scale(.92) } }
@keyframes flotar3{ to{ transform:translate(-18vw,-38vh) scale(1.25) } }
/* la X de la marca girando lento */
.fondo-x{ position:absolute; width:min(62vw,760px); left:50%; top:56%; opacity:.26; transform:translate(-50%,-50%);
  animation:girar 60s linear infinite }
@keyframes girar{ to{ transform:translate(-50%,-50%) rotate(360deg) } }
.serv-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.5rem 3rem }
.serv-head .lead{ max-width:26rem; font-size:.98rem }
.servicios{ display:grid; gap:.9rem }

/* la tarjeta de vidrio líquido: casi invisible, con canto fino que brilla en las esquinas */
.serv{ --mx:50%; --my:50%; position:relative; display:grid; grid-template-columns:4rem minmax(0,1.15fr) minmax(0,1fr) 3rem; align-items:center; gap:1.5rem;
  padding:2rem 2.1rem; border-radius:40px; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 50%, rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(2px) saturate(140%) brightness(1.05); backdrop-filter:blur(2px) saturate(140%) brightness(1.05);
  box-shadow:inset 0 0 24px rgba(255,255,255,.035), inset 0 1px 6px rgba(255,255,255,.06), 0 16px 36px rgba(0,0,0,.35);
  text-shadow:0 1px 12px rgba(0,0,0,.45);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s, background .4s }
/* luz que sigue al mouse */
.serv::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .4s;
  background:radial-gradient(360px circle at var(--mx) var(--my), rgba(255,255,255,.18), rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 65%) }
.serv:hover{ transform:translateY(-4px) scale(1.012);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 50%, rgba(255,255,255,.05));
  box-shadow:inset 0 0 30px rgba(255,255,255,.05), inset 0 1px 8px rgba(255,255,255,.09), 0 24px 50px rgba(0,0,0,.42) }
/* canto de cristal */
.serv::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; padding:1.3px;
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 12%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.02) 50%, rgba(255,255,255,.06) 70%, rgba(255,255,255,.35) 88%, rgba(255,255,255,.85) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition:opacity .4s }
.serv:hover::after{ opacity:1 }
.serv:hover::before{ filter:brightness(1.3) }

.serv .num{ font-size:.8rem; font-weight:700; color:#e2e0de; letter-spacing:.1em }
.serv h3{ font-size:clamp(1.4rem,3vw,2.4rem); font-weight:800; letter-spacing:-.02em; line-height:1.05; transition:transform .5s cubic-bezier(.2,.8,.2,1) }
.serv:hover h3{ transform:translateX(.5rem) }
.serv p{ color:#e2e0de; font-size:.92rem; font-weight:400 }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem }
.tags li{ font-size:.7rem; font-weight:600; letter-spacing:.05em; padding:.32rem .75rem; border-radius:999px; color:var(--papel); text-shadow:none;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); box-shadow:inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(255,255,255,.1) }
.flecha{ justify-self:end; width:2.8rem; height:2.8rem; border-radius:50%; display:grid; place-items:center; font-size:1.1rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), background .3s, color .3s }
.serv:hover .flecha{ background:var(--papel); color:var(--negro); transform:rotate(-45deg) }
.serv-thumb{ display:none }

@media (max-width:900px){
  .serv{ grid-template-columns:minmax(0,1fr) 5.5rem; grid-template-areas:"num thumb" "h3 thumb" "txt txt"; gap:.5rem 1rem; padding:1.5rem 1.3rem; border-radius:22px }
  .serv .num{ grid-area:num } .serv h3{ grid-area:h3 } .serv-txt{ grid-area:txt; margin-top:.4rem }
  .serv-thumb{ display:block; grid-area:thumb; width:5.5rem; aspect-ratio:1; object-fit:cover; border-radius:14px; align-self:center;
    border:1px solid rgba(255,255,255,.15) }
  .flecha{ display:none }
  .serv.con-video{ grid-template-columns:minmax(0,1fr); grid-template-areas:"num" "h3" "thumb" "txt" }
  .serv.con-video .serv-thumb{ width:100%; aspect-ratio:16/9; margin-top:.6rem }
  .serv:hover{ transform:none } .serv:hover h3{ transform:none }
  .luces span{ filter:blur(36px) }
  .fondo-x{ width:110vw }
  .serv{ border-radius:30px }
}
@media (prefers-reduced-motion:reduce){ .luces span, .fondo-x{ animation:none } }

/* ---- portfolio ---- */
#portfolio .section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem }
#portfolio .section-head .eyebrow{ width:100%; margin-bottom:-1rem }
.filtros{ display:flex; gap:.5rem; flex-wrap:wrap }
.filtros button{ background:none; border:1px solid var(--linea); color:var(--gris-claro); padding:.5rem 1.1rem; border-radius:999px;
  font:500 .82rem 'Montserrat',sans-serif; cursor:pointer; transition:.2s }
.filtros button.on, .filtros button:hover{ background:var(--papel); color:var(--negro); border-color:var(--papel) }
.grid{ columns:3 300px; column-gap:1.2rem }
.item{ break-inside:avoid; margin-bottom:1.2rem; position:relative; border-radius:var(--r); overflow:hidden; background:var(--carbon-2) }
.item[hidden]{ display:none }
.item img, .item video{ width:100%; transition:transform .6s }
.item.horizontal video{ aspect-ratio:16/9; object-fit:cover }
.item.vertical video{ aspect-ratio:9/16; object-fit:cover }
.item:hover img, .item:hover video{ transform:scale(1.04) }
.item figcaption{ position:absolute; inset:auto 0 0; padding:2.5rem 1.2rem 1.1rem; background:linear-gradient(transparent,rgba(0,0,0,.85));
  display:flex; flex-direction:column; font-size:.95rem }
.item figcaption span{ font-size:.78rem; color:var(--gris-claro); font-weight:300 }

/* ---- proceso ---- */
.proceso-wrap{ background:var(--carbon-2) }
.proceso{ list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; counter-reset:p }
.proceso li{ counter-increment:p; border-top:2px solid var(--carbon); padding-top:1.4rem; position:relative }
.proceso li::before{ content:"0" counter(p); position:absolute; top:-1.15rem; left:0; background:var(--papel); color:var(--negro);
  font-weight:800; font-size:.8rem; width:2.2rem; height:2.2rem; display:grid; place-items:center; border-radius:50% }
.proceso b{ display:block; font-size:1.05rem; margin:1rem 0 .3rem }
.proceso span{ color:var(--gris-claro); font-size:.88rem; font-weight:300 }

/* ---- contacto ---- */
.contacto{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start }
.canales{ list-style:none; margin-top:2.5rem; border-top:1px solid var(--linea) }
.canales a{ display:flex; justify-content:space-between; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--linea); transition:padding .25s }
.canales a[href]:hover{ padding-left:.6rem }
.canales span{ color:var(--gris); font-size:.85rem }
.canales b{ font-weight:600; text-align:right; word-break:break-all }
.form{ background:var(--carbon-2); border:1px solid var(--linea); border-radius:var(--r); padding:clamp(1.4rem,4vw,2.5rem); display:grid; gap:1.2rem }
.form label{ display:grid; gap:.45rem; font-size:.8rem; color:var(--gris-claro); font-weight:500 }
.form input, .form select, .form textarea{ background:var(--negro); border:1px solid var(--linea); color:var(--papel); border-radius:10px;
  padding:.85rem 1rem; font:400 .95rem 'Montserrat',sans-serif; width:100% }
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--gris-claro) }
.form .btn{ justify-self:start }

/* ---- pie ---- */
.footer{ text-align:center; padding:4rem 16px 3rem; border-top:1px solid var(--linea); color:var(--gris) }
.footer img{ height:34px; width:auto; margin:0 auto 1rem }
.footer .copy{ font-size:.75rem; margin-top:.8rem }

.wa-float{ position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25d366;
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .2s }
.wa-float:hover{ transform:scale(1.08) }
.wa-float svg{ width:30px; fill:#fff }

/* ---- aparición ---- */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none } .clientes-track{ animation:none } html{ scroll-behavior:auto }
  .hero *, .hero-mark, .nav *{ animation-duration:.01s !important; animation-delay:0s !important } }

/* ---- móvil ---- */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:6.5rem; min-height:auto }
  .hero-phones{ height:440px }
  .phone{ width:min(200px,46%) }
  .proceso{ grid-template-columns:1fr 1fr }
  .contacto{ grid-template-columns:1fr; gap:2.5rem }
}
@media (max-width:720px){
  .nav-toggle{ display:block; z-index:2 }
  .nav-links{ position:fixed; inset:0; background:var(--negro); flex-direction:column; justify-content:center; gap:2rem; font-size:1.3rem;
    opacity:0; pointer-events:none; transition:opacity .3s }
  .nav.open .nav-links{ opacity:1; pointer-events:auto }
  .section{ padding-block:4.5rem }
  .proceso{ grid-template-columns:1fr; gap:2.4rem }
  .grid{ columns:2 150px; column-gap:.8rem }
  .item{ margin-bottom:.8rem }
  .item figcaption{ padding:2rem .8rem .8rem; font-size:.82rem }
}