:root{
  --tinta:#121110;
  --tinta-2:#1A1917;
  --hueso:#EFE8DC;
  --humo:#8C857B;
  --grana:#A31621;
  --linea:rgba(239,232,220,.12);
  --serif:"Bodoni Moda",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --suave:cubic-bezier(.16,1,.3,1);
  --margen:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--tinta);color:var(--hueso);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* grano de película */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grano 1.2s steps(6) infinite}
@keyframes grano{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
a{color:inherit;text-decoration:none}
::selection{background:var(--grana);color:var(--hueso)}
:focus-visible{outline:1px solid var(--hueso);outline-offset:4px}

.punto{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--grana);margin-left:.06em;vertical-align:baseline}
.punto--titular{width:.13em;height:.13em;margin-left:.05em}

/* barra superior */
.barra{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--margen);transition:background .5s var(--suave),padding .5s var(--suave),border-color .5s;border-bottom:1px solid transparent}
.barra.solida{background:rgba(18,17,16,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:14px;padding-bottom:14px;border-color:var(--linea)}
.marca{font-family:var(--serif);font-style:italic;font-size:30px;letter-spacing:-.02em;line-height:1}
.menu{display:flex;gap:36px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.menu a{position:relative;opacity:.78;transition:opacity .3s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--hueso);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--suave)}
.menu a:hover{opacity:1}.menu a:hover::after{transform:scaleX(1)}

.boton{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;background:var(--hueso);color:var(--tinta);
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;transition:transform .5s var(--suave),background .3s}
.boton:hover{transform:translateY(-2px)}
.boton--linea{background:transparent;color:var(--hueso);border:1px solid rgba(239,232,220,.4);padding:11px 22px}
.boton--linea:hover{background:var(--hueso);color:var(--tinta)}
.enlace{background:none;border:0;color:var(--hueso);font:inherit;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  cursor:pointer;padding:6px 0;border-bottom:1px solid rgba(239,232,220,.35);transition:border-color .3s}
.enlace:hover{border-color:var(--hueso)}

.ceja{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--humo);font-weight:500}

/* portada */
.portada{min-height:100svh;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:clamp(32px,6vw,96px);
  padding:140px var(--margen) 80px}
.titular{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(50px,6.4vw,112px);line-height:.98;letter-spacing:-.025em;margin:26px 0 30px}
.linea{display:block;overflow:hidden;padding-bottom:.08em;white-space:nowrap}
.linea>span{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--suave);transition-delay:calc(var(--d)*.12s + .15s)}
.listo .linea>span{transform:none}
.entrada{max-width:30em;font-size:clamp(17px,1.4vw,20px);color:rgba(239,232,220,.78)}
.acciones{display:flex;align-items:center;gap:34px;margin-top:40px;flex-wrap:wrap}
.aparece{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--suave),transform 1.1s var(--suave);transition-delay:calc(var(--d)*.12s + .3s)}
.listo .aparece{opacity:1;transform:none}

.reel{position:relative;justify-self:end;width:min(100%,400px)}
.reel video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;background:var(--tinta-2);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9)}
.reel figcaption{margin-top:14px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--humo)}
.sonido{position:absolute;left:16px;bottom:52px;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(18,17,16,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--hueso);
  font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;transition:background .3s}
.sonido:hover{background:rgba(18,17,16,.8)}
.sonido__barras{display:flex;align-items:flex-end;gap:2px;height:11px}
.sonido__barras i{width:2px;height:3px;background:var(--hueso);border-radius:1px;transition:height .3s}
.sonido[aria-pressed="true"] .sonido__barras i{animation:barra .9s var(--suave) infinite alternate}
.sonido[aria-pressed="true"] .sonido__barras i:nth-child(2){animation-delay:.2s}
.sonido[aria-pressed="true"] .sonido__barras i:nth-child(3){animation-delay:.4s}
@keyframes barra{from{height:3px}to{height:11px}}

.lista-servicios{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px 28px;padding:34px var(--margen);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--humo)}
.lista-servicios i{width:4px;height:4px;border-radius:50%;background:var(--grana)}

/* manifiesto */
.manifiesto{padding:clamp(110px,16vw,220px) var(--margen);max-width:1400px;margin:0 auto}
.frase{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(40px,6vw,96px);line-height:1.02;letter-spacing:-.02em;max-width:14em;margin:24px 0 56px}
.manifiesto__cuerpo{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:820px;margin-left:auto;color:rgba(239,232,220,.75)}

/* encabezados de sección */
.seccion{display:flex;align-items:baseline;gap:22px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(36px,4.6vw,68px);letter-spacing:-.02em;line-height:1}
.num{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.3em;color:var(--grana);font-weight:600;transform:translateY(-.9em)}
.cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.nota{max-width:24em;color:var(--humo);font-size:15px}

/* trabajo */
.trabajo{padding:40px var(--margen) clamp(110px,14vw,180px)}
.rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.pieza{position:relative;overflow:hidden;border-radius:4px;background:var(--tinta-2)}
.pieza video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--suave),filter .6s;filter:saturate(.92)}
.pieza:hover video{transform:scale(1.07);filter:saturate(1.05)}
.pieza figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 16px;
  background:linear-gradient(to top,rgba(10,9,8,.78),rgba(10,9,8,0));font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(239,232,220,.72)}
.pieza figcaption b{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;letter-spacing:-.01em;text-transform:none;color:var(--hueso);margin-bottom:2px}
.rejilla .pieza:nth-child(4n+2),.rejilla .pieza:nth-child(4n+4){margin-top:clamp(0px,5vw,72px)}

/* servicios */
.servicios{padding:0 var(--margen) clamp(110px,14vw,180px);max-width:1400px;margin:0 auto}
.servicios .seccion{margin-bottom:56px}
.servicio{display:grid;grid-template-columns:80px 1fr 1.1fr;gap:32px;padding:44px 0;border-top:1px solid var(--linea);align-items:start}
.servicio:last-child{border-bottom:1px solid var(--linea)}
.servicio__num{font-size:12px;letter-spacing:.3em;color:var(--humo);padding-top:14px}
.servicio h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(30px,3.4vw,48px);line-height:1.05;letter-spacing:-.015em}
.servicio__texto p{color:rgba(239,232,220,.78);margin-bottom:18px}
.servicio ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.servicio li{font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--linea);border-radius:999px;color:rgba(239,232,220,.7)}

/* cifra */
.cifra{text-align:center;padding:clamp(90px,12vw,160px) var(--margen);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:radial-gradient(ellipse at 50% 120%,rgba(163,22,33,.16),rgba(163,22,33,0) 60%)}
.cifra__numero{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(96px,17vw,260px);line-height:.9;letter-spacing:-.04em}
.cifra__texto{margin-top:22px;color:rgba(239,232,220,.75);font-size:clamp(17px,1.5vw,21px)}

.grana{color:var(--grana)}
.mas{font-family:var(--sans);font-style:normal;font-weight:500;font-size:.32em;color:var(--grana);vertical-align:.95em;margin-right:.08em}
.arroba{display:inline-block;margin:0 -.06em;font-size:.86em}
/* proceso */
.proceso{padding:clamp(110px,14vw,180px) var(--margen);max-width:1400px;margin:0 auto}
.pasos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:64px}
.pasos li{padding-top:26px;border-top:1px solid var(--linea);position:relative}
.pasos li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--grana)}
.pasos span{font-size:12px;letter-spacing:.3em;color:var(--humo)}
.pasos h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:32px;letter-spacing:-.01em;margin:14px 0 10px}
.pasos p{color:rgba(239,232,220,.72);font-size:16px}

/* contacto */
.contacto{text-align:center;padding:clamp(110px,15vw,200px) var(--margen);border-top:1px solid var(--linea)}
.contacto__titular{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(48px,8vw,128px);line-height:1;letter-spacing:-.025em;margin:22px 0 22px}
.contacto__texto{color:rgba(239,232,220,.75);font-size:clamp(17px,1.4vw,20px)}
.correo{display:inline-block;margin-top:48px;font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.6vw,52px);letter-spacing:-.01em;
  background:linear-gradient(var(--grana),var(--grana)) left bottom/0 2px no-repeat;padding-bottom:6px;transition:background-size .7s var(--suave)}
.correo:hover{background-size:100% 2px}
.red{display:block;margin-top:26px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--humo);transition:color .3s}
.red:hover{color:var(--hueso)}

.pie{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px var(--margen);border-top:1px solid var(--linea);
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--humo)}
.pie .marca{font-size:24px;letter-spacing:-.02em;text-transform:none;color:var(--hueso)}

/* aparición al hacer scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--suave),transform 1.1s var(--suave)}
.rv.visto{opacity:1;transform:none}

/* celular y tableta */
@media (max-width:960px){
  .menu{display:none}
  .portada{grid-template-columns:1fr;padding-top:120px;gap:56px;min-height:auto}
  .reel{justify-self:center;width:min(78vw,380px)}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .rejilla .pieza:nth-child(4n+2),.rejilla .pieza:nth-child(4n+4){margin-top:0}
  .rejilla .pieza:nth-child(2n){margin-top:40px}
  .manifiesto__cuerpo{grid-template-columns:1fr;gap:18px}
  .servicio{grid-template-columns:1fr;gap:14px;padding:36px 0}
  .servicio__num{padding-top:0}
  .pasos{grid-template-columns:1fr 1fr;gap:40px 22px}
}
@media (max-width:520px){
  body{font-size:16px}
  .titular{font-size:clamp(44px,13vw,64px)}
  .marca{font-size:26px}
  .boton--linea{padding:9px 16px;font-size:11px}
  .acciones{gap:24px}
  .pasos{grid-template-columns:1fr}
  .pie{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.aparece,.linea>span{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* solo para capturas de revisión */
.captura .portada{min-height:900px}